How to Collect Browser Console and Network Logs for Troubleshooting
When troubleshooting issues within a web browser application, collecting browser console and network logs can help identify the root cause. This guide explains how to collect these logs using Chrome, with similar steps applicable to Edge and Firefox.
Step 1: Access the Problem Area
Navigate to the area in the web application where you’re experiencing unexpected behavior.
NOTE: The following steps are for Google Chrome, but the process is the same for Microsoft Edge and very similar for Mozilla Firefox.
Step 2: Open the Browser Developer Tools
- Right-click anywhere on the page and select Inspect (CTRL+SHIFT+C).
- The Developer Tools will open, typically on the right side of your screen. It may open along the bottom for Firefox
Step 3: Access the Console Tab
- Select the Console tab in the Developer Tools.
- Clear the console by clicking Clear Console (CTRL + L).
- For Firefox, this is a small trash bin icon in the top left of the console window.
Step 4: Access the Network Tab
- Switch to the Network tab.
- Clear the network log by clicking Clear (Ctrl + L).
- For Firefox, this is a small trash bin icon in the top left of the console window.
Step 5: Recreate the Unexpected Behavior
Perform the actions in the application that cause the unexpected behavior.
- This process will capture the relevant logs and network activity needed for troubleshooting.
TIP: If possible, it is best practice to capture a screen recording while you are recreating the steps. This can help ensure the support team has a clear understanding of the steps carried out to result in the logs collected.
Step 6: Save the Logs
-
Save Console Logs:
- In the Console tab, right-click on any log entry and select Save As.
- Save the file as a .log file.
- For Firefox, save the file as a .txt file.
-
Save Network Logs:
- In the Network tab, click the Export HAR button (a down arrow in the top-right corner).
- For Firefox, right click on any of the entries in the Network log and select Save All As HAR.
- Save the file as a .har file.
- In the Network tab, click the Export HAR button (a down arrow in the top-right corner).