"

Chrome Developer Tools for Marketers – The Guide

Every Marketer should know how to use the Chrome Developer Tools. The DevTools provide a great look at what’s going on underneath the surface of a website. You can efficiently track down layout issues, debug JavaScript, and get insights for tracking code optimization.

In this video, you’re going to learn how you can use Chrome’s Developer Tools as a Marketer to understand your website better.

#ChromeDeveloperTools
#ChromeTools
#Measure

HELPFUL LINKS

More about Dev Tools: https://developer.chrome.com/devtools
Google Tag Manager: https://www.google.com/analytics/tag-manager/
GTM Playlist: https://goo.gl/MfGcRR

MEASURESCHOOL LINKS

GTM Resource Guide: https://old.measureschool.com/guide
Free GTM Beginner course: https://old.measureschool.com/emailcourse
Courses: https://old.measureschool.com/products

Looking to kick-start your data journey? Hire us: https://old.measureschool.com/services/

RECOMMENDED MEASURE BOOKS: https://kit.com/Measureschool/recommended-measure-books

GEAR WE USED TO PRODUCE THIS VIDEO: https://kit.com/Measureschool/measureschool-youtube-gear

FOLLOW US

FACEBOOK: http://www.facebook.com/measureschool
TWITTER: http://www.twitter.com/measureschool

Ever wonder what’s going on in your browser or when your page loads, a tracking code fires, or 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. In this video, I’m gonna show you how you can use the Chrome Developer Tools as a marketer to understand your website better.

So I’m a big believer that marketers should become more technical, but where should they start? Well, I would say, understanding the subject of your marketing better, and this is, most of the times, the website. To make this learning experience more relevant, you should look at your own website, and understand what the marketing inner workings are. That’s why I think the Chrome Developer Tools is a great toolset to get started understanding the more technical bits of your marketing 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. All right, today, our journey starts in our demo shop, where we’re gonna take a closer look at the Developer Tools of Google Chrome. Now, the Developer Tools are a built-in feature of Google Chrome, but other browsers have such developer tools as well, or you might need to install a plug-in, such as Firebug, for the Firefox browser.

But in this video, we’re gonna specifically talk about the Developer Tools. How can you reach them? Well, if you go into your View settings, under Developer, you’ll find here Developer Tools. There’s also a shortcut that you might able to use in order to get there faster. You will be greeted with another panel here that lays over your website, and has different tabs up here. Now, we won’t go through all the different functionality, because it goes really in-depth, but as marketers, we should be aware of some of these functionalities. So let’s get started. First up, here we are in the Elements overview. Now, the Elements overview gives you a representation of the current HTML. This is different to what you see when you go to View Page Source, because this is the initial HTML file that is downloaded from the server. This 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 or the other way.

So, if you wanna find the current state, you can look at this Element overview here. And, as you might already saw, when I 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 in the HTML markup a certain element is placed. You can go through the Elements pane directly, and try to find out when it highlights it. The other way to do it is to right-click, and click on inspect element. So it will jump right into it.

Or there is a selector tool right here that lets you jump right to the element that you are currently pointing at. Now, how can this be useful? As you might know, HTML and the CSS code that you see right here are represented in the browser, and if you wanted to change any of the content or the appearance of this website, you would need to do this in your HTML or CSS. Now, it’s very cumbersome to go back and forth between your text editor to edit your HTML pages, then reload this page and see what the changes have resulted in, so with the Elements pane, you can easily find the element that you wanna edit, make your edits directly in this Elements pane, and then it will be represented here, and you would know what to change in your text editor or in your CMS at this stage. You can also use this, obviously, to communicate it to a developer more clearly than just telling him, hey, change the text here and there. The other panel that we can change here is, the other panel represents the CSS.

And the CSS is the markup that governs how a website is laid out, and the style elements of this particular HTML element. So, for example, here, you can change the color of certain elements, certain CSS rules on and off, or even change them. Now, 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 is it 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 wanna have made to a developer, and be able to tell him exactly where I wanna 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, that gives me information on how I can select it via CSS, which can also be used in Google Tag Manager with the CSS Selector. The one button we haven’t talked about yet is this Toggle device toolbar, which actually puts your browser into a special state that lets you test the website on different screens, if it is responsive, and it 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 DevTools to a mobile device, but that’s not something I’m gonna get into right now. All right, let’s move on to the next panel, which is the JavaScript console. Now, the JavaScript console is a great tool, especially if you work with tracking. So, as you might have seen in my previous videos, I use this often to look up certain variables, such as the data layer, and see what the current state of this variable holds. Now, the JavaScript console is our direct access to the JavaScript runtime environment.

It can give us a lot of information, and we can even instruct our codes to log out certain information, in order to make it more visible. So, for example, on this browser, I have a tool installed called the GA Debugger, and once I activate it, it’s gonna reload the page. Let’s go out of our device mode here. And now, we have the JavaScript console filled with a lot of information, a lot of debug information, of our Google Analytics. And we can see what data was sent over, and what hit type, and so on, which lets me really easily identify any kind of problems, if there are any.

The other thing that the JavaScript console, it’s great for errors. So if I go, for example, to this error page, I can see up here, when we scroll up, that there was an uncaught reference error. There was something called that is not available. Now, if I wanted to see where this error occurred, there’s a link right here that I can click, and I go over to the Sources panel.

Now, the Sources panel is a panel where you see all the different files that were downloaded during the load process of your website. And you can open certain files and read them, and read their markup, to identify any errors. For example, right here, we see this is where the error originated, and I could change that in my markup. Apparently, a variable was called that is undefined. Now, there are many different other JavaScript functionalities to debug this. So you can set break points, for example, but I won’t get into this right now. 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.

All right, let’s move on to the Network tab. Now, once we reload this page, we see up here that there’s a timeline that develops, and we can mark with

About the author: Julian Juenemann

Julian started and grew venture-backed startups with his unique 'data first' approach to Online Marketing. He then founded MeasureSchool.com to help marketers, like him, the data-driven way of digital marketing.

guest
0 Comments
Inline Feedbacks
View all comments