Advanced tips for Chrome Developer Tools

Here are some advanced tips for chrome developer tools.

About Console

You can run javascript function by entering its name. If you set a breakpoint in it, it will work. 

You can see the source code of any function and jump to the definition

: Type a function name without round brackets and hit the enter key then console will show its source 

Then click the right mouse button on the function name as below, then select 'Show function definition'. it will jump to the definition except for native function, 

You can use selectors which are the command line api within the console. 

 : https://developer.chrome.com/devtools/docs/commandline-api

Set or unset a breakpoint using debug and undebug function

: call the debug function passing the function name to debug as below. This is really helpful when you don't know where its source is so you cannot set the breakpoint there.

About source

If you want to search some text within the whole javascripts, use ctrl + shift + f short cut. This will show you the search window.

When you blackbox a JavaScript source file, you will not jump into that file when stepping through code you're debugging. You are able to debug just the code you are interested in.

Pause On Caught Exceptions

Pretty Print

: By clicking on the curly brace  ("Pretty Print") icon in the bottom left corner, the JavaScript is transformed into a more human readable form.

The end.