When I joined Distilled, web geeks experts like Tom Anthony seemed to be continually using Chrome developer tools to help them with their day to day tasks.
I'd played with it a bit, but had always just used 'view-source' and plug ins/extensions for the majority of my technical tasks.
How wrong I was!
Obviously Chrome developer tools are primarily for er... 'developers'. But there are some great hacks for marketers as well.
To understand the full power of Chrome dev tools, you could check out this short course for developers from Google. But we don't really need that. We just need to know enough to get what we want out of the console.
So, let's jump straight in:
1. Test your title tags fit in Google's new SERP
Google recently did a major overhaul of their SERPs. The main change from an SEO perspective is that the title tag font has increased in size, but the container size remains the same.
What that means for you is that less of your title tag is going to display.
There are tools available, but if you want to get absolute accuracy on how your title tag fits into the new SERPs, use Chrome dev tools.
- Hover over the title tag you want to change
Open Chrome dev tools and navigate to the 'elements' tab (not sure how to open? click here)
- Double click on the text you want to change. Make the text change, and hit enter
- Voilà! You can now see exactly how your title tag appears in the SERPs.
2. Quick and dirty user testing
Chrome dev tools are also great for quick and dirty user testing. All without any dev time!
Say you're building a piece of creative content, and you want to test which headlines people prefer.
Showing people a list of titles on a scrap of paper is often how it goes down in the Distilled office. But what about mocking up the titles in the content itself so people can appreciate them in their intended environment?
- Hover over the text you want to change
- Open Chrome dev tools and navigate to the element tab
- Double click on the text you want to change
- Make the change and hit enter
Example: Test 1
Example: Test 2
Pro Tip: Don't refresh the page, or you'll lose all of your changes!
3. Emulate mobile devices
While cross device testing can be painful, it's important to know how your site looks across devices:
- Open Chrome dev tools
- Click 'drawer' (see image below)
- At the bottom of the console a new section should appear
- Click on 'emulation' and drag the box up. You should see something like this:
- Now select your device and click 'emulate' to see how your webpage renders across a range of devices. Check your responsive design, check your mobile specific site is working at certain screen sizes. The world is yours!
4. Find the fold across screens/devices
Although everyone talks about the fold being less important these days, I personally think the fold is a big deal. Peep Laja, in his SearchLove London 2013 talk, showed some research which suggested that 80% of users' attention still goes above the fold.
So it's important we understand where the fold is.
- Open Chrome dev tool and, at the bottom of the console, click 'emulation'
- Click on 'screen' and tick 'emulate screen'
You can now choose to see where the fold is for various screen sizes.
5. Test your Google Analytics installation
Clients regularly ask us to investigate why their traffic has dropped. The first thing we do is to check GA is reporting correctly.
To check if Google Analytics is installed on the site:
- Open Chrome dev tools and go to the 'network' tab
- Refresh the page
- Type 'analytics' into the search box. You should be able to see:
The analytics code you should be searching for varies depending on the installation you have:
|analytics.js||If site upgraded to universal analytics|
|ga.js||If you are using classic google analytics|
But we've not finished there. Although the .js file being there is important, GA then needs to send a beacon that contains all the information that Chrome has about that visit.
I recently had a situation with a client where they had experienced a drop in traffic, but couldn't understand why. Their GA code was installed and appeared to be tracking correctly...
But their beacon wasn't firing. No beacon = No data!
6. Check your Google Analytics is reporting the referrer correctly
Attribution errors are often the reason for a sudden change in traffic.
I was recently working with a client to diagnose a drop in their organic traffic, and was trying to figure out if it was an attribution error. Chrome dev tools to the rescue!
Although it's a little difficult to find sometimes, you can often find the referrer in Chrome dev tools.
- Open the console and navigate to the network tab
- Click to open the GA beacon
- From there you can view the data that is being sent into GA (see image below)
7. Check HTTP headers for canonicalisation and x-robots issues
On a client tech audit recently, I was trying to diagnose a drop in homepage traffic after a site re-design.
I'd looked for incorrect rel=canonical tags in the <head>, but hadn't looked in the http headers. But there it was. A rel=canonical pointing to a non-canonical hompage version.
To get to the http headers from Chrome dev tools
- Open Chrome dev tools and navigate to the network panel
- Click on the main document e.g. www.distilled.net
- You're now able to view the http headers and see if there are any issues (in my example below, the canonical is pointing to example.com/home and should be pointing to example.com)
Pro Tip: Primary issues that http headers can show up are rel=canonical tags, and to find x-robots tags implementations (x-robots info).
8. Check status codes and redirect paths
Checking status codes and redirect paths got infinitely easier with Ayima's redirect path plugin for Chrome.
However, there may be times when you don't have all of your extensions to hand – like if you are working in incognito mode, or if you are working as a different Chrome user.
You'll need to check redirects and status codes in Chrome dev tools.
- Open the console and navigate to the networks tab
- Hit refresh. There it is: the full path and status code that took you to the final destination.(You can see from the image below that I was 301 redirected from http://distilled.net to https://www.distilled.net.)
9. Test embed codes
Testing embed codes can be a complete pain. Problem. Solved.
You can test embed code functionality directly in your browser using Chrome dev tools.
- Open Chrome dev tools and navigate to the elements tab
- Right click on an area contained in <p> tabs
- Right click and 'edit as HTML'
- Paste the embed code and hit 'enter' to see if your image and accompanying text display correctly
Example of an embed code tested on the Distilled homepage
10. Get site speed recommendations on the fly
If you want to get quick site speed recommendations then Chrome Dev Tools is extremely useful.
There are two key areas to focus on.
- Open the Chrome dev tools panel and navigate to the audits tab
- Click 'Reload page and audit on load'
- You will see a list of site speed recommendations
For further site speed information, you can also see a 'waterfall' directly in the browser
- Navigate to 'network' tab and then look at the timeline column. From there you can see the start time of each network request.
So, those are the 10 ways that I use Chrome dev tools. I hope at least some of them are useful to you guys.
If you've got any tips or tricks for using the console for any of your marketing tasks, please add them in the comments below, I'd really appreciate it.