I love tip articles! Here are some more that I use heavily (note that some of these might be Google Chrome only at the moment)
The gear in the bottom right of the Chrome inspector has a lot of useful options, such as emulating touch events and preserving the console log upon navigation.
The Watch Expressions persist across tabs and I keep "this" as the top watch expression all the time. It makes for an easy quick check when debugging to make sure that you're in the scope you thought you were, and you can always use the dropdown to inspect all the properties of the current class.
CTRL+G works in the sources tab (go to line)
You can highlight some code and right click -> Evaluate and it will run that selected line in the console for you. Alternatively you can highlight the code and press CTRL+SHIFT+E
There's a useful shorthand: In the console you don't have to type "document.getElementById('blah')" to get a reference to the blah ID'd element. Instead you can just type "blah" in the console, and even though autocomplete doesn't show it, pressing enter will return the element with ID blah!
~~~~~
As an aside, developer tools like the inspector are the reason my pea brain is allowed to have a love affair with the weird little language that is JavaScript.
Thanks to the console the amount of time it takes to whip up a five-cent program with JavaScript without even leaving my browser, heck without even leaving this tab is just astounding to me even after all these years.
One thing I noticed is that more than the language itself, the tools that I use while building things in the language are what really make them a pleasure to use. If I wasn't using (Chrome's) web developer tools I'd probably consider JavaScript to be a nightmarish corpse of a language that punishes the slightest of typos with a silent malicious grin, as code execution carries on as if A.blah = 5 and A.blsh = 5 were both equally worthy of existing to the JS compiler/interpreter. Only by the grace of tools is JS tame at all.
(So if you're reading this Webkit/Inspector developers, thank you.)
> There's a useful shorthand: In the console you don't have to type "document.getElementById('blah')" to get a reference to the blah ID'd element. Instead you can just type "blah" in the console, and even though autocomplete doesn't show it, pressing enter will return the element with ID blah!
That's crappy, it's DOM0 aliasing. Use `$` if you're not using jQuery, it's an alias for document.getElementById. And there's $$ for document.querySelectorAll and $x for xpath queries.
> The Watch Expressions persist across tabs and I keep "this" as the top watch expression all the time. It makes for an easy quick check when debugging to make sure that you're in the scope you thought you were, and you can always use the dropdown to inspect all the properties of the current class.
An other good introspection method when debugging: expressions entered in the console execute in the current scope.
After reading the article and your comment, I'm encouraged to give Javascript another chance. Your guess at how you would consider Javascript if you didn't use Chrome's developer tools is actually spot on to how I find it... I am a Firebug user and not a fan of Chrome's tools, but if Firebug has these kind of JS capabilities I've yet to discover them. I must confess, I haven't really looked hard enough, and it looks like JS deserves another shot.
The gear in the bottom right of the Chrome inspector has a lot of useful options, such as emulating touch events and preserving the console log upon navigation.
The Watch Expressions persist across tabs and I keep "this" as the top watch expression all the time. It makes for an easy quick check when debugging to make sure that you're in the scope you thought you were, and you can always use the dropdown to inspect all the properties of the current class.
CTRL+G works in the sources tab (go to line)
You can highlight some code and right click -> Evaluate and it will run that selected line in the console for you. Alternatively you can highlight the code and press CTRL+SHIFT+E
You can remotely use the web inspector for Chrome Mobile: http://www.youtube.com/watch?v=s4zpL4VBbuU
There's a useful shorthand: In the console you don't have to type "document.getElementById('blah')" to get a reference to the blah ID'd element. Instead you can just type "blah" in the console, and even though autocomplete doesn't show it, pressing enter will return the element with ID blah!
~~~~~
As an aside, developer tools like the inspector are the reason my pea brain is allowed to have a love affair with the weird little language that is JavaScript.
Thanks to the console the amount of time it takes to whip up a five-cent program with JavaScript without even leaving my browser, heck without even leaving this tab is just astounding to me even after all these years.
One thing I noticed is that more than the language itself, the tools that I use while building things in the language are what really make them a pleasure to use. If I wasn't using (Chrome's) web developer tools I'd probably consider JavaScript to be a nightmarish corpse of a language that punishes the slightest of typos with a silent malicious grin, as code execution carries on as if A.blah = 5 and A.blsh = 5 were both equally worthy of existing to the JS compiler/interpreter. Only by the grace of tools is JS tame at all.
(So if you're reading this Webkit/Inspector developers, thank you.)