Original Content

Browser Developer Tools

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)
  • JavaScript errors, right down to the line number
  • The speed with which JavaScript files are loaded
  • An interactive JavaScript console (great for learning!)

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.

The next step on the journey is learning how to use them. All browser developer tools are pretty similar, so skills gained in one browser translate well to others. Unfortunately the minor differences are substantial enough to make a universal tutorial impossible. If you have a favorite browser, learn how to activate the various developer tools, what each one can do, how to use them effectively, and how to call them with their own specific keyboard shortcut (learning to activate a specific tool with a keyboard shortcut is the key to making them a part of your workflow). Once you have a solid understanding of the developer tools in your favorite browser, branch out and learn the developer tools for other browsers as well. After you have learned one, learning others is easy. By learning different sets of developer tools you will find that some are better at certain tasks than others. For instance, (in my opinion) Firefox is best-in-class when dealing with CSS issues, but Chrome takes first place in JavaScript utilities.

Firefox 3D view
Google search results using Firefox’s 3D view mode, which shows a web page’s nested elements as stacks of colored blocks. This is incredibly helpful for debugging CSS issues.

Another great reason to learn developer tools for different browsers has to do with the way browsers work. When most people think of web programming, they think of the server side versions of files because this is where the work is done. While it’s true that server side development is important, browsers are the real stars of the show. When a user requests a web page, the server sends back a tidy package of HTML, CSS and JavaScript that the browser must turn into a visual representation of that information. Think of it like a Lego kit; every kid buys the same Lego kit from the store which has all the parts and instructions in a handy portable package, but it’s up to the individual to actually make something out of it and often the final product varies slightly from person to person.  Browsers are the same way, they all put the HTML, CSS and JavaScript together in a slightly different way to render a slightly different web page (this causes endless headaches for developers struggling to make a consistent user experience across browsers). Browser developer tools give us an insight into both the code that the browser receives and the way that the individual browser is putting the web page together. If a page looks a bit different in Internet Explorer than it does in Chrome, we can use each browser’s respective developer tools to peek into the rendering process and see what’s going on in an effort to minimize these differences.

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.

2 comments

  1. Michael Rodriguez

    Bryan, congratulations on your post making into this week’s AL Direct! These are nifty tips for us webrarians.

  2. Pingback: Doing Web Accessibility | LITA Blog

Comments are closed.