This post will help you use Chrome DevTools to solve some of the most common SEO tasks.
What is Chrome DevTools
Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser.
How to Open Chrome DevTools?
To open the DOM, right-click the element that you want to view and select Inspect, or click on
CTRL + Shift + I, or ⌘ command + ⌥ option + I.
CTRL + Shift + J
Why Use Chrome DevTools?
For example, when you start doing experiments with Google Tag Manager, you start building custom variables and start to modify DOM elements to provide better user experience.
Copy Xpath, CSS selectors and JS Path
One thing that is very useful when you start crawling, scraping or modifying DOM elements is to use Xpath, JS Path and CSS Selectors.
For example, to copy Xpath of a DOM node, all you need to do is right-click on the node copy > copy Xpath.
If you copy JS Path, you’ll get something like this that you can add to the JS console to view the element.
View Page on Mobile
In DevTools you can toggle between different mobile devices to test if your page is responsive.
If you want to view your website like Google does, you need to switch the user-agent to the one that Google uses. See the entire list of Google User Agents.
Click on settings > More tools > Network conditions.
Then uncheck select automatically and select Googlebot Smartphone.
Reload the page.
Modify Your Location
You view Google search results from another city by selecting settings > more tools > sensors.
Then you can choose from the list of cities or add your custom location.
Add the name of your city and geolocation parameters that you can easily find in Google Maps.
Go to Google Search and perform a query.
Click on “Use Precise location”.
- Open Chrome DevTools
- Reload the page
.js pattern using
Request blocking and then reloading the page.
Check Website Performance With the Performance Report
At some point, you will want to know how Google renders your website and see how layout-ing is done, see when the page renders each element, etc.
Go to the performance report.
Click on the Record button, or use
Command + E, and reload the page.
Press Stop after a few seconds.
Then, you have your timeline.
You can check rendering.
You can check other stuff like when events are firing.
To learn how to improve the page speed of your website, watch this video by Google.
View How a Page Behaves if You Block a Resource
When you are optimizing page speed you might want to defer or to remove some resources.
Before you do anything, just know that you can see how if behaves first.
To do so, click on
CTRL + Shift + P and write Show Request Blocking.
Click Add pattern
Add any element. In this example, I would like to see how the page behaves if I block jQuery. You could block stuff like your style.css
Reload the page and you will see the way the page is rendered without the resource.
Render Your Site Slower With Less CPU (Throttling)
capture settings, and slowdown CPU.
Clear Site Data
To make sure that you test properly, make sure that you clear cache and other site data. To do so, go to
Clear storage >
Clear site data.
To disable cache in Chrome Devtools, go to
Cumulative Layout Shift (CLS)
The new Chrome UX report introduced the Cumulative Layout Shift. You can see which regions are impacted by CLS.
more tools >
Rendering and tick
Layout Shift Regions.
Also, in the performance report, under the Event logs, you can see when the CLS occurred.
Open the Coverage Report.
Emulate vision deficiencies
Vision deficiencies is more common that you think. Make sure that your site is accessible to everyone.
Open the Rendering Report.
View HTTP Headers
You can view the request or response HTTP headers in Google Chrome DevTools.
- Visit a URL;
- Open Chrome Devtools:
right click, select
- Use ⌘ command + ⌥ option +
I(on Mac), or ;
CTRL +SHIFT + I(on Windows).
- Select the
- Reload the page;
- Select any HTTP request on the left panel, and the HTTP headers will be displayed on the right panel.
If you want to learn more about other programming languages, you can look at this list of python scripts for SEO.