Things I didn’t know about the WebKit inspector

Things I didn’t know about the WebKit inspector
blog.joocode.com

Regarding the element drag and drop: it's a really awesome way to brainstorm redesigning a UI, but I've found if I mess with it too much it starts behaving weirdly and getting confused about whether the elements are in their old or new spots, and I have to refresh and start over. Still an awesome feature for productivity.

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.)