Ever wondered what’s under the hood of your website?
Beyond curiosity, there are many good reasons why digital marketers should be using the Chrome developer tools (known as ‘DevTools’ by Google).
In this guide, I am going to run through some great features of the developer tools that I use on a day-to-day basis.
Getting started
Opening the Chrome developer tools is simple. You can right-click and choose ‘Inspect’ on both Mac and PC. Alternatively, you can use the following keyboard shortcuts:
Mac – Command+Option+I
PC – F12 or Control+Shift+I
Once open, you will be greeted by a panel window on the bottom of your screen, welcome to the Chrome developer tools.
Orientation
By default, the Chrome developer tools will open at the bottom of your screen, but you don’t have to keep it in this position. In the top right-hand corner of the DevTools window, you will see an icon with 3 vertical dots, click this to view the ‘Dock Side’ (positioning) options.
You have 4 ‘Dock Side’ (positioning) options available to you. The DevTools window can be positioned at the bottom of the screen, to the left or the right side of the screen or as an ‘undocked’ window.
The ‘undocked’ window mode can be particularly useful if you have two screens available. You can have your web page on one screen and DevTools on another. This makes for an uncluttered experience.
With DevTools now open and positioned as you like, we are now ready to dive right in!
The Elements Tab
There are times when you will need to see the underlying HTML and CSS that creates your website. Perhaps you need to find an ID to track an element or maybe you would like to see how an element would look in a different colour or size.
You can connect to the website via FTP, browse through the various site folders and then open up the respective HTML or PHP file to view the source code. Saying that you could also watch paint dry… both are just as tedious!
In comes the element tab to save the day! Pop open the Chrome Developer Tools and you can view the underlying HTML and CSS of the page as interpreted by the browser… pretty cool!
How can the elements tab help you as a marketer?
1. Event tracking
If you are setting up event tracking in Google Tag Manager, you may opt to track an element by its ID. Luckily for us, the element tab gives you quick access to the HTML and CSS of any element.
Let’s take the example of this page on the Google merchandising store. We can use the elements tab to quickly get the ID of the button so that we can use it in our tracking.
To do this, we open the chrome developer tools (Control+Shift+I for PC, Command+Option+I for Mac) and turn on the inspector. You will find the inspector in the top left of the DevTools panel.
The inspector allows us to hover over any on-screen element and highlight its HTML and CSS. This is a real time saver – there’s no need to try and scan through all the outputted HTML to locate the information you require.
Now that we have the inspector activated we can view the HTML and CSS information for our ‘add to cart’ button.
When hovering over an element, the HTML information will be shown above the element on the screen and also in the elements panel.
In the case we can see that the HTML for the element is as follows:
<input type="submit" name="ctl00$ContentPlaceHolder1$imgbtnAddtoCart" value="Add to Cart" onclick="return ValidateQuantity();" id="ContentPlaceHolder1_imgbtnAddtoCart" class="btn btn-primary customActionBtn">So we now know that the button ID is:
#ContentPlaceHolder1_imgbtnAddtoCartWe can now use this to reference if we wish to set up event tracking for the button.
2. Real-time element editing
There are many times when you will want to quickly see how an element would look in a different colour or size; you may even want to see what different text would look like.
With the elements tab, you can change the CSS and HTML of any element in real time, meaning the changes happen as you edit.
If you are planning to run A/B tests, this can be a really quick and effective way to trial ideas and quickly gather the code you need.
Changing the colour and size of a cta
Let’s say we have looked at our data and we have reason to believe that users are having a difficult time locating our ‘add to cart button’. We may hypothesise that a larger button will increase button clicks. At this
We may hypothesise that a larger button will increase button clicks. At this stage, it’s useful to jump into DevTools to get an idea of what we could do.
To change the size or colour of an element, we need to edit its CSS. In the elements tab, the CSS is accessed under the ‘styles’ tab which is to the right of the panel.
Much like the HTML, the CSS in the styles tab will dynamically change depending on what you have hovered over with your cursor (providing that the inspector has been turned on).
Once you have hovered over the element, you can now change its CSS to your needs.
After you have tweaked the CSS to your liking, you can copy it for use in your A/B testing software, or pass it on to a developer for implementation.
Some more useful applications for the elements tab are:
- Adjusting spacing between elements (particularly useful when reviewing mobile pages).
- Changing font size and family.
- Removing elements from the page.
- Changing background images on banners.
- Inspecting 3rd party widgets such as live chat windows or feedback forms.
- Previewing text changes on screen.
- Testing if you title tags fit in Google’s SERP
- Reviewing SEO tags & Markup
Device preview
One of the features I find myself using the most in the Chrome developer tools is the ‘device toolbar’.
This handy feature allows you to view your web page in the same screen resolution as several popular mobile devices and tablets. This is super useful for when you are conducting a quick review of your mobile journey.
A note on using the device preview for testing
The device mode only changes your screen to the size of the device you select. It does not actually emulate the phones OS or browser, it is just a simulation.
For this reason, you should always use a service (like browserstack) to thoroughly QA your web pages for device-related bugs.
If you don’t have access to browser stack you can give ‘remote debugging’ a try. This allows you to plug your own phone into your computer.
Preview your pages on different devices
Using the device toolbar
The device toolbar can be found to the right of the inspector icon (which is in the top left of the panel). Click the device icon to get started.
Once you have activated it, you can choose from a number of preselected devices to preview how your web page would look on them.
The toolbar highlighted in the image above gives you a number of options to choose from:
Device model
You will find some popular device types already configured here: iPhones, iPads and some Android options – but you’re not confined to just these. You can add from a further list of devices, which when selected will be added to the default list.
A really useful feature is the ability to add a custom device. This allows you to add custom resolutions as a device type.
I like to look into the ‘Screen Resolution’ report inside of Google Analytics (Technology > Browser & OS > Screen Resolution) and add my highest used screen resolutions.
Screen resolution
This allows you to manually adjust the screen width or height on the fly which can be useful if you are trying to find specific breakpoints.
Zoom
With the zoom setting, you can choose how much space the preview should take up on the screen. Sometimes, you may wish to go higher so that you can view more detail on the screen.
Throttling
Throttling allows you to simulate lower load times that users may experience on mobile devices. You have the option to choose from Online (full speed), Med Tier, Low Tier and Offline.
This can be useful if you want to see how some resource-heavy pages may load under a poor network. You can also add a custom throttle profile if you want a more tailored test.
Again, reviewing your analytics will help you assess if a significant portion of your audience is using such networks.
The Console tab
If you are working with tracking or testing scripts, the console tab can be a lifesaver.
The console tab in the Chrome developer tools allows us direct access to the JavaScript runtime environment. This means we can find out what certain variables hold, debug script issues, review errors and much more.
How can the console tab help you as a marketer?
1. Debug Google Analytics issues
There will be times when it seems things just aren’t right with your Google Analytics data. Perhaps event data doesn’t look right, or your newly setup eCommerce tracking isn’t working. In comes the Google Analytics debugger to the rescue.
The Google Analytics debugger prints out a debug log into your console which allows you to view exactly what is being sent to Google Analytics database.
This is particularly useful if you want to confirm that a hit is being sent to Google analytics. For example, when you set up eCommerce tracking you may wish to confirm that the ‘transaction’ hit type is being registered to google analytics. With the google analytics debugger, you can simply open up the console and review the hitType that has been recorded.
You can download the GA debugger for Chrome here.
How to use the GA Debugger
Once downloaded, you will see the GA debugger icon in your extension list, next to your address bar. You will need to click it to turn the debugger on.
Once turned on, the Google Analytics debugger will output the debug log in the Chrome developer console.
Here you can check which parameters are being pushed to Google Analytics, which is invaluable in the debugging process.
For an in-depth guide into debugging Google Analytics, be sure to check out this post from optimizesmart.
2. Find out what is in the dataLayer
If you are using a dataLayer you may wish to quickly inspect what is in it. You can do this quickly via the console.
By typing in a variable name, you can display its contents in the console. In this case, if we type in dataLayer into the console and then press enter we will have the dataLayer object outputted.
This is useful as it allows you to see what information is being pushed to the dataLayer if you are using Google Tag Manager, this can be an easy way to debug dataLayer-based tags.
3. Review errors and warnings
The Google developer console will shoot out any errors and warnings that it encounters after the page has loaded.
Having a quick peek into the console can give a quick overview of errors that are occurring on the web page.
Two common issues you can spot are:
script errors
Any errors in loaded scripts will be outputted into the console. The console will provide the type of error that is occurring and also where it is occurring.
In the top right-hand side of the console, you will see a red error icon and a yellow warning icon. There will be a number next to each that will tell you how many errors and warnings there are.
To the right of the error message, you are shown the file name and line number where the issue is occurring. If you click on this, you will be taken to the ‘Sources’ panel and shown the inside of the file where the issue is.
This is great as you can easily hand this over to your developer for fixing.
JavaScript errors picked up in the console can sometimes be the root of any script based issues you are experiencing. It’s definitely worth having a peek inside the console if you are having any problems.
Mixed content warnings (HTTP vs HTTPS)
With Google stating that having mixed content can degrade the security and user experience of your HTTPS site, it’s not a bad idea to clear up any mixed content issues that you have.
Luckily enough, the Chrome developer console gives you a quick heads-up of any mixed content warnings that might be on your page.
This would normally be because your site is HTTPS but you are sending an HTTP request. For example, you may be loading an image as ‘http://domain.com/image.jpg’ instead of ‘https://domain.com/image.jpg’ for.
Bonus Tip
The Network tab
You should be working on keeping your page load times down as much as possible or you will be throwing away both your conversion and ranking potential. Don’t believe me?
- Site speed has been indicated to be a ranking factor by Google.
- Slow loading pages have been proven to lower conversion rates.
I use the Network panel to get an insight into how long resources are taking to load. This allows me to have a greater understanding of what could be optimised to improve load times.
How can the network tab help you as a marketer?
1. Identify what resources are making your load times slow
Once you open the Network tab, you will need to press F5 to start recording the network activity.
After doing this, you will see a timeline of the requests at the top of the panel. You can use your cursor to highlight sections of the timeline to view what was being requested at that time.
Below the timeline, you can see a list of all the resource names that are being requested, the type of script, its size and the time it took for it to load.
To see which resources are taking the longest to load, you can sort by ‘Time’ as well as ‘Size’.
Look through your requests and try to see if there is anything that could be reduced in size or removed from the page. Be sure to check that page-specific resources are not being loaded site-wide.
Viewing a summary of the network request
You can view an overall summary of the Network Request at the bottom of the panel.
This gives an overview of the following:
- How many requests were made?
- The amount (in KB) of requests that were made.
- The time it took for the Document Object Model to be loaded (HTML structure) – DOMContentLoaded
- The time it took for the additional resources to be loaded (stylesheets, scripts, images etc.) – Load
With this, you can get a quick indication of how fast your web page is loading and begin to understand where speed optimisations could be made.
2. View Google Analytics request
You can view all the hit information that is sent to your Google Analytics account within the Network tab.
When Google Analytics fires a request from the browser to the server, it sends a collect request. This is a hidden image file that Google Analytics sends that contains a Request URL.
The Request URL has all the different parameters that are sent to create a hit within Google Analytics.
How to view the Google Analytics collect request
To view the collect request open the network tab and type in ‘collect’ into the search bar.
You will then see the collect request under the ‘name’ column, click on it to see the Request URL.
You will be able to see the Request URL under the Headers tab. The URL contains various pieces of information that get sent to the browser such as:
- System information – Screen resolution, viewport size, user language.
- Hit information – Hit type (page view, screen view, event etc.)
- Traffic Sources – Campaign name/Source/Medium.
- General information – Tracking ID, protocol version.
The image below shows how you would see Screen Resolution in the Request URL.
Once again, this can be a useful method to validate what is being sent through to your Google Analytics account.
Be sure to check out Google’s dev guide on the Collect Measurement Protocol if you want to dive a little deeper.
Application tab
Need to know what cookies or stored data have been created by your web page? The application tab is where you will want to look.
You can view the storage and cache that has been created during the page load. You can also view any cookies that have been set on the browser.
How can the application tab help you as a marketer?
1. Inspect and modify cookies that are in your browser
I recently needed a way to identify users that were coming into a site from a specific referral source.
To do this, I set up a cookie to be created when a user came in from a referral source (this was done in Google tag manager). I then set a tag to fire if that cookie was present.
First things first, I needed to check if the cookie was being created and that its value was correct. By simulating the user coming in from the referral source, I could quickly pop into the application tab and check that my cookie had been successfully dropped.
I could then delete it and test that the tag would not fire as expected.
Viewing and modifying cookies can also be useful when using CRO programs such as Googles Optimize.
In the case of Google Optimize, it will assign a cookie to a user when it buckets them into a variation, it will then continue to enter them into the variation that they initially encountered. By deleting the cookie, you can be entered into the allocation draw again.
Conclusion
It’s easy to think that the Chrome Developer Tools, is just for developers (as the name would hint) but that just isn’t the case.
Integrating developer tools into your workflow can not only enhance your technical understanding of how your website works but improve your efficiency as a digital marketer.
View the official Chrome Developer Tools documentation here.
How do you use the Chrome Developer Tools? Let me know in the comments below!