Browser developer tool

Built-in browser developer tool really helps Web development, the all-in-one development environment is getting better and better from desktop browsers.

Chrome: This is my favorite
Firefox: Firebug extension, but I think Firefox 23 built-in tool is cool and promising
Opera: Dragonfly, very clear and easy of use
Safari: Xcode style, hard to use. I seldom use it unless I need debug iOS safari (mobile web remote debug)
IE9: F12. So hard to use, but IE11 is getting much better based on .NET magazine. Hope it will catch up Chrome/Firefox.

Usually the features available from these browser developer tools are similar, and they should Element inspector, Style box model, Resource browser, network activity, Performance, profile, Console etc.

Here are some tips I just learned or I don't use frequently:

• Don't forget right click in developer tool - the contextmenu has some surprises
• Debugging Minified JavaScript
• Emulate a User Agent
• Checking DOMContentLoad and Load Event
• Incrementing CSS Values - Simply use the up and down cursor keys to increment/decrement by a unit of 1.
• console.log() for outputting debug info, will work printf style. like console.log("The flower is %s.", "red")
• console.assert() can be used to test whether expressions are true or false.
• console.table() can be used to output data from an array of arrays or a list of objects in a sortable, tabular format.
• You can automatically create a breakpoint in your code by adding the following line to your JavaScript: debugger;