Safari Web Inspector Redesign

As it turns out, few days ago Web Inspector has received a redesign as well as some improvements under the hood.

Few changes which I’d like to quote:

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.

Console

The Console is now accessible from any panel.

Elements Panel

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.

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.

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.

Databases Panel

The Databases panel lets you interact with HTML 5 Database storage.

Search

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.

Available Now and Contributing

For more details and info, check this blog post.

If you want to try new web inspector, feel free to check Windows or Mac nightly builds.