How to collect browser logs to troubleshoot sign-in/access issues

Problem:

You cannot sign in to a web app using your credentials, access one of the app's components, complete a payment, etc. in your internet browser. You would like to know how to collect logs in your browser for diagnostic and troubleshooting purposes.

Solution:

Collecting logs is done in a more or less similar way regardless of which browser you're using. The instructions below apply to Google Chrome but can also be used with Mozilla Firefox and Microsoft Edge – any differences will be discussed in the relevant Info boxes.

1. Open your web browser and press the F12 key to access (Web) Developer Tools.
2. Go to the Sources tab and click the Deactivate breakpoints () icon. When activated, the icon's color turns blue (Fig. 1.).

   Info

   In Mozilla Firefox, go to the Debugger tab and click the Deactivate breakpoints icon.

   In Microsoft Edge, the Deactivate breakpoints icon looks slightly different – it's circular ().

Fig. 1. Enabling the Deactivate breakpoints feature on the Sources tab.

3. (Optional) If debugger (the log collecting tool) is paused and you see the message, as shown in Fig. 2. (or similar), click the Play/Resume icon () to resume the debugger.

Fig. 2. Resuming the operations of the browser's debugger.

4. Go to the Network tab and clear the previously collected logs by clicking the Clear icon () - see Fig. 3.

   Info

   In Mozilla Firefox, click the Trashcan icon ().

Fig. 3. Clearing the previously collected logs to start recording logs from scratch.

5. Now, perform the steps to recreate your problem (e.g. try to sign in to a web app, complete a payment process, etc.), so that the debugger can record the details concerning your issue. Do not close the Web Developer Tools panel.

   Important

   If the debugger gets paused while you recreate your problem, click the Play/Resume icon () – see Fig. 2. to continue recording your steps.

6. Once you've recreated your problem, export the collected logs by clicking the Export HAR icon () on the Network tab (Fig. 4.) and saving them as a HAR (HTTP Archive) file to your disk.

   Info

   In Mozilla Firefox, click the Cogwheel icon () on the Network tab, choose Save All As HAR, and save the HAR file to your disk.

Fig. 4. Saving the collected logs as a HAR file.