BLOG

Digital marketing insights for your business, from our experts.

Do you want more traffic?

Not sure how to direct more traffic to your website? Simply enter your website URL below to see our analysis of your website, and to learn how you can drive more traffic to it.

When you think about the tools most commonly used by SEO specialists, what comes to mind? I decided to ask a few experts and these are the answers I got:

Paul Shapiro: KNIME, SEMRush, Screaming Frog

Joshua Hardwick: Screaming Frog, URL Profiler, SeoTools for Excel

John-Henry Scherck: SiteBulb, Ahrefs, Hunter.io

As an SEO specialist for Supple, a digital marketing agency in Australia, I also have a list of SEO tools that I go back to time and time again. However, most of us (myself included) still forget one of the most used SEO tools of all, something that most of us use everyday without thinking twice. And guess what? You won’t even have to click out of your browser to use it, because they’re the tools that are already part of your browser! (I probably didnt need all that buildup with that title 🤷)

Thats right, Google Chrome – the worlds most utilised web browser at the moment – has a whole host of Developer Tools built right in, perfect for technical SEO analysis and testing. Just click the Chrome menu button, and under More tools youll find Developer Tools (or, for those who prefer keyboard shortcuts, hit Ctrl+Shift+I on a PC / Command+Option+I on a Mac). You can also right click on the page and select Inspect to bring up developer tools.

Today I have put together a list of the most useful and often overlooked Chrome shortcuts for technical SEOs – it might take 5-10 minutes to go through this cheat sheet, but youll save hours of time working in the long run.

 

Switch your Reported Location in Chrome:


As an SEO you often have to work by looking at things from specific locations in order to see how, for instance, a visitor in Australia sees your site as opposed to a visitor in America.

Typically, most SEOs will download a VPN add-on to Chrome, but did you know that you can actually modify your location in Developer Tools.
Switch your Reported Location in Chrome

  1. After you launch developer tools.
  2. Select the three vertical dots near the close button.
  3. Look for More tools >> Sensors.
  4. Here youll find a drop-down menu next to Geolocation settings – select the country you want to view your site as and go.
  5. You can also add Latitude and Longitude coordinates for more precise targeting.

 

Take a Full Size Screenshots of a Webpage in Chrome:


Did you know Google Chrome has a built in Screenshot function? Easily accessible through the Developer Tools kit in Inspect Element mode, its a great way to quickly grabs snaps of your site to give an overview of edits to your design team. When you want to take a full site screenshot:
Take a Full Size Screenshots of a Webpage in Chrome

  1. Open up the Developer Tools from that page.
  2. Hit (Ctrl+Shift+P on a PC / Command+Option+P on a Mac) to load up the DevTools Command Menu.
  3. Type in Screenshot and click on Capture full size screenshot.
  4. The screenshot will be added to your downloads folder.

 

Switch your User Agent in Chrome:


Being an SEO, you may want to check how various visitors or bots see and interact with your website. While extensions like User-Agent Switcher are popular in the Chrome web store, you can switch it yourself without any extensions by:

Switch your User Agent in Chrome

  1. Bringing up the Developer Tools view
  2. Select the three vertical dots near the close button.
  3. Look for More tools >> Network Conditions.
  4. Here youll find an option for User Agent, uncheck Select automatically.
  5. From there, youll see the option to pick a pre configured user agent from the dropdown or input your own custom UA string. Voila! Total control over user agent settings.
Fun Tip: Did you notice how the same page looks different on those two devices? On an Android the blockquotes look like Android SMS blocks and on an iPhone they look like they are SMS bubbles from iOS (that article was a few years old so it was mimicking the OS design from that time). Its probably a good idea for them to look into the Vary: User-Agent header response for that page.  
PRO Tip: You can emulate Network throttling from this screen, its great if you want to see how users from places with iffy network connectivity will see you webpages.

 

See Mobile and Tablet View from Chrome:


Seeing how your website looks and loads across different devices is a fundamental step in making sure you deliver a good, optimised user experience. Well, Developer Tools allows you to toggle Device Mode under the little icon of a smartphone in the top left-hand corner of the DevTools menu.

If youre troubleshooting responsiveness and mobile optimisation across multiple platforms, its time consuming and impractical to literally have all your devices open in front of you. With Device Mode, quick shifts are a simple click away. You can view the page on a range of predefined devices or add a custom screen size. You can also emulate CPU throttling for low-end or mid-tiered mobile devices and switch between landscape and portrait mode.
See Mobile and Tablet View from Chrome

  1. Bringing up the Developer Tools view
  2. Click the little icon of a smartphone/tablet in the top left-hand corner.
  3. Pick you desired device from the dropdown.

 

View the HTTP Header in Chrome:


Working on more technical SEO, its important to get a quick look at the header response by the server. Is the page sending the correct header response? Is it redirecting to a different page? Is a canonical specified in the header? These are all things you can answer by looking at the header response – and wouldnt you know, you can see the header response in Chrome by:
View the HTTP Header in Chrome

  1. Bringing up the Developer Tools view
  2. Click the Network tab and reload your page – all the requested asset will appear in a list on the left of the menu
  3. Pick you desired asset and you can see the header response for it (it is usually the default tab, if not click on Headers).

 

Look at the Network Waterfall View in Chrome:


While youre in the Network menu in Developer Tools view, youll notice a column displaying network waterfall modelling. This is a visual overview detailing the loading speeds of individual resources needed to display a website. This can be done by simply:
Look at the Network Waterfall View in Chrome

  1. Bringing up the Developer Tools view
  2. Click the Network tab and reload your page – all the requested asset will appear along with the network waterfall view
  3. You can easily filter these requests by domain, type, protocol used, etc

Why is this useful? Well, Network Waterfall Modelling is a useful way to diagnose performance issues on your site. Issues are visually apparent under the waterfall format, helping you identify images that are loading too slowly, identify render block scripts or even see if assets are making multiple connection requests, etc.

Having this information makes it easier to prioritise what loads first to streamline user experience.

 

Performance Audits on Chrome:


There are plenty of 3rd party tools out there for quick performance audits of your site, including Google PageSpeed Insights, WebPageTest, Pingdom Tools and countless others. Lighthouse is Googles open-source answer to auditing tools, including specific audits for “performance, accessibility, progressive web apps and more”. Well, guess what – Google Lighthouse is baked into Chrome itself. To access it, start by:
Performance Audits on Chrome

  1. Bringing up the Developer Tools view
  2. Click the Audits  tab and you have the option to tick boxes checking for meeting the standards of a Progressive Web App, whether it meets Googles “best practices” standards, how it performs and its accessibility for disabled internet users.

 

Beautify Code for Debugging on Chrome:


While minified code is great from performance point of view, it’s a real pain when looking at code to try and figure out what it does. But dont worry – Googles got you covered.
Theres a handy feature in Chrome Developer Tools that lets you unminify (or “beautify”) the code. This means the code will be indented and separated into clearly defined sections so it’s easier to understand for needing to make technical adjustments.

Its easy to beautify your sites code by:
Beautify Code for Debugging on Chrome

  1. Bringing up the Developer Tools view
  2. Click on any asset that is minified like CSS, JS or HTML.
  3. A new panel loads up the content and you will see 2 curly brackets {} at the bottom left of that panel. Click on that and Chrome will beautify you minified code.

 

Quick Check if a Web Server Supports HTTP/2


There are a lot of plugins available that can tell you if a server supports HTTP/2. Hey, we even made a bulk persistent connection checker. This can tell you if the server supports HTTP/2 amongst other things. But, truth be told, if youre happy getting into Developer Tools view (which I assume you are if youve made it this far in this list) you can just use that. Start by:
Quick Check if a Web Server Supports HTTP/2

  1. Bringing up the Developer Tools view
  2. Click on the Network tab and reload the page.
  3. Youll need to add the Protocol column to your Network tab (if its missing) – which is pretty easy, just right click on one of the headings under Network (like Name or our old friend Waterfall) to toggle quick columns that appear under the Network tab.
  4. Select Protocol and youll be able to read if a server supports HTTP/2 whenever you go to the Network tab.
PRO Tip: Just keep in mind not to turn off HTTP/1 as Googlebot still crawls using HTTP/1.

 

Product Grouping in Chrome


Sometimes you want something a bit easier than an entire list of all the different resources a site is loading. Well, Developer Tools has a Product Grouping view option which breaks those resources up into clear groups, based on the domain, type of resource, etc. To see these:
Product Grouping in Chrome

  1. Bring up the Developer Tools view
  2. Click on the Network tab and reload the page.
  3. I usually have the  Domain and Type columns enabled, just right click on one of the headings under Network and pick the ones you want.
  4. You can left click on those titles to sort the columns in ascending or descending order.

 

Make Scraping Easier with Chrome


Scraping is the bread and butter of a technical SEO, but working with xpath can be a bit tedious. But did you know Chrome can easily generate the xpath for any elements you see on-page in a couple of clicks, making your life that much easier.

Make Scraping Easier with Chrome

  1. Right click the element on the page that you want the xpath for and select Inspect
  2. The elements HTML should be highlighted in the Developer Tools panel. Right click that HTML and select  Copy >> Copy XPath, the xpath gets copied to your clipboard.

 

Identifying Dead Code in Your Pages


At times your CSS and JS files will have a lot of extra code that is not used on the page, if you care about improving the performance of your web page (which every SEO would) then its a good idea to get rid of that code from those pages and only use that where its needed. Thankfully there is a new feature in Chrome called coverage report that helps you with this.

Identifying Dead Code in Your Pages

  1. Bringing up the Developer Tools view
  2. Select the three vertical dots near the close button.
  3. Look for More tools >> Coverage.
  4. Click on the Reload icon.
  5. You can now see the % of unused CSS and JS in the loaded files, you can click on one of them and it will show you the used and unused lines of code in green and red, respectively.

These are just a few of the amazing tools readily available by delving into the Developer Tools view of Chrome. Reading this, you may have realised you have quite a few extensions and plugins you can now delete.

What are your favourite Chrome Developer tools tips and tricks? Let me know in the comments below so we can all learn to make the most of Chrome together.

Download This Entire Article

Simply enter your business email and website URL below to have the entire article checklist sent directly to you.

Leave a Reply

Post Comment Via Facebook