Developer tools in browser. Console tab

What is Developer Tools?

Developer Tools is a tool that is present in Google Chrome and other browsers by default, that is created for the developers and testers for the debugging. It helps to view the code of the page, logs, page loads, different resolutions display, code errors and a lot of other things. 

This information helps the developers and testers to understand the reasons of the defects, as well as to see how they reproduce not only through the assigned for the user interface, find errors in the code, project different situations in site’s work, for example, absence of the connection or rotation of the mobile device. Information about bugs gathered in Developer Tools also helps to write the bug reports properly, for instance your bug will be much more informative if you include the correct element names, styles and errors (as they are displayed in the code).

There are several ways to open Developer Tools:

• hot key button Command – Option – I (Mac) or Control – Shift – I (Windows/Linux);
• Additional tools menu > DEveloper Tools;
• F12 button.

Main tabs in Developer Tools:

• Elements
• Console
• Sources
• Network
• Performance 
• Memory 
• Application 
• Security 
• Lighthouse

This article is dedicated to the «Console» tab.

The «Console» tab is made for displaying the important messages of the work of the site. It shows the errors, warnings and logs (if they are on), also the JavaScript code can run in this tab too. Sometimes the tab is opened when the testers are testing the site to follow the logs and find invisible for a customer errors and warnings. These errors and warnings are the results of the mistakes in the code and are no less important than the visible ones in the interface. The fact of observing such defects is a good reason to report them.

The error messages in the console contain the reference to the line with the mistake. After clicking the link, the «Sources» tab will be opened where one can see the JS element with wrong parameters.

Console can and even must be cleaned, so in order to navigate through the messages and errors, the old logs must be deleted. It can be done in different ways:

1. Click the corresponding button in the tab.

2. Right click the panel with the messages and choose the «Clear Console» option in the context menu.

3. Type the clear() command or console.clear()  in the command prompt API and press Enter.

4. Use the hot keys ⌘K or ⌃L (Mac), Control – L (Windows or Linux).

In order to make some changes in settings of the console, click the «Console Settings» and choose the corresponding parameters.

Main parameters:

1. Log XMLHTTPRequests – defines whether the request must be logged in the console.
2. Preserve log – defines whether to wipe the history of the console after following the new page or updating the page. If this option is turned off and the page refreshed – previous logs won’t be available anymore. However if it is on – the console history will be saved after following to the new page or simply refreshing the page. This choice helps a lot in the situations when several pages must be opened to reproduce it in the bug. 
3. Eager Evaluation displays the result of executing an expression without executing code directly in the console. That is, the preview of the result will be displayed before pressing the Enter key.

4. Autocomplete from History – if some command has already been inputted into the console then it will be shown in the recommended options after starting to type the same command.

 If you right-click on the console tab – a context menu will appear in which you can clear the console, input history and save logs as a file with a .log extension.

The message display in the console can be filtered according to its type : 

1. All –  all messages are seen and displayed. 
2. Errors – only errors of the site loading are displayed.
3. Warnings – only warnings are displayed.
4. Info – only informative messages are displayed as well as the debugging information. 
5. Verbose – console.timeEnd() message and other console functions are displayed. 

Filtering the messages is performed by using the «Default levels» button (the settings set in the drop-down list will be saved after restarting the browser) or the «Show console sidebar» button (the filters set in this menu take precedence over the «Default levels» drop-down list). The console can also get errors from various plugins, not just the site itself. Therefore, messages need to be filtered in terms of whether the error is a site or not.

The «Top» drop-down list is also used to filter information in the console. With its help one can divide logs into frames, separating the messages of the site and various plugins, extensions and viruses. In order for this filtering to work, you need to enable the «Selected Context Only» checkbox.

Filter option provides the search by the keywords. Only messages that contain the corresponding request words will be displayed in the console.

Exploring Developer Tools is a must for every tester, as their capabilities are often used to help them provide the information they need to reproduce a bug. The more details a tester can provide in a bug report, the higher their qualifications and value.