How to Get Browser Console Logs While Testing Website

Browser console logs are required to troubleshoot the errors or bugs occurred on any website or web application. It is the great source of information to understand the component behavior while testing the software. Browser logs will not be generated automatically, So we have to capture it manually if required. It can be collected easily and quickly using developer tools.

Capturing and reading browser logs helps the developers to find the source of the problem. Generally, the browser log includes different components such as process ID, thread ID, date, time, source code file name along with line number.

Collecting Browser Console Logs from Different Browsers

Here is the step by step guide for collecting browser console logs from the main browsers Google Chrome, Mozilla Firefox, Internet Explorer and Microsoft edge.

Google Chrome 67

1. Opening the Console

In order to open the console window perform the steps given below.

1. At first, right click on web browser window and left click on inspect element.
2. Click on console tab.

OR

1. Click on the hamburger menu icon (3 dots).
2. Click on More Tools.
3. Now, click on Developer Tools.

OR

1. Directly press Ctrl+Shift+I for windows and Cmd+Option+I key from the keyboard.

2. Selecting the settings

Now you have to select the required settings for capturing the logs.

1. Click on settings icon to open settings option.
2. Select preserve log.
3. Select show timestamps.

3. Starting to record log

1. Clear the logs with clicking on circle icon or press Ctrl+L key
2. Start to recreate the issue you have found.

4. Saving the log

1. Highlight all the log text with pressing Ctrl+A for windows or Cmd+A on Mac.
2. Right-click over the log screen and click on Save As.
3. Give the name of the file and save as text file with providing .txt file extension.

Mozilla Firefox 61

Mozilla Firefox provides two interfaces i.e web console and browser console, for capturing browser console logs. Basically, web console is useful for recording browser console logs from a single page since it is limited to a single page. Whereas, browser console can be used to capture browser logs from all the tabs.

Capturing logs using web console

1. Opening web console

1. Open options menu (three lines on the top right corner).
2. Click on Web Developer and click on Web Console OR directly press Ctrl+Shift+K key.

OR

1. At first, right click on web browser window and left click on inspect element.
2. Click on console tab.

2. Recording logs

1. Give check mark on “Persist Logs” checkbox.
2. Click on three dots and click on settings or press F1 key.
3. Give check mark on “Enable timestamps” checkbox located under Web Console session.
4. Start to recreate the issue you have found.

3. Saving logs

1. After finished recording, right click on console area and click on Select All OR directly press Ctrl+A key.
2. Now copy the content pressing the Ctrl+C key and paste it on the text editor like Notepad.
3. Save the log as a text file.

Capturing logs using browser console

1. Open options menu (three lines on the top right corner).
2. Click on Web Developer and click on Browser Console OR directly press Ctrl+Shift+J key.
3. Start to recreate the issue you have found.
4. Save the captured log as the method given above.

Internet Explorer 11 / Microsoft Edge 20

1. Opening web console

1. At first click on Tools icon located on the top right corner of the window.
2. Click on developer tools OR directly press F12 button.
3. Click on console tab.

OR

1. At first, right click on web browser window and left click on inspect element.
2. Click on console tab.

2. Recording logs

1. Clear the previously recorded logs clicking on (X) icon.
2. Start to recreate the issue you have found.

3. Saving logs

1. After finished recording, right click on console area and click on Copy All.
2. Paste the copied log text to Notepad and save as text file.

Read Next: How to Capture Android Logs with Minimal ADB and Fastboot