A few things I learnt reading http://jtaby.com/2012/04/23/modern-web-development-part-1.html, writing here to not forget them.
- Drag and drop in the Elements panel: you can drag and drop any of the page’s HTML elements and change their positioning live across the page. This allows for funny stuff like this:
- Elements-console quick links: select an element and digit $0 in the console, it will be used by the script. If using jQuery, you can enter $($0) to use the jQuery functionality:
- Debug on DOM modifications: right-click an element and enable ‘Break on Subtree Modifications’: whenever a script traverses that element childs and modifies them, the debugger rolls in automatically to let you inspect what’s happening:
- The styles buttons: next to the CSS ‘Styles’ heading, there are 2 super useful buttons: one lets you add a new CSS property, with any target you want. The second one lets you trigger a state for the selected element, so you can see the styles applied when it’s active, hovered, on focus..
- Save to file the CSS tweaked using the inspector: click the name of the CSS that’s been modified, the inspector opens it into the Sources pane. From there you can save it. This trick does not work for new selectors added using +, or into the element.style properties, but only for modified, existing ones.
- Console, write more-than-1-line commands: shift-enter does the trick. Pressing enter at the end of the script runs it.
- Shortcut to clear the console: ctrl-L
- Tracking uncaught exceptions: from the Sources pane, double clicking the “||” button will break the code when an uncaught exception occurrs, preserving the call stack and the current state of the application.
- Go to.. in the Sources pane: CMD-O, shows the available files. CMD-Shift-O, shows the functions (or classes) in the current file. CMD-L goes to a specific line:
- ‘Favourite’ an expression (or variable value): instead of writing again and again a variable name or an expression you are going to check a lot during a debug session, add it to the ‘Watch Expression’ list. You refresh the values if you modify them directly, or just watch them change while the code runs:
- XHR debugging: from the debugger open the “XHR Breakpoints” section, you can specify any URL (even a substring) your code should break into when doing an XHR request. Or even tell him to break on every XHR:
- Load events timeline saved by another person: say a coworker finds a problem, instead of showing a screenhost, he can save the timeline and you can load it locally.