Guide to Accessing Console Tab & Network Tab | Shortcuts for DevTools
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
- Right-click anywhere on a webpage.
- Select Inspect or Inspect Element from the context menu.
- In the opened DevTools, navigate to the Console tab.
Refer to the following screenshots.
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:
- Right-click on the page and select Inspect or Inspect Element.
- Go to the Network tab.
- Perform the action that sends the payload (e.g., submit a form/ clicking an action button).
- Locate the relevant network request in the list (usually displayed in red for failed requests) and click on it
- Navigate to the payload tab as shown in the following screenshot.
Follow similar steps to navigate to the payload tab in other browsers.
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?
- Open the web page where you want to download the HAR file.
- Right-click on the page and select Inspect. This will open the browser’s developer tools.
- In the developer tools, click on the Network tab.
- 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,
ii) To persist logs in Firefox,
- Perform the actions on the web page that you want to capture in the HAR file.
- 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,
ii) In Firefox,
- After downloading the HAR file, you can share it with others to investigate and analyze the issue further.