In this Chrome Developer Tools guide, we’ll demonstrate technical skills that you can use to understand and improve your website marketing.
Ever wonder what’s going on in your browser or when you open a new page, when a tracking code fires, or when your site just loads and loads and loads?
Then it’s time to look under the hood and examine the inner workings of your website!
Chrome Developer Tools is a great toolset that every marketer should really know. So let’s take a look at the Chrome Developer Tools and how you can use them as a marketer.
We’ve got lots to cover, so let’s dive in!
Here’s an overview of what we’ll cover in this guide:
- How to Access Chrome Developer Tools
- Elements Tab
- Toggle Device Tool Bar
- Sources Tab
- Network Tab
- Application Tab
How to Access Chrome Developer Tools
Let’s take a closer look at the Developer Tools in Google Chrome.
Developer Tools are a built-in feature of Google Chrome, but other browsers have similar developer tools. Some of these are also built-in, or you might need to install a plug-in or even a separate developer browser.
But in this guide, let’s focus on the Developer Tools in Chrome. How can you reach them?
If you’re using macOS, then go to View → Developer → Developer Tools. If you’re using Windows, then click the snowman menu (three vertical dots) and go to More Tools → Developer tools.
You will be greeted with another panel here that lays over your website. It has some different tabs across the top that may look unfamiliar, but these are the tools that will help us out.
As marketers, you should be aware of some of these functionalities.
First up is the tab labeled Elements.
The Elements overview gives you a representation of the current HTML.
Note that this is different from what you see when you go to View Page Source on a web page!
When you use the regular browser function View Page Source, you’ll open the initial HTML file that is downloaded from the server in another tab.
This page source is the current HTML file, as it is represented on this page right now. This might differ because of the scripts, and might download and manipulate the page in one way or the other.
If you want a more accurate picture of the web page’s current state, you can look at this Elements overview here.
When you go over one or the other line here, there are some markers that come up in the website.
This is actually pretty useful if you want to find out where a certain element is placed in the HTML markup. You can go through the Elements panel directly, and find the element in the markup when Developer Tools highlights it.
The other way to do it is to right-click on an element, then click on Inspect.
It will jump right to the element, and you will be able to see where the element is placed.
Inspecting allows you to see where the certain element is placed.
Or, there’s also the Selector Tool right here.
The Selector Tool lets you jump right to the element that you are currently pointing to with your mouse.
The HTML and the CSS code that you see right here are represented in the browser: HTML on the left, and CSS on the right.
If you want to change any of the content or the appearance of this website, you would need to do this in your HTML or CSS.
With the HTML in the Elements pane, you can easily find elements that you want to edit.
You can also make your edits directly in this Elements pane, and then it will be represented so that you would know what to change in your text editor or in your CMS.
You can also use this to communicate any desired changes to a developer more clearly and specifically.
On the other side of the Elements pane, the CSS is the markup that governs how a website is laid out, and the style elements of this particular HTML element.
Here you can change the color of certain elements, certain CSS rules on and off, or even change them.
I use this pane very often once I want to identify a given element and see how it is marked up in the HTML itself. So for example, if I wanted to build in any kind of tracking on this Contact button, I would like to see how it is marked up.
This is a list element with the ID menu-item-244, which I can use in Google Tag Manager, for example, to identify it uniquely on our page.
I also use this to communicate any kind of changes that I want to a developer, and be able to tell him exactly where I want to have something changed. It is very powerful.
The third use case would actually be for conversion rate optimization. So if I wanted to change an element in an A/B test, I would test it out beforehand in this overview panel.
Then I’ll know what to change in my A/B testing tools, such as Google Optimize.
One other great piece of information is down here, the actual Selector list.
The Selector list gives you the information on how you can select it via CSS, which can also be used in Google Tag Manager with the CSS Selector.
Toggle Device Tool Bar
Toggle device toolbar puts your browser into a special state that lets you test the website on different screens, if it is responsive.
Once you click on Toggle device toolbar, you will see the Responsive button appear on your screen.
Toggle device toolbar also lets you choose different devices to see how your website looks like on this particular device. There’s also a function to connect Google Chrome Developer Tools to a mobile device.
On this browser, I have an extension installed called the GA Debugger and once I activate it, it’s gonna reload the page.
Besides GA Debugger we also recommend using these 12 Essential Analytics Chrome Extensions.
And we can see what data was sent over, and what hit type, and so on. This lets me really easily identify any kind of problems, if there are any.
In this example, there was something called that is not available.
If you wanted to see where this error occurred, there’s a link in the log entry that you can click. Once you do this, you can head over to the Sources panel to debug the problem.
In the Sources panel, you can see all the different files that were downloaded during the load process of your website.
You can open certain files and read their markup to identify any errors.
For example, right here, we can see where the error originated, and I could change that in my markup.
Apparently, a variable was called that is undefined.
For you, it might just be important to look at your Console and see if there are any errors that are occurring and how they originate.
Next, let’s move on to the Network panel.
Now, once we reload this page, we see up here that there’s a timeline that develops.
We can mark within that timeline a given point and see what page loaded, or what part of the page loaded, during that time period.
So this was the actual document. The HTML has loaded at the beginning.
Let’s check another given point within the timeline.
This is especially great for SEO folks who want to optimize their website for speed. Because here, you can see the markup decides when each element and each file of your website is loaded. This way, you could optimize accordingly and see any kind of bigger files that take a long time.
For example, the file analytics.js takes a bit of time until we get a response and are able to proceed.
This is also particularly great if you wanted to see one of the other requests that gets sent from your browser to a server.
So, for example, what is interesting for us, if we have a Google Analytics code firing, is there a collect request?
It sends over the hidden image file here, and we can read up a lot of information.
Click on the hidden image file and you can see the Request URL among the other information.
The Request URL has all the different parameters that let the Google Analytics measurement protocol translate it into an actual Google Analytics hit.
Here we have DL, which represents your page path.
And you can also find the SR, which represents the resolution of the display.
The Network panel will also show your Client ID, a unique identifier used by Google Analytics
And finally, we have the Google Analytics ID, to which this request belongs.
With all of these, we can see a lot of great information about how a request was actually sent.
We have the Headers right here, and we can see the Status Code of what information was sent.
But if you wanna get more into the nitty-gritty, you can certainly use this Network tab in order to dissect your requests.
For this guide, we’ll skip over the Timeline and the Profiles panels. These are really more advanced functionalities for developers that you won’t need as a marketer.
Instead, I’ll go into the Application tab, just to show you a little bit more of what you can do.
In the Application tab, you can see more interesting information, such as the storage and the cache that have been created during the page load of your website.
The interesting part for people who do any kind of tracking(especially marketers) are the Cookies.
So you can see what Cookies were set on the browser. You can go ahead and see which Cookie was set, and you can also delete them.
This can be quite important if you want to reset the user identification of Google Analytics, for example. You can also clear all your Cookies right away, and, are henceforth not Cookied anymore. And you can see, again, how Cookies are built up from a fresh user.
We also have the Local Storage and the Session Storage. These will get more important once HTML5 gets used more and more, instead of Cookies.
So there you have it. This is how you can use the Chrome Developer Tools as a marketer.
We went through the functionalities of some of the Chrome Developer Tools, which will help you examine the inner workings of your website.
It’s a great toolset for looking under the hood and understanding the more technical bits of digital marketing.
For more Chrome Developer Tools information, check Scraping Data with Chrome Developer Tools + GTM.
I hope you found this post useful! Let me know if you have any questions below in the comments.