Here at Red Door, the SEO team (along with every other team) uses a plethora of tools on any given day in order to pull, track and analyze data that we then use to fuel our vision and initiatives. One SEO tool that is near and dear to our heart is Chrome DevTools. This free tool is great because 1) it gives us information quickly without having to log into or power up another tool or software and 2) is versatile enough to bridge the gap without having to shuffle (or pay) for multiple tools. So without further ado, here are 9 actionable DevTools exercises that all SEOs should take advantage of today:
Inspect Element – HTML (Beginner)
Starting with the fundamentals of DevTools, the easiest and most frequent activity in my repertoire is the “inspect” command. Knowing a little bit of HTML, CSS, and JavaScript DevTools allows you to manipulate front-end code to test a number of elements on your page. In a normal day, you will test h1 character count lengths, play with <div> and <p> tags to determine how much copy can be added to a block, swap out various font sizes and color codes, check for JavaScripts links or other troublesome crawling characteristics, and about any other SEO related on-page activities you can think of.
Here’s how to find it:
- Option 1: Right-click anywhere on a webpage and click “Inspect”
- Option 2: Hit F12
Check HTTP Header (Beginner)
Ever wondered what response codes fire when you load up a page? Rather than booting up Screaming Frog(which is better for bulk use anyways) or another response code checker, DevTools “Network” quickly offers a viewpoint into the response requests that go on behind the scenes of the page you are loading. This is great for many things including: ensuring that your “404” page actually gives off a 404 response code, troubleshooting redirect chains, concerns over 302 vs 301 redirects, testing 304 responses for pages that aren’t updated frequently, and other header response code issues. Here’s how to find it:
- Toggle inspector
- Click on the “Network” tab
- Find the column “Status” for the http response of that page
Toggle Device and Geolocation Emulator (Beginner)
In the age of responsive design and mobile-friendly being a top priority, DevTools’ Device Mode allows you to emulate devices, screen sizes, and geolocation on the fly. This is huge because you can test the various breakpoints among devices such as: where the fold begins, how content is rendered between multiple devices, the proximity of tap targets relative to the screen size, and many other desktop/mobile aspects.
Here’s how to find it:
- Click on the Device Toolbar”
Additionally, for local searches DevTools has a tab called “Sensors” when you can emulate a physical location of your searching using Latitude & Longitude degrees. Great for checking local rankings and reviewing the SERP anatomy for a given location.
Check Referral Source (Beginner)
If you’ve ever had issues with Google reporting inaccurate channel/referral data, then you’re in luck as there is a way to troubleshoot that. To get the most accurate reading, start by clearing your cookies (you should likely do this with most of these tips) and hitting ctrl + shift + N to switch into incognito to be absolutely sure.
Here’s how to find it:
- Click on the “Console” Tab
- Type in ‘document.referrer’
Validating Google AMP HTML (Intermediate)
For those of you who have yet to jump head first into the AMP movement but are gearing up, well, DevTools will be your best friend. DevTools allows you to debug errors and test the validity of your AMP pages in just a few clicks. If you’ve just started with AMP or are have trouble getting your pages to validate then try these steps. Here's how to find it:
- Go to your AMP page version
- Toggle the “Console” panel
- Append #development=1 to the URL of your AMP page
- Refresh the page; if successful, the validator will return “AMP validation successful”
Rendering of Page - Network Film Strip (Intermediate)
Another neat feature among DevTools’ arsenal is the Film Strip tool found in the Network tab. The beauty of this feature it that is allows you to see how your page renders from beginning to end as the film strip takes screenshots along the way to help identify trouble spots such as render-blocking JavaScript or web fonts.
Here’s where to find it:
- Toggle the “Network” panel
- Click the video camera icon
- Click “Disable cache”
- Refresh the page
Security Panel (Advanced)
In December of 2015, the Chrome Security team launched a feature called Security Panel. With the wave of websites moving to HTTPS, the Security Panel tools helps identify security conflicts between HTTP and HTTPS resources on a given page. So things are a little easier now as you can use the Security Panel to diagnose and easily debug those pesky HTTP –> HTTPS site migrations.
Here's how to find it:
- Toggle the “Security Panel”
Console Hacks (Advanced)
We learned about document.referrer earlier but now that you’re warmed up here are a handful of other powerful commands you can input into your console. Grab the string below and copy/paste it into you console tab.
console.log("source:" + document.referrer);
if( document.querySelector("meta[name='description']") ) { console.log("meta description:" + document.querySelector("meta[name='description']").getAttribute("content"));} else { console.log("meta[name='description'] NOT FOUND"); }
if( document.querySelector("title") ) {console.log("title tag description:" + document.getElementsByTagName("title")[0].innerHTML);} else console.log("title NOT FOUND");
if( document.querySelector("h1") ) {console.log("h1 tag count:" + document.getElementsByTagName("h1").length);} else console.log("number of h1s NOT FOUND");
if( document.querySelector("title") ) {console.log("h1 tag description:" + document.getElementsByTagName("h1")[0].innerHTML);} else console.log("h1 description NOT FOUND");
if( document.querySelector("meta[name='robots']") ) {console.log("meta robots:" + document.querySelector("meta[name='robots']").getAttribute("content"));} else console.log("meta robots NOT FOUND");
if( document.querySelector("link[rel='canonical']") ) {console.log("rel canonical link:" + document.querySelector("link[rel='canonical']").getAttribute("href"));} else console.log("canonical NOT FOUND");
This is a great alternative if you don't have an account with Moz to use their toolsbar as you have just found:
- Referring source
- Title tag
- Meta description
- Number of h1s
- Content of h1
- Meta robots
- Rel canonical link
And it doesn’t stop there. You can find Hreflang, Open Graph & Twitter cards, and much more. The amount of commands is so vast that I recommend working with your friendly developer to explore other possible commands and report back to me in the comments.
Workplaces (Expert)
So now that you’ve learned the tactics above, you think you’re a developer huh? Well try this then. A powerful tool lies in the usually forgotten area of Workspaces. Naturally, when you’re editing and making changes using DevTools, your progress on the page gets erased if you leave or refresh the page. That can be a pain as most times you’ve lost precious work or had to parse through multiple lines of code to find your edits (and then copy them over to development environment). In comes Workspaces to the rescue. Workspaces takes your DevTools changes and persists them to your local disk; which essentially means your edits will be saved in your primary integrated development environment (IDE). This can be a huge time saver if you a dedicated developer working on one large site or project.
The setup of the environment will vary by development environment so instead of a how-to, you’re going to be left with this article by Google on setting up your workflow.
That’s it! Give these hacks a go and let us know how they work. If you have any other DevTools secrets you would like to share then let us know in the comments or on social media. Happy hunting!
- Toggle inspector
- Click on the “Network” tab
- Find the column “Status” for the http response of that page