I remember the first time someone told me that I should be using Chrome Developer tools, or Firebug, or some variation thereof in the browser to help with my front-end coding.

I didn’t get it.

Now I can’t live without it! Because, you see, view:source is only helpful to a certain extent. When I’m coding an HTML/CSS/Javascript template, and the jQuery isn’t working, for example, I’ll hit option-command-J, and it’ll show me the exact line in the javascript file where the error is occurring. Click on “Elements” within Chrome Developer Tools, and I’ll be able to see height and width dimensions for elements on the page.

Once upon a time, I remember feeling at a loss about the hex code of a background color of an element I was trying to replicate. Now, it’s simple: open Chrome Developer Tools, perhaps click on the element with the inspector tool, and look at the CSS.