Saving browser logs

Applies to version: N/A; author: Filip Janiga

Introduction

In some cases it may be necessary to look beyond the diagnostic sessions and events stored in the database to diagnose errors occurring in WEBCON BPS Portal. Here, information stored in the browser comes to the rescue: developer console data and HAR files. This article provides instructions on how to create and save the mentioned logs in the most popular browsers: Microsoft Edge, Google Chrome, Opera, and Mozilla Firefox.

Console

Logs in the browser console are messages that help monitor the performance of websites and applications. They contain information saved by developers, such as application status data, action results, errors, or warnings. The data stored here can help diagnose problems with the application's presentation layer and some connection-related errors.

The Edge, Chrome, and Opera browsers are based on the same engine – Chromium – so their development tools (devTools) are very similar. Therefore, downloading logs from all three browsers will be described using one example – Chrome.

Edge, Chrome, Opera:

1. Open Developer Tools with the F12 key or the shortcut Ctrl+Shift+I and go to the "Console" tab.
2. Clear the contents of the console by pressing the appropriate button or using Ctrl+L.
3. Reproduce the problem in the system – the logs will be saved in the console.
4. Save the created logs by right-clicking on them and selecting "Save as..." and save the data to a LOG file or a text file.

Fig. 1. Chrome console description

Firefox:

1. Open Developer Tools with the F12 key and go to the "Console" tab.
2. Clear the logs using the "Clear web console content" button.
3. Reproduce the problem in the system – the logs will be saved in the console.
4. Save the created logs by right-clicking on them and selecting "Save all messages to file" and save the data to a text file.

Fig. 2. Firefox console description

Logs saved in this way are the basis for analyzing problems with the form in Portal.

HAR files

HAR (HTTP Archive) files are files that record detailed information about network traffic between the browser and the visited website. Thanks to them, you can see exactly what data is sent when the page loads, how long it takes to load individual elements, and whether there are communication errors. The HAR files record everything that happens during the loading and operation of the page, making it possible to analyze and diagnose potential problems.

As with the console, due to the similarities between Edge, Chrome, and Opera, these browsers are described in one section. The screenshot was taken in the Chrome browser.

Edge, Chrome, Opera:

1. Open Developer Tools with the F12 key and go to the “Network" tab.
2. Clear the logs by pressing the appropriate button or using Ctrl+L.
3. Make sure that the network traffic is recorded – the record button should be red.
4. Reproduce the problem in the system – the network traffic information will be saved in the logs.
5. Save the created logs by pressing the "Export HAR file" button or using the shortcut Ctrl+S.

Fig. 3. Description of the "Network" tab in Chrome

Firefox:

1. Open Developer Tools and go to the “Network" tab.
2. Clear the saved logs by pressing the trash icon.
3. Make sure that the network traffic is recorded – this is indicated by the "Pause/Resume network logging" icon. The pause icon indicates recording.
4. Reproduce the problem in the system – the network traffic information will be saved in the logs.
5. Save the created logs by clicking the gear icon and selecting "Save all as HAR".

Fig. 4. Description of the "Network" tab in Firefox

When saving a HAR file, it may be necessary to disable the browser's cache. This can be done by checking the "Disable cache" box. This setting simulates restoring the browser to its default settings.

Summary

The logs saved according to the instructions in this article allow you to get an exact insight into the behavior of the browser while working with WEBCON BPS. The data collected in this way is the basis for analysis and diagnosis of problems occurring in WEBCON BPS Portal.