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'.



    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.



    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 as HAR with Content', and save the file to your computer.



    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 log', and save the file to your computer.



    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 'Web Developer' > 'Network'.

          

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

      Above the Web Developer bar, 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 and you see that all of the actions have been generated in the Developer Network Panel (should just take a few seconds), right-click anywhere under the File column and click on 'Save all as HAR'.



    3. From the panel opened, select the 'Console' tab.

      Once you have reproduced the issue, right-click anywhere on the grid of console requests, and select 'Export Visible messages to' > 'File'.


    4. Save the HAR file and console logs somewhere convenient.

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

Internet Explorer

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

    2. Press F12 on your keyboard (or click the gear icon > F12 Developer Tools)

    3. Click the 'Network' tab.

    4. 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.).

    5. Once done click the 'Save' button.

    6. Give the trace a filename and click the Save button which will save it as a .har file or .xml file.

    7. From the panel opened, select the Console tab.

    8. Once you have reproduced the issue, right-click anywhere on the grid of console requests, 'Save as log'.

    9. 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 > Preferences, click Advanced, then select “Show Develop menu in menu bar”.


    1. Open the Develop menu and select Show Web Inspector.



    2. Click the 'Network' tab.



    3. 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)

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



    5. Select the 'Console' tab.

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

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

      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 select 'View' > 'Developer' > 'Developer Tools'. Alternatively, you can press F12 on your keyboard.

    3. From the panel opened, select the Network tab.

    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, select Save as HAR with Content, and save the file to your computer.

    7. From the panel opened, 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 log, and save the file to your computer.

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