selection of interesting opportunities
Chrome DevTools is a developer console, a set of tools in the browser for creating and debugging websites and applications. With their help, you can also test already developed functionality.
This article will contain a selection of useful tools inside DevTools, which are not very common in QA, but can significantly simplify and speed up testing of sites and applications. I made a small step-by-step tutorial for each tool.
I note that we will talk specifically about Chrome DevTools, although other browsers have similar developer consoles. I use them myself often – it’s convenient. Since the tools are not obvious, I recommend that both beginners and experienced testers take a look under the cat – you will definitely learn something new for yourself.
Screenshots when the page loads
One of the most useful features in DevTools is a series of snapshots as the page loads. With its help, you can catch some bugs and illogical behavior of elements during the page construction process. Or see if a spinner or progress bar appears during loading (if suddenly your Internet is so fast that you cannot visually track this).
How to take a series of screenshots as a page loads
Open the developer panel (F12).
Open the Network tab.
Click on the gear in the upper right corner of the panel.
Next, enable the Capture screenshots checkbox, then press Ctrl+R.
A ribbon of screenshots will appear at the top of the window. By clicking on one of them, you can view all the screenshots sequentially with time stamps and track when which element appeared on the page.
Finding unused CSS and JS in the layout
Another interesting and indispensable feature of DevTools for performance testing is the detection of unused CSS and JavaScript in the layout.
Why is “extra” code bad? The browser checks all code, including unused code, every time the page is loaded. And the more of this unused code, the longer the page can take to load. And if the user accesses the site from a smartphone, all this also wastes extra mobile traffic. Unpleasant.
Using DevTools, you can find all unused code and pass this information to the developer in a bug report. Perhaps there really is something superfluous there. Then by removing this, the developer will improve the site's performance.
How to find unused CSS and JS in your layout
Open the developer panel (F12) and call Command Menu (Ctrl+Shift+P).
Type Show Coverage and press Enter. The Coverage tab will open. He will continue to work in it.
Next, click on the Start instrumenting coverage and reload page button.
After this, DevTool will display a table where, by function (or by block), it will be displayed how much unused code is on the page.
Click on one of the items. After this, the code with the corresponding colored marker will appear on the Sources tab.
The code marked in red is the one that is not used on the page.
On one of the projects, this method helped me catch a problem with extra Google fonts. They seriously overloaded and made the page heavier. As a result, the developers optimized the code by removing unnecessary fonts from it.
Save changes in Chrome across page reloads
Everyone knows that through DevTools you can make changes to the styles on the page, change fonts, colors, delete images, add text, etc. But not everyone knows how to make sure that these changes are saved even after the page is reloaded. This is where local overrides come in handy. And they work for most file types with some exceptions. But we’ll talk about this a little later – in the “Limitations” section.
How to save changes locally
Open the developer panel (F12).
Open the Sources tab.
In the files panel on the left, open the Overrides tab.
Next, click on the Select folder for overrides button. Then select the folder in which you will store the changes you make to the page.
The next step is to allow DevTools access to the selected folder in the pop-up window.
After this, you will need to find the file with the page code in the Network tab. To do this, you need to reload the page and sort everything by Doc. Most often this file is called index.html. In our example below this is Projects.
Right-click on this file and save it Save for overrides.
Now you can make changes to the code that will remain after the page is reloaded.
To do this, find the code of the desired element in the Elements tab using a special tool (Ctrl+Shift+C) and copy it.
Find the copied element in the Sources tab in the document with the page code (to open the search bar, press Ctrl+F).
Make changes to it and press Ctrl+S to save them. Reload the page.
Ready! It was simply “Our works”, it became “Our cool works”. And they will remain so even if we reload the page. The changes are saved locally in the folder we selected in one of the previous steps.
Restrictions! DevTools does not save changes made to the DOM tree in the Elements tab. You can only edit the file with the page code in the Sources tab. But! If the CSS is not recorded in the page code file, you can edit it and save it in the Styles tab.
Returning to the section of our article “Searching for unused CSS and JS in the layout”, using local overrides, you can independently remove the found “extra code” and see how this affects the page loading speed. Also, if you yourself are some kind of developer, you can try to somehow optimize the existing code. For example, change the order of blocks and see how this affects performance.
Network Throttling – emulation of slow Internet
In Devtools, you can emulate a slow Internet connection to test behavior under such conditions.
Open the Network tab
Click on the No Throttling drop-down list
Select the type of slow Internet
Or, you can create your own custom slow Internet. To do this you need:
In the drop-down list, click the Add option
Next, click on the Add custom profile button
Select the name of the custom Internet profile and fill in the Download, Upload, Latency fields.
Click the Add button
Your custom profile will then appear in a drop-down menu for you to select.
Ability to copy requests
If you need to copy the request somewhere else, you can do it like this:
Open the developer panel (F12)
Go to the Network tab
Select the request you need
Right click on it
Select Copy and the type you need (Fetch, cURL, etc.)
Then you can, for example, take a request and run it via cURL, import it into Postman, or edit it directly in the Console tab as a fetch.
Blocking requests
We already know how to see what happens to the page during the loading process (section of the article “Screenshots when page loads”). What if some content doesn't load? Let's say, a picture, or some third-party library. What will happen then?
To test this, you can block a specific request through DevTools. This is how I usually check if the developers have forgotten to set alternative text for pictures, which appears if the picture is broken/lost/not loaded.
How to block certain requests
Open the developer panel (F12) and call Command Menu (Ctrl+Shift+P).
Enter Show Request Blocking and select Show Network Request Blocking. The Network Request Blocking panel will open below.
On the Network tab, select the element for which you want to block requests. And then copy it from the Headers menu and click on the Add Pattern button in the Network Request Blocking panel.
The next step is to insert the request into the field in the Network Requesting Block menu and click on the Add button. Make sure that the request and Enable network request blocking checkboxes are activated.
Now reload the page and check the changes. Ready! We see that instead of the pictures for which we blocked the request, alternative text appeared:
In this case, in the Network tab, the selected element is marked in red. This means it is not loaded.
5 Geolocation override
Using DevTools, you can override the user's location to check how the site will look for residents of different cities/countries/time zones. Does he show the Chelyabinsk weather to a resident of Chelyabinsk? Is the time zone of a European visitor looking at the game schedule on the Canadian hockey club's website taken into account? We can find out all this by simply redefining the geolocation in DevTools.
Attention! This method is suitable for sites and services that determine the visitor’s location using geolocation services, and not, for example, through an IP address.
How to change geolocation in DevTools
Open the developer console (F12) and call Command Menu (Ctrl+Shift+P).
Enter the Sensors command and select Show Sensors from the list. After this, the Sensors tab will open at the bottom of DevTools.
We continue to work in the Sensors tab. In the Location field, you can select existing cities from the drop-down list.
If the desired city is not in the list, click on the Manage button to the right of the drop-down list with available locations. Then Add Location and add the city yourself – with name, coordinates and time zone.
This DevTools feature came in handy for me when we worked on the website of one of the British football clubs. It was necessary to check whether the visitor’s geolocation was taken into account on the page with the schedule of future games.
User-Agent substitution
User-Agent is a string that tells the site what software the visitor is using. It records what device a person uses (PC, tablet or smartphone), with what operating system and through what browser. Sometimes developers use it to include a special mobile version of the site – with its own design and animation styles, so that nothing interferes with getting to know the content on the small screen of a smartphone.
To check whether the styles on the site change depending on different devices, OS and browsers, you don’t have to look at Macs, iPhones, different tablets, etc. You can simply change the User-Agent in DevTools and check the site from one device.
How to change User-Agent in DevTools
Open the developer panel (F12) and call Command Menu (Ctrl+Shift+P).
Type Show Network conditions and press Enter. After this, the Network conditions tab will open at the bottom of DevTools.
In the User-Agent field, uncheck Use browser default.
After this, you can select the desired User-Agent from the drop-down list below.
If the required User-Agent is not in the list, you can enter the data manually. To do this, select Custom from the drop-down list and enter the parameters in the line below.
Lighthouse – website performance test
One way to test site performance, as well as accessibility and SEO optimization, is with Lighthouse, which is now built into DevTools.
Open the developer panel (F12).
Open the Lighthouse tab.
Select test options.
Click Analyze page load.
Some time required for testing will pass, and after that you will see the test results.
You will also see recommendations on what can be improved on the site.
Conclusion
The features we talked about in the article are only a small part of what DevTools is still capable of in the capable hands of a QA specialist. There is still a lot of interesting stuff that can be useful when testing sites and applications. But more on this in the next collections.
In the meantime, I would like to remind everyone involved in QA that there are actually no boundaries in testing! If some tool, originally created at all and not for testing, helps you optimize your work – use it! This is a good tool 🙂
It will be interesting to continue discussing useful tools in the comments. Share tools that you think could complement our selection!
