Notes from a Snooping Developer4th July 2015 in Tooling
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!
What are you waiting for? It’s time to put on your detective hat and get snooping!