Chrome DevTools for SEO

Share this post

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.

To open the Javascript console, press CTRL + Shift + J

Why Use Chrome DevTools?

There are multiple things you can do in Chrome DevTools such as automating your SEO tasks, writing custom JavaScript to be implemented with Google Tag Manager and optimizing your Web Performance.

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.

Instead of building your JavaScript functions straight into Google Tag Manager (GTM), you can test your changes using the Chrome DevTool first.

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.

Switch User-Agent

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”.

Disable JavaScript

You can view how a website is rendered when JavaScript is disabled using the Command Menu.

  1. Open Chrome DevTools
  2. Press Control+Shift+P
  3. Select Disable JavaScript
  4. Reload the page

You can also disable all Javascript by adding the .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.

L’attribut alt de cette image est vide, son nom de fichier est image-13.png.

You can check rendering.

You can check other stuff like when events are firing.

Google Lighthouse

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)

Go to performance, 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 Applications > Clear storage > Clear site data.

Disable Cache

To disable cache in Chrome Devtools, go to Network > Disable cache.

Cumulative Layout Shift (CLS)

The new Chrome UX report introduced the Cumulative Layout Shift. You can see which regions are impacted by CLS.

Go to more tools > Rendering and tick Layout Shift Regions.

Also, in the performance report, under the Event logs, you can see when the CLS occurred.

Find Unused JavaScript With Chrome DevTools

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.

  1. Visit a URL;
  2. Open Chrome Devtools:
    1. right click, select Inspect, or;
    2. Use ⌘ command + ⌥ option + I (on Mac), or ;
    3. Use CTRL +SHIFT + I (on Windows).
  3. Select the Network tab;
  4. Reload the page;
  5. 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.