Notes from a Snooping Developer


I have a new hobby. No it’s not Tree Shaping, Extreme Ironing or even Beetle Fighting (all real hobbies by the way). What I like to do is snoop on other people’s websites. How have they built it? What tools have they used? Have they used a CMS? What does the code look like? How did they do that cool animation effect?

By far, my favourite tool for snooping is Chrome’s developer tools. A simple right click on any website then ‘inspect element’ (or ‘F12’ if I’m feeling fancy) will reveal a vast array of data which can be examined. This is a brief list of what you can do:

  • View the HTML, CSS, JS source files along with interacting directly with the DOM
  • See the network resources including a timeline of the page-load sequence
  • Examine performance and optimization data such as caching and minification
  • See what storage and cookies are being set
  • Check for errors and debug code
  • Test the site on various devices as well as imitating different network speeds +100 other things I’m probably not even aware of!

Also, as I spend a lot of time building sites in WordPress I like to dig around and find out what plugins and themes people have used. Usually a great tool to start with is WP Theme Detector which gives you some information about which themes and plugins are active on a site. There are a few other tools worth mentioning as well. One of my favourite is wappalyzer which is an extension for Firefox and Chrome. Wappalyzer sits in your address bar and with a single click you can instantly see if a site is using a CMS, e-commerce platform, web server or a javascript framework. If you want a more comprehensive list you could use a tool such as Built With or Similar Tech which give you some great graphics and analysis on the tools being used so you can compare different sites and global trends.

What are you waiting for? It’s time to put on your detective hat and get snooping!