Despite what the name may imply, browser developer tools are not only useful for developers. Anyone who works with the web (and if you are reading this blog, that probably means you) can find value in browser developer tools because they use the browser, the tool we all use to access the riches of the web, to deconstruct the information that makes up the core of our online experience. A user who has a solid grasp on how to use their browser’s developer tools can see lots of incredibly useful things, such as:
- Dynamic views of a page’s HTML elements & data
- CSS rules being applied to any given element
- The effects of new user-supplied CSS rules
- Margin & padding boundaries around elements
- External files being loaded by a page (CSS & JS)
The first step in understanding your browser’s developer tools is knowing that they exist. If you can only get to this step, you are far ahead of most people. Every browser has its own set of embedded developer tools, whether you are using Internet Explorer, Safari, Firefox, Chrome, or Opera. There’s no special developer version of the browser to install or any add-ons or extensions to download, and it doesn’t matter if you are on Windows, Mac or Linux. If a computer has a browser, it already has developer tools baked in.
Now that you know browser developer tools exist and why they are so helpful, the only thing left to do is learn them. Teaching you to actually use browser developer tools is out of the scope of this post since it depends on what browser you use and what your needs are, but if you start playing around with them I promise you will find something useful almost immediately. If you are a web developer and you aren’t already using them, prepare for your life to get a lot easier. If you aren’t a developer but work with web pages extensively, prepare for your understanding of how a web page works to grow considerably (and as a result, for your life to get a lot easier). I’m always surprised at how few people are aware that these tools even exist (and what happens when someone stumbles upon them without knowing what they are), but someone with a solid grasp of browser developer tools can expose a problem with a single keyboard shortcut, even on someone else’s workstation. A person who can leverage these tools to figure out problems no one else can often acquires the mystical aura of an internet wizard with secret magic powers to their relatively mortal coworkers. Become that person with browser developer tools.