Chrome Developer Tools for HTML, CSS, and JavaScript

One of the first things I typically do with my tutoring students is introduce them to the Element Inspector provided by either Chrome or Firebug. I think it is because one of the first questions my students ask is “what did I do wrong?” when their code does not behave as expected. It’s hard to know just by looking at your code. The Inspector can help!

I like recommending Chrome because it works out of the box. With Firefox, you must first install the Firebug extension and then enable every part of the developer tools. For the record, Internet Explorer 9 has vastly improved their developer tools as well, though I typically do my initial development in Chrome and only open the IE9 or IE8 dev tools when there is a problem.

For beginners, the video below shows you the path for downloading Chrome and getting started with the Inspector tools.

For more advanced users, the Element and CSS Inspectors are not the only awesome features of the Chrome developer tools.

1. The Network tab shows all of the HTTP requests and details on their responses.

2. The Timeline and Profiles tools can help you analyze the performance of pages.

3. And my favorite: The Console is fantastic for real-time JavaScript interpretation and debugging. You can type in JavaScript and have access to all of the scripts that are on your page. I use this frequently when I want to be sure I am properly selecting an element set with jQuery. When I write my scripts, I can use console.log() to print statements and objects to the console, or you can also use a debugger; statement to force your script to pause in debug mode. I do not recommend either of these for production sites, or code which might mistakenly get uploaded to production. Specifically, console.log() will break in IE if you do not have the developer tools open (though it does work if you do!). If you are working in JavaScript and like a more defensive or ‘safe’ approach to programming, you may add this block to your personal utilities library:

1
2
3
4
5
6
7
8
9
Debugger = {
    log: function(message){
        try{
            console.log(message)
        } catch(exception) {
            return
        }
    }
}

which then allows you to call Debugger.log() the same way you call console.log, but does not break your scripts in IE.

0 Comments on “Chrome Developer Tools for HTML, CSS, and JavaScript

Leave a Reply