Devtools for SEO

To fully understand how to use DevTools, it may be very relevant for you to grasp how a website works, including basic knowledge of HTML, CSS, and JavaScript. This will make it much easier for you to understand the utility of the console.

Browser Interpretation

When the Server has processed all the necessary information, it returns files to the browser in formats it can understand, such as HTML, CSS, JavaScript, XML or other multimedia formats.

Once these files reach the browser you are using to view the website, the JavaScript is processed and rendered, resulting in a code different from the one originally received by the browser, compared to the resulting DOM. Modern websites are dynamic and often change their content in real-time.

Let’s remember that:

• HTML defines the structure of the website.
• CSS modifies and configures the visual appearance of HTML elements.
• JavaScript is the programming language that a browser can process, and thus it automates and makes real-time changes and configurations during the user’s navigation.

We could say that DevTools is a magnifying glass that allows us to observe what is happening in our browser when it receives the website’s information. It even allows us to send requests with false information to the server, or change the content of the website in real-time (only visible to us in our browser). This is very helpful for programming or knowing how any changes to our website would look.

Opening the Console

As I mentioned, the console shows what is happening in your browser so that it eventually displays what you see. Therefore, extensions, which are usually blocks of JS, can affect your final result. So, I recommend that whenever you want to audit any project with DevTools, you do it in incognito mode.

You can right-click anywhere on the website and select “Inspect”.

Keyboard Shortcuts:

Open Chrome console:

CTRL + Shift + i

Open the element inspector directly, to select an element on the website. With the axe raised.

CTRL + Shift + c

Execute any function within the console. This is quite useful if you don’t want to navigate through the entire interface to find something:

CTRL + Shift + p

If you don’t type a specific function, all the available options within the console will appear.

For the special ones who use Mac and are scared of the CTRL key, it’s the same but using the Cmd key, this thing here --> ⌘

As an example and test, I recommend opening the console (ctrl + shift + i) and opening the run panel (ctrl + shift + p) and typing "español". This way, you can change DevTools to your language (which I assume, if you’re venturing to read this post, is because you know some Spanish).

Elements

The code shown in Elements is the result when JavaScript acts, allowing you to select and modify the elements.

With this option, you can add CSS elements, delete or modify any HTML tag, view the margins and the layout of the code.

You can perform tricks like changing the type attribute value so that it’s not password and see the password.

A useful application of this for SEO auditing could be, for example, detecting data-nosnippet in certain elements.

Dimensions

You can click on the dimensions button (top left) to emulate how a mobile device works. Remember to reload the website if it is configured as Adaptive.

Network

This is one of the most interesting functions within the console. It allows you to see the order in which files are downloaded when accessing a URL, check if they are cached, how long it took, the HTTP headers, the protocol, and basically everything.

Through Network, thanks to the waterfall view, you can check the effectiveness of WPO techniques such as preloads or deferred loads.

The table consists of:

• Waterfall: The order in which files are downloaded.
• Size: (disk cache) already cached to refresh Control + F5 (cache: special memory stored in the browser so that everything isn’t downloaded each time. It is renewed over time).
• Protocol: Right-click header options -> protocol.
• Type: What type of file (extension) it is.
• Initiator: On which line this file is being used. If you click, it tells you roughly on which line it is. (The files pointing to it)
• Size: The weight of that element.
• Time: The time it took to download the file.
• Waterfall: The order in which the files were downloaded and processed, and in how much time.

When you click on one of the files:

• Headers: Allows you to view the different HTTP headers.
• Preview: Allows you to see how that file is displayed (by itself, without combining it with the rest of the files)
• Response: The file’s code, with the parentheses at the bottom allowing you to unminify the code.
• Initiator: Allows you to see which files initiate that element (pointing to others)
• Timings: Allows you to better examine the time it took for that file.

Let’s further explore different options within the network:

Limit Connection

Limiting the connection allows you to emulate being a user with a poorer internet connection. This can help you see the user experience and how a website works in slow motion.

Disable Cache

From Network or from the Network Conditions panel, you can disable the cache so that all files are refreshed again and you can see changes.

When the cache is enabled and properly configured on the website, it would look like this.

Response Code and Protocol

From the waterfall view, you can analyse the response codes of each file and the HTTP version.

Important: The HTTP version does not appear by default. (Right-click > Header options > Protocol)

Analyse x-robots

If you click on any of the files downloaded to your computer, you have the option to examine the headers, including if they have the x-robots tag:

Console Panel

The console panel can be displayed from the 3 dots at the top right or with ctrl + Shift + P (console), and it shows some very interesting options.

Console

Allows you to read JavaScript messages and alerts and even insert it to see what effects are produced.

Network Conditions

Allows you to limit the network connection or disable the cache (just like in the Network panel), but it also allows you to modify or "simulate" an alternative user-agent and even accept or reject different web compression methods like deflate, gzip, or brotli to test the content-encoding.

Rendering

Allows you to visualise in green the changes that occur in the DOM during the website’s rendering.

Sensors

Allows you to geographically change the origin location that is sent in the requests. Note that this is not the same as a VPN.

Sources

This lets us see from which domains each file is loaded and which files are being used on our website.

From there, we can obtain each and every resource we see on the website, with the corresponding order and URL.

Applications

This is mainly for memory-related issues such as Cookies or Tokens (for passwords).

Tokens

Tokens are what allow us to access an account within a website without needing to log in using a username and password. This token is stored in your browser, and it’s what lets the website know that you are you.

Cookies

From the Cookies panel, you can review the Cookies that the website introduces and whether they comply with regulations.

Memory and Recorder

Although Memory has been around for a while, I recommend combining it with the new recording function.

This allows us to perform an emulation of the Customer Journey and repeat it exactly the same way to run various performance tests and verify if the WPO implementations we make, such as cache, preloads, and deferred loads, are actually effective.

This would be the only effective way to verify if this improves the "lab" experience.

These functions are more complex to explain in a simple post. Request it for the next SEOminadas, request information for SEO training in your company, or join our technical SEO master’s course to learn more.

Lighthouse

This tool allows you to find ways to improve the speed of your website. It is more comprehensive than Google Insights and also allows you to use it on development projects or the local version.

Other Interesting Functions

There are functions that are less visible, but that can help us in our work.

Disable JavaScript

If you press ctrl + Shift + p and type JavaScript, you can disable it and check how the page behaves without loading the site’s js.

Screenshots

You can take a screenshot of the entire page without needing to use any extensions.

Bibliography

• Also known by me as "the unbearable", the official Chrome documentation.
• The invaluable posts by Addy Osmani, leader of the Chrome engineering team, whom I recommend following.