Collecting .HAR Files and Console logs


Collecting .HAR files will assist support teams in identifying the underlying cause of an issue in a platform.

Table of Contents

Introduction

.HAR files can be obtained easily by accessing the developer tools on a web browser. Typically pressing F12 on your keyboard will bring up the developer tools section on a browser.

While the developer tools window is open, you will need to reproduce the issue before collecting the required files.

Below are a few scenarios on when to collect these logs.

Collecting .HAR Files

Typically pressing F12 will bring up the developer tools section on a given browser. The .HAR files can be obtained via the Network tab and console logs can be obtained under the Console tab under 'Developer Tools'.

For browser-specific instructions, refer to the tabs below.

Google Chrome

    1. Open Google Chrome and go to the page where the issue is occurring.

    2. Press F12 or from the Chrome menu bar select 'More Tools' > 'Developer Tools'.

      Chrome menu selections, red arrows are showing the sequence of menu selections (outlined in red) to open Developer Tools

    3. From the panel that has opened, select the 'Network' tab.

      Look for a red circular 'Record' button in the upper left corner of the tab, If it's grey, click it once to begin monitoring.

      Chrome Developer Tool window with Network tab selected (outlined in red) and recording button outlined in red with an arrow pointing to it

    4. From the left-hand side of the window (the actual website) reproduce the issue by clicking on the element with the issue (examples might include Submit Button, Save Button, Text Box etc.).

      Once you have reproduced the issue, right-click anywhere on the grid of network requests, select 'Save all as HAR with Content', and save the file to your computer.

      Chrome Developer Tools Network tab showing "Save all as HAR with content" option selected overlaying the grid of recorded network requests

    5. Next, select the 'Console' tab. From the left-hand side of the window (actual website) reproduce the issue by clicking on the element with the issue (examples might include Submit Button, Save Button, Text Box etc.).

      Once you have reproduced the issue, right-click anywhere on the grid of console requests, select 'Save as', and save the file to your computer.

      Chrome Developer Tools Console tab showing "Save as" outlined in red

    6. Advise the customer to attach the .HAR file and console logs to the ticket.

Firefox

    1. Open Firefox and go to the page where you are experiencing trouble.

      Press F12 or select the Firefox menu (three horizontal parallel lines) at the top-right of your browser window, then select 'More tools' > 'Web Developer Tools' 

      Firefox More Tools menu; menu button and "Web Developer Tools" option outlined in red
           

    2. The Web Developer Tools opens as a docked panel at the side or bottom of Firefox. Click the 'Network' tab.

      Firefox Web Developer Tools panel with Network tab outlined in red

    3. Above the Web Developer Tools panel, reproduce the issue by clicking on the element with the issue (Examples might include Submit Button, Save Button, Text Box etc.).

    4. Once you have reproduced the issue and you see that all of the actions have been generated in the Web Developer Tools Network tab (should just take a few seconds), right-click anywhere under the File column and click on 'Save All As HAR'.

      Firefox Developer Tools Network tab showing the File column and "Save All As HAR" option outlined in red

    5. From the Web Developer Tools panel, select the 'Console' tab. Select the Settings cog, ensure 'Persist Logs' is ticked.

      Firefox Developer Tools Console tab with Settings Cog and Persist Logs option outlined in red

    6. Once you have reproduced the issue, right-click anywhere on the grid of console requests and select 'Save all Messages to File'. Save the HAR file and console logs somewhere convenient.

      Firefox Web Developer Tools Console tab with Console and "Save all Messages to File" option outlined in red

    7. Advise the customer to attach the HAR file and console logs to the ticket.

Safari

  1. Before generating the HAR file, make sure you can see the Develop menu in Safari.

    If you don’t see the Develop menu in the menu bar, choose Safari > Settings, Select the 'Advanced' tab and check 'Show features for web developers'


    1. Open the 'Develop' menu and select 'Connect Web Inspector' or 'Show Web Inspector'

      Safari Develop Menu and Connect Web Inspector option outlined in red

    2. Click the 'Network' tab.

      Network tab in Safari Web Inspector with Network title outlined in red

    3. Above the Web Inspector panel (actual website) reproduce the issue by clicking on the element with the issue (example: Submit Button, Save Button, Text Box etc)

    4. Click the Export icon on the far right of the network tab and save the HAR file.

      Network tab in Safari Web Inspector with tab title and Export icon outlined in red

    5. Select the 'Console' tab.

    6. Right-click anywhere in the console and select 'Save as...'

      Console tab in Safari Web Inspector with tab title and popup menu outlined in red, Save As is highlighted in blue

    7. Name the log file 'console-log.txt'.

    8. Advise the customer to attach the HAR file and console logs to the ticket.

Edge

    1. Open Edge and go to the page where the issue is occurring.

    2. Press F12 or from the Edge menu bar click on the 3 dots > 'More Tools' > 'Developer Tools'. 

    3. From the panel opened, select the Network tab. If it is not displaying, click the '+'and select 'Network'.

    4. Look for a round Record button in the upper left corner of the tab, and make sure it is red. If it is grey, click it once to start recording.

    5. From the left-hand side of the window (actual website) reproduce the issue by clicking on the element with the issue (example: Submit Button, Save Button, Text Box etc)

    6. Once you have reproduced the issue, right-click anywhere on the grid of network requests, click the 'Export HAR' button in the toolbar to export the trace as a 'HAR' file and save the file to your computer.

      Edge Developer Tools toolbar with Export HAR button outlined in red

    7. From the toolbar, select the Console tab.

    8. From the left-hand side of the window (actual website) reproduce the issue by clicking on the element with the issue (example: Submit Button, Save Button, Text Box etc.

    9. Once you have reproduced the issue, right-click anywhere on the grid of console requests, select 'Save as', and save the file to your computer.

      Edge Developer Tools Console tab showing "Console" and "Save as" outlined in red

    10. Advise the customer to attach the HAR file and console logs to the ticket.