ryanfunduk.com

Follow @rfunduk

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 arrays:

The result is a bit verbose compared to Firebug but I'm ok with it — certainly a major improvement: