Reading:
10 powerful tests with Chrome DevTools
Tool of The Week : Kualitee  image
Kualitee is a test management tool that gives you the real-time QA insights you need to test better, collaborate smarter, and release world-class software more efficiently than ever.

10 powerful tests with Chrome DevTools

Discover how to use Chrome DevTools to troubleshoot and carry out an effective testing process

Three eyed MoT monster holding the Google Chrome logo overhead, conveying a sense of power and energy

"By mastering Chrome DevTools or the equivalent in other browsers, testers can significantly enhance the quality and efficiency of their testing processes, ultimately supporting faster issue resolution and a more stable user experience." 

Did you know Chrome DevTools isn’t just for developers but also for testers? As a QA professional, finding bugs is essential, but understanding their root causes and suggesting solutions takes testing to another level. 

If you don't use Chrome, every modern browser has an equivalent of Chrome DevTools with similar features. So you can run these tests in the browser of your choice.

To maximize the value of Chrome DevTools, testers should have some familiarity with HTML, CSS, the DOM, JavaScript, and reading network-level responses.

What is Chrome DevTools?

Chrome DevTools is a powerful web toolkit that enables you to inspect and debug websites and web applications. For testers, it offers an efficient way to inspect elements, analyze console logs, monitor network activities, and assess page performance. 

Let's explore the features of Chrome DevTools that make it invaluable for testers with these 10 tests. 

Test 1: Using the Elements tab to troubleshoot a spacing issue

The Elements tab in Chrome DevTools is split into two views: HTML and CSS. Right-click on any element and select Inspect, or use the arrow at the top left of Chrome DevTools to hover over any element and select it, This displays the Styles in the right panel. This allows real-time modification of HTML and CSS without needing to update the code permanently.

The screenshot below shows a page where there’s an unintended space between a divider line and a banner image. Assume this is an issue where in the design the banner image is attached to the divider line. 

A screenshot of a webpage showing a horizontal divider line above a large banner image of a smiling woman, with unintended empty space (highlighted in green) between the divider and the banner.

Figure 1: Banner image issue caused by space between divider line and image 

Hover over the divider line or the banner image to capture the space area and select it. The screenshot below shows the space area inspected. 

A screenshot of a webpage in Chrome DevTools highlighting a thin, peach-colored bar labeled “div.navigation-border” at the top of the page, showing the unused space above the banner image.

Figure 2: Hovering over the top area to capture the space

Removing the margin-bottom style from the CSS fixes the space issue.

 A screenshot of Chrome DevTools showing the “div.navigation-border” element with a 24px margin-bottom. Removing this CSS margin-bottom fixes the unwanted space above the banner image.
Figure 3: Removing the margin-bottom style from CSS file fixed the space issue

As seen from the three screenshots above, you can hover over the space to capture it, inspect it, and troubleshoot the issue by adjusting the margin or padding.

Test 2: Using Inspect Element to troubleshoot an issue that impedes user navigation

In the screenshot below, the interface provides "carousel dots" for navigation of slides. However, they're only partially visible. These dots are supposed to be fully visible so users can easily select them to navigate to the next slide. 

The area where the slideshow is displayed has a boundary that hides anything outside of it (a style called overflow-hidden). Because of this, the dots at the edges of the slider are cut off, making it hard for users to see or select them properly. 

A screenshot of a plumbing services webpage showing a testimonial in the center and navigation “carousel dots” at the bottom that are partially cut off, indicating the dots are hidden by the slider’s container.

Figure 4: The half-hidden carousel dots in the slider

To troubleshoot this issue, simply hover over the content and you will see the green shadow overflow on the carousel dots. When you select it, you will see the related stylings on the right side. 

A screenshot of a webpage’s testimonial slider, highlighted in Chrome DevTools. The “testimonial-slider” element is shown with an “overflow: hidden” CSS property, causing the carousel dots to be partially obscured.

Figure 5: Hovering over the carousel element to observe the padding's CSS value of overflow-hidden 

Untick the overflow-hidden attribute and watch as the issue is resolved without changing the position of the dots. 

A screenshot of a plumbing services webpage with a testimonial slider. After removing the “overflow: hidden” attribute in the DevTools, the three carousel dots are now fully visible in the center, fixing the partial cut-off issue.

Figure 6: Remove the overflow-hidden attribute to fix the issue

Test 3: Using the Console tab to identify Javascript errors

The Console tab is an important tool for identifying JavaScript errors, which are flagged in red, making them easy to locate. Because there are hundreds of possible error types your ability to analyse them will come only with experience. In some cases, developers attach scripts to code so that they can more easily identify any script-related faults.

You really shouldn't see any errors in the Console by the time a site is deployed to production. However, server or network issues may sometimes generate logs.

The screenshot below shows the Console error log for some broken text related to diagrams inserted into the workspace. However, this error does not occur for all users of the site. In this case, a hotfix for the particular client should be provided promptly, instead of asking them to wait for a general application-level resolution. 

A screenshot of a Creately workspace in which the “Legend” flowchart shapes (Terminator, Process, Decision, Input, Document) are highlighted in red. Below, the Console tab shows multiple error messages in red indicating “Found a broken text. Id: …” for various diagram text IDs.

Figure 7: Text IDs of the broken text elements in the diagram in the Console 

Test 4: Analysing error logs in the Console 

In the screenshot below, from the error itself, it is obvious that the log is related to some security issue in cookie properties. Leaving this type of error unhandled may result in session management issues, inconsistencies in analytics, inconsistent application behaviours, and more. So, if the site relies on cookies or same-origin policies, this error needs to be validated and fixed. 

A screenshot of the Chrome DevTools Console for kellyfelder.com showing a security error: “Failed to read the ‘cookie’ property from ‘Document’: The document is sandboxed and lacks the ‘allow-same-origin’ flag,” plus additional warnings about non-unique HTML select element IDs.

Figure 8: A Console log error related to a security issue with cookie properties

Test 5: Finding broken links by running custom JavaScript in the Console 

You can run custom JavaScript in the Console to find broken links, to clear page cache, and more. 

The code snippet below checks for broken links, and the call function checkBrokenLinks() will find and display all broken links, marking them in red. It’s helpful when testing pages that are inaccessible from external networks.

// Function to check if a link is broken 
 async function checkBrokenLinks() {
 	// Get all the <a> elements on the page
 	const links = document.querySelectorAll('a');
 
	// Loop through each link
 	for (let link of links) {
     	const href = link.getAttribute('href');

     	// Skip links with empty or non-existent hrefs
     	if (!href || href.startsWith('#') || href.startsWith('mailto:') || href.startsWith('javascript:')) {
         	continue;
     	}
 
    	try {
         	// Fetch the link and check the response status
         	const response = await fetch(href, { method: 'HEAD' });

         	// If the status code is not OK (i.e., not 2xx)
         	if (!response.ok) {
                 console.log(`Broken link found: ${href} (Status: ${response.status})`);
                 link.style.color = 'red'; // Optionally highlight the broken link in red
         	}
     	} catch (error) {
         	// If an error occurs (e.g., network error, or link is unreachable)
             console.log(`Broken link found: ${href} (Error: ${error.message})`);
             link.style.color = 'red'; // Highlight broken link
     	}
 	}
 }

Test 6: Using the Network tab to analyse error codes caused by specific browser actions

The Network tab logs all requests for every action taken on a page, showing crucial status codes that indicate whether an action succeeded or failed. 

The screenshot below shows a HTTP 404 error code on a favicon.png file. This simply indicates that the specified file is missing. Selecting the file name provides more details, including headers and responses, which can assist in further diagnosis. 

There are several HTTP status codes, which you should learn more about if you want to make good use of what you find in the Network tab.

A screenshot of Chrome DevTools’ Network tab showing a “404 Not Found” status for a missing favicon.png file, listed in red to indicate an error.

Figure 9: HTTP 404 error code for favicon.png

Test 7: Capturing the data passed to action elements

We can investigate certain hidden information in the Network tab. In the screenshot below you can see the telephone number and email address the user entered. If there were an issue with gathering that information, you'd be able to see that the information was missing. 

A screenshot of the Chrome DevTools Network tab on the fashionbug.lk website. In the top-right corner, two icons (a phone and an envelope) link to a telephone number (“tel:077 235 2235”) and an email address (“mailto:fashionbug@gmail.com”). The Network panel shows these links in red with a canceled status.

Figure 10: The telephone and email addresses linked to the icons on the top right corner of the page

Test 8: Testing offline functionality without actually disconnecting from the network

You can go into offline mode right from the Network tab. Simply select No Throttling -> Offline. This feature is helpful for testing offline functionality without disconnecting your device from the network physically.

A screenshot of Chrome DevTools’ Network tab showing the Throttling dropdown expanded and “Offline” selected, enabling testers to simulate a disconnected (offline) state for web application testing.

Figure 11: Selecting Offline from the No Throttling dropdown option list

Test 9: Using the Application tab to investigate data flow

In the Application tab, you can dig deeper into data-related activities. You can perform all kinds of tasks, from clearing cache to analysing the indexDB where you can get a glimpse of data associated with the UI level of the application. But to get a good understanding of the information generated in this tab you first need a little understanding of the database in use.

The screenshot below shows the authentication token in local application storage. This data can be used for certain testing purposes, like automating the functionality of the diagramming workspace. 

 A screenshot of the Chrome DevTools Application tab for app.creately.com. Under Local Storage, the socketcluster.authToken entry is highlighted, displaying a JWT-style token value used for authentication.

Figure 12: Retrieving the authentication token to perform automated tests

Test 10: Retrieving the user ID to perform tests with specific user data

The screenshot below shows the userID of the created workspace in the Application tab. This is useful if you need to perform any database-related testing for this user. 

A screenshot of the Chrome DevTools Application tab for app.creately.com. In Local Storage, the “rxdata.rxdata.default.UserInfoModel.channel” key is highlighted, revealing a JSON value that includes the logged-in user’s ID.

Figure 13: Getting the userID of the logged-in user 

To wrap up

The Elements, Console, Network and Application tabs are especially beneficial for testers working with browser-based applications, offering invaluable insights that go beyond simply identifying issues. By mastering Chrome DevTools or the equivalent in other browsers, testers can significantly enhance the quality and efficiency of their testing processes, ultimately supporting faster issue resolution and a more stable user experience. 

For more information

Senior Software Quality Assurance Engineer
I am a Software QA Professional with more than 5 years of experience in both manual and automation testing. Teaching is my passion as well as learning. I believe that, as Dalai Lama said, Sharing knowledge is the way to achieve immortality.
Comments
Tool of The Week : Kualitee  image
Kualitee is a test management tool that gives you the real-time QA insights you need to test better, collaborate smarter, and release world-class software more efficiently than ever.
Explore MoT
Software Testing Live: episode 01 - Breaking the bank image
Tune in to witness a live software testing session. Rahul joins Ben to explore the ParaBank practice app
MoT Foundation Certificate in Test Automation
Unlock the essential skills to transition into Test Automation through interactive, community-driven learning, backed by industry expertise
This Week in Testing
Debrief the week in Testing via a community radio show hosted by Simon Tomes and members of the community
Subscribe to our newsletter
We'll keep you up to date on all the testing trends.