Chrome Dev Tools Overview 2022

TLDR; Browser dev tools change frequently. I can through the tooling from left to right and explore them to learn the capabilities.

This post provides a high level summary of the Chrome Dev Tools as they were in September 2022.

Supporting Youtube video overview
Ad-free Patreon video overview

Chrome Dev Tools in Software Testing

Browser Developer Tools does not mean they are only usable by Developers. I’ve been using them for Web Testing for years and they keep getting better so it is important to periodically review them for new features.

Also, different browsers have different tooling capabilities so its worth exploring the dev tools for all the browser you use.

The Pulper SUT

In the video I use The Pulper as the System Under Test to demonstrate the dev tools.

The easiest way to find The Pulper is to visit EvilTester.com

https://www.eviltester.com/page/tools/thepulper/

There are links to any hosted versions and instructions to run it locally.

There is a Patreon exclusive online course on using The Pulper as a practice application with a free 100 page exercise book.

The Dev Tools

Access the Dev Tools by using Right Click and Inspect.

Or Choose “Developer Tools” from the “More Tools” menu in the browser options hamburger menu.

Element Selector

The first icon in the dev tools tabs is the Element Selector.

I most often use this to navigate to a particular element in the “Elements” tab.

I think of this as the Mobile or Responsive Testing View.

I use it to simulate mobile devices because when I choose one of the predefined devices Chrome changes the “user-agent” header in all HTTP requests so the server believes we are now using a mobile device to access the application. e.g. I used to use this to gain access to Instagram features that were only available on mobile when I was using my desktop.

I also use this view to see how the page looks at various resolution sizes.

Additionally I find it useful to help test CSS breakpoints as these are shown at the top of the screen when the “Show Media Queries” configuration option is set.

Elements Tab DOM View

The Elements Tab is the DOM view and shows the Document Object Model (DOM) for the page.

The DOM is the internal hierarchical representation of the HTML source with any additional elements that have been added by Javascript.

The Elements view allows us to navigate the full DOM and see items which might be hidden from the user. Also I can amend the HTML page here, change form validation controls, etc. This is very useful for helping me test server side functionality without having to use an HTTP tool.

In the Elements view I like to use the “Event Listeners” tab to see what additional functionality has been added to the page through Javascript. I can use this to spot areas that might require more testing. Also I can delete events here, I often use this to bypass input validation on the page and test error handling.

The “Styles” tab shows me the applied CSS. This can help me learn more CSS and also if the CSS seems overly complex I might want to do more cross-browser testing.

Console Javascript Errors

The console will show any Javascript errors.

Different browsers show different information e.g. some show HTML validation errors.

I tend to have the console open all the time so I’m aware of any errors because not all errors are displayed on the main web page.

Recorder

The recorder is a new feature which allows recording simple paths through an application and replaying them.

These paths can be exported as Puppeteer scripts to make it easier to get started with automating.

When the recording is replayed you can also look at the performance report of the execution.

Network Tab - HTTP Requests

The Network tab lets me Observe HTTP messages as they are issued.

I can also select the messages to Interrogate and see them in detail.

I tend to use the following settings

Preserve Log - so that requests are not cleared when I navigate through the application
Disable Cache - this is slightly unnatural because the browser cache is not used but it lets me make sure I don’t miss a request, if you test with this option on then it is important to do some testing such that the cache is used so you see if there are any obvious issues involving caching.

Right clicking on a request opens up a new world of options, particularly the ability to:

Save all as HAR with Content - you can save the requests as an HTTP Archive file which can act as a record of your testing and you can view it in a HAR File viewer or HTTP Proxy
Copy as … - copy the request in various formats such that it can be replayed or amended in other tools e.g. copy as cUrl allows pasting a request that triggered a bug into a defect report

Sources Tab

This allows me to read and review all the Source code.

Additionally the “Snippets” view is very useful for writing small Javascript utilities.

You can find more information about this in my free Test Automation U course:

https://testautomationu.applitools.com/automating-in-the-browser-using-javascript/

Performance and Memory

I don’t use this section very much but you can use this to profile the layout and rendering performance, also capture memory profiles and snapshots of memory.

Application Storage

I use the Application Storage frequently to observe how the application is storing data e.g. is it using Cookies, Local Storage or Session Storage.

I also use to to manipulate the data to clear or amend it to put the application into different states.

I also Interrogate the data to see if any confidential information is being stored on the client which might cause a security issue for the user.

Lighthouse

Lighthouse is an excellent tool for reporting on performance and potential cross browser issues.

Since it runs locally it may not be representative of all your users performance issues.

Summary

Becoming familiar with the Dev Tools can help you learn HTML, CSS, HTTP and Javascript. When I’m not using the dev tools I often feel like I’m testing blind because I have no insight into the internal workings of the application in my browser.