Thursday, April 15th, 2010

WebKit Inspector Improves Again: Timeline, Audits and Dedicated Console

Category: Debugging, WebKit

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

Posted by Dion Almaer at 12:22 am
9 Comments

++++-
4.7 rating from 34 votes

9 Comments »

Comments feed TrackBack URI

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.

Comment by GordonStanton — April 15, 2010

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…

Comment by Joeri — April 15, 2010

Web Inspector may have some interesting features and a nice skin, but it’s still lightyears behind Firebug in usability and handiness.

Comment by Baryn — April 15, 2010

Glad to see you can now inspect the form data passed in an ajax request.

Comment by chuckles1313 — April 15, 2010

Cookie editing would rock.

Comment by xmlblog — April 15, 2010

Cookies are so 2009, all the cool kids use local storage. ;)

Comment by Joeri — April 15, 2010

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

Comment by eyelidlessness — April 15, 2010

Excellent – now we just need a half-decent JavaScript IDE

Comment by AngusC — April 15, 2010

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.

Comment by Baryn — June 25, 2010

Leave a comment

You must be logged in to post a comment.