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.
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.
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.
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.
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):
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)?
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=”.
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.
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.
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.
Microformats for Google Chrome / Schema 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.