Web Inspector adds Timeline and Audits panels

The latest set of improved and new features to the WebKit Web Inspector are really great. I mean really great as in “I’m not so sure how much I’ll be using Firebug anymore.”

Existing features that have been improved include:

Improved inspection of CSS: you can now jump straight to the place in a CSS file where a particular rule is defined. The Web Inspector now also reveals user agent styles, which lets you see the “secret” CSS that WebKit uses to style form controls, for instance.
Edit HTML of DOM nodes: Finally you can edit the HTML of a DOM node through an “Edit as HTML” option added to the Web Inspector’s context menu.
Follow redirects in the Resources panel: Every redirect that the server sends is displayed when you load a page. Clicking a redirect lets you view the HTTP headers associated with it.

Two of the new features are the Timeline and Audits panels, both of which will help you improve the performance of your site:

Timeline panel: Wonder what is making your page slow—is it loading, scripting or rendering? Check the Timeline panel for a detailed view of what the browser does from requesting a page until it is rendered.
Get performance tips from the Audits panel: To run a number of sanity checks on the page you’re viewing, go to the Audits panel and click “Run”. After analysing the page, the Web Inspector will give you tips on how to improve performance.

Try it out for yourself by grabbing a WebKit Nightly or getting a Chrome Dev channel build.

Find all the details in the Surfin’ Safari post More Web Inspector Updates.

Posted on April 19, 2010 in Browsers, Apple