Breadcrumbs

How to Save Network Web Traffic and Console Logs from Browser Developer Tools

This article explains how to save network logs (HAR/XML file) in web development tools and console logs from the browser and how to capture and read the client side response trace with a HAR file analyzer. This is useful when troubleshooting web applications.

Steps to take differ according to the browser:

This article is based on this source: https://support.qlik.com/articles/000016292

Google Chrome

  1. Open Developer tools (in Menu > More tools > Developer tools or use Ctrl+Shift+I or F12).

  2. Select the Network tab.

  3. Make sure that the Preserve log option is checked so that all traffic is captured.

  4. Access or refresh the page for which traffic needs to be captured or where a problem should be reproduced.

  5. Perform the steps which lead to the behavior/issue.

  6. Click the download icon Export HAR or right-click the Network capture pane and choose Save as HAR with content and save the .har capture locally.

    https://qlik.my.salesforce.com/servlet/servlet.ImageServer?id=015D0000003sMIL&oid=00D20000000IGPX&lastMod=1503326062000


  7. On the Console tab, right-click, select Save as and save the .log file.

info If you want use the whole browser area and keep logging in the background, just undock the Developer tools to a separate window using the More options menu.

image-20200717-111128.png


Firefox (41+)

  1. Go to Menu > Web Developer > Network.

  2. Reload the page you want to get the log for.

  3. Perform the steps which lead to the behavior/issue.

  4. Right-click and select Save All as HAR.

  5. Click the Console tab and select Select All.

  6. Right-click, select Copy Message and save it as a .txt file.

https://qlik.my.salesforce.com/servlet/servlet.ImageServer?id=015D0000003sA3O&oid=00D20000000IGPX&lastMod=1491819619000

Internet Explorer

  1. Open Developer Tools (F12).

  2. Go to the Network tab and click the green arrow to start the tool.

  3. Refresh the page to capture the logs.

  4. Perform the steps which lead to the behavior/issue.

  5. Click the Export captured traffic icon and choose XML or HAR format.

  6. On the Console tab, right-click and select Copy All and save it as a .txt file.

https://qlik.my.salesforce.com/servlet/servlet.ImageServer?id=015D0000003sA3T&oid=00D20000000IGPX&lastMod=1491819636000

HAR Analysis

To analyze the HAR file, it is the easiest to use HAR Analyzer: https://toolbox.googleapps.com/apps/har_analyzer/