Thursday, April 15th, 2010
WebKit Inspector Improves Again: Timeline, Audits and Dedicated Console
<p>
Pavel Feldman has introduced some great improvements to the WebKit inspector.
There are some great new panels available:
Timeline Panel
The Timeline Panel provides you with a detailed view of what’s happening inside your browser as you surf. It allows you to zoom into the areas of interest, expand the nested records and investigate their details. The Timeline organizes nesting based on event causation. So, if a mouse down event handler sets a timer, which upon firing loads a resource using XHR, which later evaluates the result when the resource becomes available; then all the events caused by the mouse down will be placed under the mouse down umbrella. Solid parts of the bars show synchronous time spent on the operation, while the semi-transparent part shows the time consumed by everything this event caused (not necessarily synchronously).
Audits Panel
Audit results provide you with hints on unused resources, caching optimizations, the number of resources to load per domain, image tag parameters and many other suggestions. We’d like to make the audits framework extensible so that everyone can contribute checks for various categories such as mobile browsing, security, and static code analysis.
Dedicated Console Panel
You can now enjoy a large and powerful inspector console in a dedicated panel. Note that you can use panel switching shortcuts such as Command-[ and Command-] as mentioned in one of the previous posts.
To go along with these great new panels, there are also a ton of improvement to the other views that you know and love. My favorite is that you can now finally “Edit as HTML” in the DOM inspector. No more node ugliness.
Read the full post for all of the goodness.
Related Content:
What about editing CSS?
Using Safari 4.0.5 (531.22.7) on WinXP I can’t add new style statements. There is no Gear icon to click on. Tabbing from editing a style doesn’t help either.
I like how the developer tools are getting closer and closer to what the “proper” development environments have. What is still a big gap are memory inspection tools. We need deep insight into the javascript and dom memory space. I’m sure they’ll make that happen though…
Web Inspector may have some interesting features and a nice skin, but it’s still lightyears behind Firebug in usability and handiness.
Glad to see you can now inspect the form data passed in an ajax request.
Cookie editing would rock.
Cookies are so 2009, all the cool kids use local storage. ;)
Baryn,
Honestly I find the differences between Firebug and Web Inspector to be mostly a matter of taste. I could do most of the same things on one or the other, but WI is more familiar. There’s a handful of things I’d like to be able to do that Safari’s WI doesn’t currently do, but most of them are coming but not available yet in Safari (which is my primary target because it’s my primary browser, and because getting it right in Safari first usually results in getting it right in other browsers pretty quickly).
Excellent – now we just need a half-decent JavaScript IDE
eyelidlessness,
If you find the differences are subjective then you haven’t really used both to any meaningful extent. Or maybe your needs are pretty lightweight to begin with.