Thursday, October 2nd, 2008

Web Inspector: Looking good, and profiling nicely

Category: Utility, WebKit

The WebKit Web Inspector has been redesigned and improved, and it looks great. Here is a brief look into the features.


First and foremost, the Web Inspector is now sporting a new design that organizes information into task-oriented groups — represented by icons in the toolbar. The toolbar items (Elements, Resources, Scripts, Profiles and Databases) are named after the fundamental items you will work with inside the respective panels.


The Console is now accessible from any panel. Unlike the other panels, the Console is not just used for one task — it might be used while inspecting the DOM, debugging JavaScript or analyzing HTML parse errors. The Console toggle button is found in the status bar, causing it to animate in and out from the bottom of the Web Inspector. The Console can also be toggled by the Escape key.


The Elements panel is largely the same as the previous DOM view — at least visually. Under the hood we have made number of changes and unified everything into one DOM tree.

Resources Panel

The Resources panel is a supercharged version of the previous Network panel. It has a similar looking timeline waterfall, but a lot has been done to make it even more useful.

Scripts Panel

The previous standalone Drosera JavaScript debugger has been replaced with a new JavaScript debugger integrated into the Web Inspector. The new integrated JavaScript debugger is much faster than Drosera, and should be much more convenient.

Profiles Panel

The brand new JavaScript Profiler in the Profiles panel helps you identify where execution time is spent in your page’s JavaScript functions. The sidebar on the left lists all the recorded profiles and a tree view on the right shows the information gathered for the selected profile. Profiles that have the same name are grouped as sequential runs under a collapsible item in the sidebar.

Databases Panel

The Databases panel lets you interact with HTML 5 Database storage. You can examine the contents of all of the page’s open databases and execute SQL queries against them. Each database is shown in the sidebar. Expanding a database’s disclosure triangle will show the database’s tables. Selecting a database table will show you a data grid containing all the columns and rows for that table.


Accompanying the task-oriented reorganization, the search field in the toolbar now searches the current panel with results being highlighted in the context of the panel. Targeting the search to the current panel allows each panel to support specialized queries that are suited for the type of information being shown. The panels that support specialized queries are Elements and Profiles.

Posted by Dion Almaer at 4:01 am

4.2 rating from 36 votes


Comments feed TrackBack URI

Woohah Looks good!! Now all we need is this in Chrome and i can finally debug my pages to make them work.

Comment by SchizoDuckie — October 2, 2008

“Now all we need is this in Chrome and i can finally debug my pages to make them work.”

It is in Chrome, or at least an earlier incarnation of it (but not as much earlier as the current inspector in Safari 3.1). Right-click an element and choose “Inspect Element”.

Now all we need is this in AIR.

Comment by eyelidlessness — October 2, 2008

All I need is for this to be implemented into stainless ( and it would make a kick ass browser.

Comment by emehrkay — October 2, 2008

@emehrkay: Stainless is a neat proof of concept (as is Crossover Chromium) but it’s definitely not something I’d expect developers to target or users to use. It is kind of kludgy feeling (its window trickery causes a flash whenever you switch tabs, for instance), and the UI is pretty terrible (it is a pretty superficial lift directly from Chrome, with very little regard for how it fits in as an OS X app and for really simple stuff like making the chrome of the app even more unusably dark).
But hey, to each their own. That’s just my impressions so far.

Comment by eyelidlessness — October 3, 2008

Leave a comment

You must be logged in to post a comment.