How to collect browser logs for QA bug reporting
  • Bug Tracking & Reporting
  • Quality assurance
  • Web Design & Development

The Ultimate Guide to Utilizing Browser Logs for Effective QA Bug Reporting

Alex Malashkevych CTO
Jan 23, 2025
7 min

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:

  1. From the menu bar, choose Safari.
  2. Select Settings… (⌘,).
  3. Go to the Advanced pane.
  4. 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:

  1. Open DevTools.
  2. Click the Toggle device toolbar located in the action bar at the top.
How to find browser logs on mobile devices

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:

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.

How to find browser console logs

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.

How to find browser network logs

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.

How to find and download .HAR file

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.

Automatic browser techical logs collection with Webvizio

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.

Aumotatic action logs (retro steps) collection for QA bug reporting

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.

Webvizio reduces bug reporting time by half through automation that is not available in other stand-alone issue tracking and screenshot tools.

Featured Articles

Jan 03, 2022
9 min
Workplace Communication and Why It Is Essential
  • Productivity
  • Quality assurance
  • Web Design & Development
Jan 11, 2022
10 min
Effective Project Management Using Website Feedback Tools
  • Productivity
  • Quality assurance
  • Web Design & Development
Jan 13, 2022
9 min
Productivity Hints. How Live Website Feedback Tools Can Help Digital Marketers in Daily Work
  • Productivity
  • Quality assurance
Jan 21, 2022
9 min
How Web Agency Tools Can Help You Get Better At Website Design And Bug Tracking
  • Bug Tracking & Reporting
  • Quality assurance
  • Web Design & Development
Feb 02, 2022
6 min
Website Launch Checklist: Essential Things to Check Before Launching Your Website
  • Quality assurance
  • UI/UX
  • Web Design & Development
Feb 16, 2022
6 min
How Webvizio Improves Bug Reporting And QA Process In Just A Few Clicks!
  • Bug Tracking & Reporting
  • Productivity
  • Quality assurance
Apr 16, 2022
3 min
Bug Reporting: How to Effectively Collaborate on Live Website Bugs (and Make Your QA Team Love You 💗)
  • Bug Tracking & Reporting
  • Quality assurance
Apr 19, 2022
7 min
How To Leave Feedback On Web Design Like a Pro – Website Review 101
  • Quality assurance
  • UI/UX
  • Web Design & Development
Feb 18, 2024
9 min
The Power Of Collaborative Web Design & Development: Annotate Web Pages & Fix Bugs Live
  • Bug Tracking & Reporting
  • Quality assurance
  • Web Design & Development
Mar 15, 2024
13 min
Mastering Website Feedback: How to Effectively Annotate and Improve Your Digital Projects
  • Bug Tracking & Reporting
  • Quality assurance
  • Web Design & Development
Dec 09, 2024
7 min
How to Write an Effective Bug Report: A Comprehensive Guide
  • Bug Tracking & Reporting
  • Quality assurance
  • Web Design & Development
Jan 03, 2025
15 min
12 Best Bug Tracking Tools in Software Development in 2025
  • Bug Tracking & Reporting
  • Productivity
  • Quality assurance
Jan 31, 2025
2 min
Introducing Game-Changing Technical Logs for Webvizio Browser Extension
  • Bug Tracking & Reporting
  • Product Features
  • Quality assurance
Feb 04, 2025
7 min
How to Download, View, and Analyze HAR Files
  • Bug Tracking & Reporting
  • Quality assurance