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!
(So if you're reading this Webkit/Inspector developers, thank you.)
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.
See http://getfirebug.com/wiki/index.php/Command_Line_API for the rest of the command-line API.
> 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.
I had to manually roll back Safari to 5.1.7 to get the old one back.
I will give Apple credit for keeping me hooked on Safari since they're bookmark and history sync across all their devices via the cloud is top notch.
But even if not, how many mobile websites use heavy JS? Chrome appears to use page pre-fetching as well, or at least that's what I gather from the "preload webpages" setting.
search for "nitrous" on cydia
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.
You need to shift-enter every line, not as usable as Firefox/Firebug. Also tab is still not working. This is the reason why I am still using Firefox for development purpose.
Is there a similar list for firebug? A strong advantage of firebug is of course that it's has a bunch of nifty extensions. Which one do you prefer?
This is in Chrome for Windows (haven't tried Safari or Chrome for Mac).
Hit F12 to open the inspector.
If it is docked, click the undock icon so it's in a separate window.
Make sure the focus is on the separate inspector window (click its titlebar to be sure), and hit F12 again. This opens another inspector window where you can inspect the first one.
I loved using Safari's inspector for for trying out CSS selectors. It seems that both for Chrome and Safari, only searching for xpath seems to still work. Am I missing something or did that really get removed?
I just noticed that Chrom seems to have updated, it works again: https://skitch.com/marc.seeger/em6tu/hacker-news-add-comment