Articles in this section
Category / Section

Guide to Accessing Console Tab & Network Tab | Shortcuts for DevTools

Published:

This article provides a guide on how to access the Console tab, along with shortcuts to open the DevTools, and explores the Network tab for capturing payload data.

Console Tab

To access the console tab in a web browser, follow these general steps:

Chrome

  1. Right-click anywhere on a webpage.
  2. Select Inspect or Inspect Element from the context menu.
  3. In the opened DevTools, navigate to the Console tab.

Refer to the following screenshots.

Inspect_Button.png

Console_Tab.png

Follow similar steps to navigate to the console tab in other browsers.

Shortcuts to access the Dev tools

Use the following keyboard shortcuts to access the Dev tools:

Browsers Shortcuts
Chrome, Firefox, Microsoft edge Ctrl + Shift + I
Safari Cmd + Opt + I

Network Tab - Payload Data

If the issue reoccurs multiple times, open the network tab and repeat the action that caused the issue to get the payload data using the below steps:

Chrome:

  1. Right-click on the page and select Inspect or Inspect Element.
  2. Go to the Network tab.
  3. Perform the action that sends the payload (e.g., submit a form/ clicking an action button).
  4. Locate the relevant network request in the list (usually displayed in red for failed requests) and click on it
  5. Navigate to the payload tab as shown in the following screenshot.

Payload_data.png

Follow similar steps to navigate to the payload tab in other browsers.

Inspect.gif

HAR File

A HAR (HTTP Archive) file is a JSON formatted log of a web browser’s interactions with a web server. It is useful for troubleshooting and analyzing performance issues. This article will guide you through the process of downloading a HAR file from your browser.

How to Generate HAR Files?

  1. Open the web page where you want to download the HAR file.
  2. Right-click on the page and select Inspect. This will open the browser’s developer tools.

Inspect_Page.png

  1. In the developer tools, click on the Network tab.

Network_tab.png

  1. Select the Preserve/Persist Logs and All options. This ensures that the log is not cleared when you navigate to a new page or refresh the current page.
    i) To preserve log in Chrome,

Preserve_Log.png

ii) To persist logs in Firefox,

Persist_Log.png

  1. Perform the actions on the web page that you want to capture in the HAR file.
  2. Once you have completed the actions, click on the Export HAR option in the developer tools. This will prompt you to save the HAR file to your computer.
    i) In Chrome,

Export_-_Chrome.png

ii) In Firefox,

Export_-_FireFox.png

  1. After downloading the HAR file, you can share it with others to investigate and analyze the issue further.
Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied