Category: Technical Web Development

Tomorrow, I’ll be speaking at Search Marketing World in Dublin and in one of my sessions, I’m planning to talk about the various tools I use to assess a site and diagnose technical and SEO-related issues with it. It seems like every time I speak at or attend a session at a conference, someone in the audience asks what tools people use so I thought I’d compile a list.

I also thought I’d ask the Twitter audience what tools (specifically Firefox plugins) people like the most to see what I might be missing. Overwhelmingly, the favorite was Firebug. I have to agree with the crowd; Firebug is probably my favorite too. But people recommended lots of other tools, some of which I use all the time and some I’d never heard of. Here’s the list for your debugging pleasure.

• Firebug: everyone’s favorite plugin. Sure, it’s a much better way to view the source code of a page, debugs javascript, and lets you see CSS. But it also lets you tweak code and see how it would look rendered on the page, and it shows you exactly where code is located on a rendered page, and it helps you from going crazy trying to figure out why things aren’t lining up, and it… Well, you get the idea. My favorite use of it lately is to search the code for a URL, then inspect the element to find that link on the page. Sometimes those links are sneaky and Firebug makes them super easy to find.
• Web Developer Toolbar: another plugin I use all the time. It adds a cool toolbar to the browser that lets you easily disable things like javascript, images, and CSS, view meta data, see a page in a different resolution, validate stuff… and I have barely started. One thing to note is that when you disable CSS and then images, CSS becomes enabled again (this is just a bug in the toolbar). So, you have to disable CSS after you disable images.
• User Agent Switcher: This is useful to see if a page is cloaking, but obviously, only if it’s cloaking at the user-agent level (vs. for instance, by IP address). Simply add the user agents you want to check out (for instance Googlebot, MSNbot, or Slurp) and then select that user agent and reload the page. The most well-known example of how this works is the nike.com site. Here’s how the home page looks when the user agent is set to default (in this case, Firefox):

  

  And here’s how that same page looks when the user agent is set to Googlebot:

  

  (As an aside: note that for whatever reason, the Flash page isn’t loading for me. Yet another reason why I just don’t buy the argument that all Flash sites are good for users and that webmasters have to jump through these cloaking hoops to make sure search engines index the pages. If I’m a customer and I want to buy some shoes, I don’t want to have to debug why your site isn’t loading for me. (Not to mention if I’m at the mall and want to check out your shoes on my mobile phone…) People want non-Flash links too!

• Live HTTP Headers: view the HTTP response of a page. For instance, is the page returning a 200 response when it should be returning a 404? Is the redirect a 301 or 302? And speaking of redirects, how many hops does the server take you on before you land on the destination? And that’s just the kinds of things you can get from the status code. There’s all kinds of value to be found in header information. Is the page setting a cookie? Is it sending data compressed? What really is being downloaded?
• Header Spy: Similar to Live HTTP Headers. I haven’t used this plugin, since Live HTTP Headers works pretty well for me.
• Yslow: indeed, why slow? This is a great example of a tool that not only provides data, but shows you how to make that data actionable.
• Flashblock: replaces Flash with a play icon. I think this is great because the page loads without Flash, but you can view it if you want to.
• Aardvark: view page elements, remove elements from pages, do lots of analysis.
• ColorZilla: I hadn’t heard of this plugin, but it sounds pretty cool. You can easily grab any color that you see on a page, as well as lots of other little things.
• HTML Validator: exactly as it sounds.
• SEO For Firefox: This is Aaron Wall’s plugin and he has a video on his site describing it. This plugin adds a bunch of links under the Google search results. You can click on a link to find out more information about that result. For instance, below is the first result for “vanessa” (this site). I’ve clicked the first few links to get more information. The rest show what the page looks like by default for each result (a question mark appears until you click it to retrieve the information). (As an aside, I don’t know that all of these factors influence rankings, but it’s still useful data to have and nice to have it all at a glance. It’s also handy to be able to click the “whois” link next to any result.)

  

  This plugin also highlights nofollow links on a page.

• SEO Quake: also has a toolbar and search results parameters that are customizable.
• Search Status: this plugin provides a lot of the same information as SEO for Firefox, as well as things like robots.txt and keyword density.
• SEO Link Analysis: provides lots of things beyond links including anchor text (helpful) and PageRank (perhaps not as helpful). I’m having trouble getting it installed though.
• View Dependencies: shows you a list of all the dependent files and lets you open them to take a closer look.
• Meta Info Sidebar: shows a lot of seo-related and meta data in a sidebar.
• SEOpen: I haven’t used this, but it looks like it provides many of the same details as some of the other plugins. This list was in part recommended by Twitterers, which means that they all had preferences about which SEO tool to use. I think it’s all about finding the one that you like best.
• View Rendered Source: A much easier-to-read version of view source. Since I use Firebug for viewing the source of a page, I haven’t found a need for this, although it looks like a pretty readable way to look at page source code.
• ShowIP: see the IP of a page, and query info such as whois.
• Advanced Dork: easy access to Google’s advanced operators.

And if you want to know even more about Firefox plugins, cshel blogged her list back in January.