Chrome Browser for Technical SEO

Posted on 29. Aug, 2012 by in Tips



For the past few months I’ve been giving Google’s Chrome browser a test drive as my go-to, do-everything, Swiss army browser, and it’s doing very well indeed. It isn’t without its problems – the preferences menus, for example, appear to be the result of some kind of drunken wager – but on the whole, it’s cutting the technical SEO mustard.

Aside from being relatively stable, quick and a good deal prettier than its nearest competitor, Chrome’s big selling point is its built-in developer tools and ever-improving pool of free extensions. So here’s a quick guide to some Chrome features you may be unaware of, and a bonus list of my five favourite extensions.

Chrome Developer Tools – Top Features

Chrome’s inbuilt Developer Mode is an excellent one-stop-shop for inspecting everything from page code to network activity and HTTP headers. This is very well integrated with the “normal” browsing function, making it very easy to quickly alternate between a customer-eye view and raw code.

Get straight to the code you’re interested in

Right click on a page element, select Inspect element and instantly see the underlying HTML and the CSS applied to it. Or you can do that in reverse. From the Elements view, click the magnifying glass icon at the bottom left and, as you move your cursor through the code, the relevant area of the page will be highlighted.

Viewing page code in Chrome

Viewing page code in Chrome

Add and edit code

One of my favourite features is the ability to edit code and see the results on the live page – great for finding out how a page works, or even for mocking up proposed alterations to a page.

Editing CSS in Chrome

Editing CSS in Chrome

Right click an element in the Elements panel, select Edit as HTML and, much as you’d expect, you can edit the HTML. Similarly, via the side panel, you can view, edit, turn off and even add CSS rules for the selected element.

Editing HTML in Chrome

Editing HTML in Chrome

Network tab

Here you’ll see a list of all resources used to assemble the page: CSS, JavaScripts, images, graphics and so on. For each, you can see the HTTP status code, MIME type, file size and a timeline showing how long it to download and when it started, allowing you to pinpoint the blockages and bottlenecks that are screwing up your page load times.

Network view in Chrome

Network view in Chrome

Click an individual file in the list, and you’ll be presented with full HTTP headers, code previews, associated cookies and a detailed breakdown of timings.

Detailed HTTP view in Chrome

Detailed HTTP view in Chrome

Chrome Extensions

As good as the Developer Tools are, it’s nice to have a few little time-saving helpers that will give you the basic information you need every time you load a page. Here are five of my favourites (well, six since I cheated a little):

Web Developer

An old favourite I’m sure you’ve met before, Chris Pederick’s Web Developer extension is indispensable. Particularly handy features including turning CSS, cookies and JavaScript on or off, outlining and colour coding heading levels, and displaying alt attribute text.

Like a lot of the best tools, I keep finding features I hadn’t spotted. For example, did you know it’ll open up a tab and show you a page in a range of editable responsive layouts (Resize > View Responsive Layouts)?

Previewing responsive layouts via Web Developer

Previewing responsive layouts via Web Developer

Another recent discovery: you can add your own things to the Tools menu. Since I’m pushing Rich Snippets a lot lately, I added Google’s Rich Snippet Testing Tool by clicking Edit Tools and adding the following URL “http://www.google.com/webmasters/tools/richsnippets?url=”.

Custom tools in Web Developer

Custom tools in Web Developer

Edit This Cookie

The kerfuffle leading up to enforcement of the EU Privacy Directive had me scouting for good cookie tools, and though the fuss has blown over, Edit This Cookie has become my weapon of choice for anything to do with cookies.

Edit This Cookie

Edit This Cookie

As well as basic features like delete and block, this thing lets you edit the values and behaviours of individual cookies and set them as read only; very useful for working out how a site’s cookies work and forcing a site to behave in a certain way.

Redirect Path

For a quick, line-of-sight information on a page’s HTTP response, or for getting a look at chained redirects, Redirect Path is hard to beat.

Redirect Path HTTP headers

Redirect Path HTTP headers

Chrome Sniffer

Another nice, line-of-sight time-saver, Chrome Sniffer adds icons to your address bar showing what technologies the current page is using. For example, it’ll spot common CMSs and blog platforms like TYPO3 and WordPress, as well as analytics packages, JavaScript libraries, and so on.

Chrome Sniffer

Chrome Sniffer

Microformats for Google Chrome / Schema Viewer

Joint mention for these two – Schema Viewer and Microformats for Google Chrome – which provide address bar notification of microformats and Schema.org microdata respectively.

Microformats viewer

Microformats viewer

Want more? Sam Crosby offered his own, non-tech-centric list of extensions and add-ons back in March. And if I missed out your favourite Chrome tools for technical SEO, let me know in the comments.

Tags: , ,

  • http://www.purposegaming.tv/ Purpose Gaming

    A fantastic list of tools, my favourite new addition to my extensive extension list is Ayima’s redirect path – makes identifying chain redirects a breeze.