Gleaned from Andi Smith blog post 25 Secrets of the Browser Developer Tools:

Access built-in browser toolbars by pressing F12 in Windows or Cmd-Opt-i on the Mac. The post includes a table listing browsers, development toolsets, type (integrated or add-on), and links to documentation.

Console tab

• Safari, Chrome, Firefox, and Opera: Use Elements > Show Console > $0. to bring up info about currently selected elements. For instance, $0.innerHTML displays the element’s contents, $0.id displays the element’s id. In Safari and Chrome, you can select the previous elements you have highlighted using $1 – $4.
• All: You can find the answer to a math question quickly by typing it into the developer tools’ console.

Scripts tab

• See minified code in an easy-to-ready format.
  • Safari, Chrome: Scripts > select relevant file in drop down menu, click { } (pretty print) icon.
  • IE9: Script > Tool icon drop down > Format JavaScript.
• All: In the Scripts tab, watch lets you monitor a list of variables. Type the name of the variable and watch will keep its value up to date.
• Chrome: In the Scripts tab, you can edit JavaScript directly on the page. Double click where you want to change the code and use Ctrl/Cmd+S to save.
• All: Create a breakpoint whenever a JavaScript error occurs by clicking the Pause icon in the Script tab when the first JavaScript error occurs. The line that caused the error will be highlighted for your review.
• Chrome, Firefox: To create a script breakpoint based on the DOM changing (your page is breaking when a certain part of the DOM changes or you want to find out what script is responsible for changing the element’s attribute): select the element you want to monitor in the Script tab > right click > select the conditions to break on (Break on Subtree Modifications, Break on Attributes Modifications, or Break on Node Removal).

Elements tab

The Elements tab is called HTML in Firefox and Documents in Opera.

• Get the dimensions of a container
  • Safari, Chrome: Rest cursor on element in the source code or use the magnifying glass in the bottom toolbar
  • Internet Explorer, Firefox, Opera: Select the Layout tab or scroll through the list of computer styles in the right sidebar.
• Style :active, :hover, :focus, and :visited states
  • Chrome, Firefox, Opera: In the right sidebar, select dotted element/cursor icon in Styles accordion header > select state in which you’re interested.
  • Firefox: In the right sidebar, click arrow menu beside the Style tab and select state in which you’re interested.
• Safari, Chrome: Find other color definitions (hex, RGB, etc.) by repeated clicking on color square showing the color. The color square is in the right sidebar.

Network tab

All except IE8 and before: This tab shows all the resources and files downloaded to load your page. You may need to refresh. In Firefox, this tab is called Net.

Disabling browser cache

• Internet Explorer: Option is under Cache in menu bar.
• Safari: Under Develop menu in the menu bar.
• Firefox: Click arrow next to Net tab header.
• Chrome: Option is in the Settings cog.