WebKit's Web Inspector + jQuery March 19th, 2010
While trying to switch full-time from Firefox to Chromium my biggest gripe was that it's Web Inspector makes doing heavy jQuery development very painful:
Compare that to what Firebug gives you for the same code:
Clicking on the elements takes you right to them in the HTML tab (in WebKit this is the 'Elements' tab). It might seem small but... it's not, it's huge and slows me down way too much. Fortunately most of Web Inspector is written in plain JavaScript — thus, it's quite hackable.
Find the Inspector Source
First you need to find the source-code for Web Inspector on your system somewhere. The location depends a lot on your platform:
-
Debian-based:
The deb's seem to put it in
/usr/lib/chromium-browser/resources/inspector
, other distros are probably similar. -
Mac OS X:
Look around in
/Applications/Chromium.app/Contents/Versions/X.X.XXX.X/Chromium Framework.framework/Resources/inspector
possibly substituting 'Chromium' with 'Google Chrome' if you're using the branded version. -
Windows:
No idea, sorry :)
If you can't find it you can fall back to sudo find / -name inspector
to give you an idea of where to start looking.
Adding Support for jQuery-wrapped Collections
Once you've found the inspector source, open up DevTools.js
and find the definition for InjectedScript._type
.
This function goes through a type check on the parameter and returns
something 'appropriate' that the console knows how to render.
When you give it a jQuery-wrapped collection it returns object
—
since that's what it is. What we want to do is pretend these are
actually array
s:
The result is a bit verbose compared to Firebug but I'm ok with it — certainly a major improvement: