Effective bug reporting is crucial for maintaining and improving websites and web applications. One of the most powerful tools in a tester’s arsenal is the ability to collect and analyze browser logs. These logs provide invaluable insights into the inner workings of web applications, helping developers pinpoint and resolve issues more efficiently.
In this article, we will describe in detail how to obtain browser logs, what types of logs are available, how to collect all the necessary data, and how to format a bug report so that the developer can reproduce the bug and quickly understand the cause of the problem.
How to Obtain Browser Logs
You can get logs from the browser using the DevTools that are built into all modern browsers. For each browser, there are several ways to open the DevTools panel.
How to Open Chrome DevTools
To open Chrome DevTools, do the following:
- Press F12.
- Right-click and select the Inspect option on an element.
- Press Ctrl + Shift + C or Command + Option + C (Mac).
- Press Ctrl + Shift + J or Command + Option + J (Mac) to call the console.
How to Open DevTools in Firefox
- Press F12.
- Right-click and select the Inspect option on an element.
- Open from the menu: Tools > Web Developer > Web Developer Tools
- Ctrl + Shift + I (Windows / Linux)
- Cmd + Opt + I (Mac OS)
The hotkeys used in Google Chrome also work in other Chromium-based browsers such as Microsoft Edge, Opera, Arc, Brave, and Vivaldi. A list of the most popular Chromium-based browsers can be found here.
How to Open Web Inspector in Safari
To open the web inspector in Safari, you first need to enable features for web developers:
- From the menu bar, choose Safari.
- Select Settings… (⌘,).
- Go to the Advanced pane.
- Check the Show features for web developers checkbox.
After enabling features for web developers, you can open the web inspector in the following ways:
- Via the Develop menu, go to the Develop menu and choose Show Web Inspector
- Right-click on the webpage and choose Inspect Element from the context menu.
- Cmd + Opt + I
How to Obtain Browser Logs on Mobile Devices
In most cases, if you need to get logs from the mobile version of a web application or website, you can use mobile device emulation through development tools. To do this, follow these two simple steps:
- Open DevTools.
- Click the Toggle device toolbar located in the action bar at the top.
You can read more about mobile device emulation through DevTools in this article https://developer.chrome.com/docs/devtools/device-mode.
If emulation through DevTools does not allow you to reproduce the problem, you need to connect the mobile device to a desktop and link it with your browser’s DevTools. This approach is called Remote Debug:
- Description of connecting a device and using Remote Debug for Android devices – https://developer.chrome.com/docs/devtools/remote-debugging
- Description of a similar remote debug process for iOS and iPadOS – https://developer.apple.com/documentation/safari-developer-tools/inspecting-ios
In the case of Apple devices, you can set up a full simulation of any mobile device on your Mac without the need for a physical device. Detailed instructions for setting up the simulation can be found here – https://developer.apple.com/documentation/safari-developer-tools/installing-xcode-and-simulators.
Console Logs
When investigating the cause of a problem in a web application, developers first refer to console logs. Console logs are simply a list of messages and contain information about all frontend errors, as well as records of errors related to server requests. Additionally, console logs may contain additional debug information added by developers to monitor the application’s state.
To access console logs, go to the Console tab in DevTools.
Since console logs have a simple structure and are highly useful for developers, we recommend always adding console logs to your bug report as a file or, at the very least, selecting error-related messages highlighted in red and adding them as a file or separate item in the bug report.
Network Logs
Network logs contain data about all requests that the web application or site sent to the server, as well as the responses received from the server. Unlike console logs, network logs allow the developer to analyze the problem in more detail, especially if it is related to the backend (the server side of the application or site).
To access network logs, go to the Network tab in DevTools.
Network logs have a complex structure and contain a large amount of information for each request. You cannot simply copy all the data and place it in a file, but you can at least copy the names of requests that ended with an error (requests with errors have status codes from 400 – 499 and 500 – 599).
In addition to the names of requests with errors, we recommend adding the response content if it is present. This is especially relevant if you are testing on a staging environment, as unlike the production environment, developers often set up additional debug information output, which helps in finding and analyzing problems that occurred during unsuccessful server request processing.
HAR File
You can provide the developer with all network logs in the form of a single .HAR file, which the developer can import into their browser to access and analyze all the data in the Network tab.
To create a HAR File, go to the Network tab and click on the export icon.
Adding a HAR file to a bug report is the best way to provide the developer with the maximum necessary data to solve the problem, but it should be noted that the HAR file may include data such as the contents of your cookies and the pages you loaded during the recording. Anyone with access to the HAR file can view data that may include personal or other confidential information. You can find Google Har File Analyzer here.
Read more about how to download, view, and analyze HAR files in this article.
Automatic Log Collection
With Webvizio, you can automate log collection and bug report creation. All you need to do for automatic log collection is click the Add Logs icon in the task creation form.
After clicking the add logs button, Webvizio will attach console logs, network logs, and a HAR file to the task if DevTools is open on the page at the time of adding logs (console logs and network logs are collected automatically without the need to open DevTools).
Action Logs
In addition to the automatic collection of console and network logs, Webvizio collects logs of your actions on the page (clicks on elements, form field entries). Action logs can be a great addition to the Steps To Reproduce section of your bug report or completely replace this section, allowing you to automate and speed up the bug report creation process.
Conclusion
To wrap up, gathering and analyzing browser logs is key to reporting bugs. Using built-in browser dev tools lets you access the console and network logs. These logs provide developers with useful insights and help them to resolve an issue faster. You can also diagnose issues by simulating mobile devices and using remote debugging.
It is important to note that browser log collection requires time and certain technical skills. Using tools like Webvizio to collect logs automatically can make the process faster, especially for non-technical users. This ensures developers get complete data to fix issues. Following these steps can help solve bugs faster and improve web applications overall.