I am sure many of you who are reading this article deal with Webkit based dev tools (Chrome / Safari) or Firebug to implement and debug web applications. However there are several cool features in webkit based developer tools (specially Chrome) which are really handy and super quick to use. Knowing all of them will definitely save lot of time for every web based developer.
Elements panel drag and drop
You can drag and drop dom elements in the Elements panel. It will enable quick and craze experiments which you can do on the fly.
Undo and Redo
If you ever mistakenly delete any dom element or style property, now they can be claimed back by Undo or Redo feature in dev tools. Do undo or redo the same way you do in your favorite editor, it works the same way (Ctrl+Z / Ctrl+Shift+Z) in Chrome Dev tools now.
Open source (Ctrl+O)
Go to sources tab and press Ctrl+O. It will show you list of all available external source files. You can refine the list by typing the part of the name of the file.
Open member (Ctrl+Shft+O)
In the sources tab, in the currently opened file, pressing Ctrl+Shift+O gets you list of available functions/methods or css declarations (in case of css file). You can jump to any of them very quickly by typing the name of the method.
Console API ($0 – $4)
Select any element in elements panel and write $0 in the console. It holds the latest selected dom element in the elements panel. You can further play with the dom element held in $0 by using any of the JS method on it. $0 comes from console api which is supported by chrome dev tools and firebug. So, your latest 5 different elements selected will be automatically stored in $0 to $4 where $0 points to the most recently selected one. Really handy to experiment with dom elements.
You can have conditional breakpoints in Javscript which will enable execution to pause only when the specified condition is met. For example checking if an element is null or not in a given loop, just set the breakpoint with the condition !element. It will pause only when specified element is not available.
You can have conditional breakpoint by right clicking on already present breakpoint and selecting “Edit Breakpoint” or add a new breakpoint by right clicking on the breakpoint bar and select “Add conditional breakpoint”.
Pseudo class inspector
Too irritating to inspect and edit “hover” pseudo class because it doesn’t stay there by the time you move your mouse out of the element. Now you can force dev tools to show classes for the states from (Hover, Selected, Active, Focus) of the DOM element. Just click on the arrow (second right buttom from top right corner in styles pane). You can specify which state you want to see the element in. If you say hover, it will show the element in hover state along with showing styles being applicable to the element in that state. You can easily inspect and edit them.
querySelector shortcut ($$ and $)
$$ is the shorthand of document.querySelectorAll (method in New DOM API) which is available in almost all recent browser now. It accepts a css selector in string format and returns list of matching dom Element. Thus $$(“li.item[canBeListed]“) will return list of the list elements which have class “item” on them and have an attribute named “canBeListed” (whatever value) on them.
$ is the shorthand for document.getElementById. It takes id of element in string format and returns the element with the given id. Thus $(‘categories’) will return the element which has id as “categories”.
Shift does the trick. If you press Enter while keeping the shift pressed, it lets you write multiline script in consoles panel.
Break on error/exception
Clear console (Ctrl+l / Cmd+K)
Quickly clear your console by Ctrl+l. (Cmd+K or Cmd+l in Mac)
Preserve log on navigation
Want to debug what happens on page load? Avoid your console being cleared by page refresh by checking this option in console panel.
Dock to right
I personally like this feature which lets me keep the dev tools in the right side of the current page. Very handy if you are working on a big wide screen. You can dock the the right by checking this option. You can enable this feature by going to settings of developer tools and enable it from general tab.
Toggle console in any panel
Press ESC in any panel you are in. It toggles console pane in that panel (except when the panel itself if console panel)
Search in all scripts (Ctrl+Shift+F / Cmd+Option+F)
Not sure which file defines the given method? Press Ctrl+Shift+F and search in all the available scripts in current page. It runs pretty fast.