More Web Inspector Updates

April 15th, 2010

A number of exciting new features have been added to the Web Inspector since our last update. This time, we’ve got three new panels to present: a Timeline, Audits and Dedicated Console. But before we go there, let us give you a brief update on the improvements to the existing features.

If you would like to play with most of these features you will need to be running a recent WebKit Nightly or subscribe to the Chromium Dev Channel. For WebKit Nightly users make sure that you enable the Web Inspector by checking “Show Develop menu in menu bar” under the Advanced tab in the Preferences.

Styles Inspection #

We’ve been working hard on making editing styles more complete and user-friendly. Now you can jump to rule definition right from the Styles sidebar entry.

You can view and edit styles such as font, color, spacing, list & text styles and others that are inherited from ancestor nodes. In addition to that we’ve exposed pseudo element styles such as ::before, ::after and many more -webkit-* ones. Inspect any input field and discover the ways you can decorate passwords, input placeholders, and many other aspects.

DOM Inspection #

DOM editing capabilities are now accessible via the context menu. Items in the menu are specific to the context, so that you will see different actions for nodes, attributes, local store entries, and others throughout the Web Inspector’s UI. Among them is a long-awaited feature called “Edit as HTML” available on DOM nodes.

We are also handling huge DOM trees much better now. For DOM nodes having more than 500 children, instead of waiting for the parent node to get populated with information you don’t immediately need, you will have an option to expand them manually should you need it.

Resources Inspection #

In the Resources Panel, we now display HTTP redirects information. Every redirect is displayed as separate resource entry providing all its meta-information such as timing and headers. This information is available by means of the new HTTP Headers View. Take a look at the screenshot below for the redirect chain produced while navigating to

Selecting a redirect chain entry gives you its status code and the redirect location in the response headers.

We have also worked on scalability all over the inspector. The Web Inspector can now be left instrumenting for days while inspecting AJAX intensive applications such as Gmail. It can also render large source files of ~100KLOC with syntax highlighting, while maintaining a reasonable memory footprint.

Scripts Panel Improvements #

We’ve found that users often manually disable numerous breakpoints in order to get to a single breakpoint or state they want to debug. To improve this there is now a way to deactivate and activate all breakpoints via a single click on the debugger toolbar.

While on a breakpoint, hover over elements to see their actual values evaluated on a selected call frame. The Web Inspector will not only render basic types, but will also present complex object trees and function bodies.

Keyboard Shortcuts #

We are constantly adding keyboard shortcuts to the Web Inspector, so make sure to check out updates on our wiki page. Most notably, page reload shortcuts will refresh the inspected page instead of refreshing the Web Inspector itself.

That’s it for the existing features updates. You can find the complete list of addressed bugs and feature requests using this query. Now it is time to talk about the new panels.

New! Timeline Panel #

Imagine that you’ve optimized your site’s network interaction using the Resources Panel and tuned all of your JavaScript using profiler in the Scripts Panel. Still, there are operations that could be taking a considerable amount of CPU time such as parsing HTML, calculating styles, painting, and others that you don’t normally see. Some of these operations may happen when you don’t necessarily expect them to. Its easy to guess that assigning an element’s innerHTML to a string results in HTML snippet parsing, but changing other element properties may trigger style calculations you didn’t expect. Now there is a way to analyze that.

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

Use the overview panel at the top to zoom into your area of interest. Overview shows the aggregated information on the three major record categories: Loading, Scripting and Rendering. Each category can be individually filtered out. The “Hide short records” button in the status bar will hide all the records that took less than 15ms.

Clicking or hovering over a record will show a popup window with its details.

Note that we’ve just started with the Timeline and we believe that we are only scratching the surface of what we can provide. We welcome your feedback, ideas and contributions.

New! Audits Panel #

The Audits Panel performs a number of sanity checks for your site. You start with the Audit Launcher Panel where you select the audit sets you’d like to run. The Web Inspector will then optionally reload your page and analyze it.

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.

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

How You Can Contribute #

Many of these new features were added by members of the Open Source Community. We would like to encourage you to contribute as well. Since the Web Inspector itself is mostly HTML, JavaScript, and CSS that means that you already have the skills you need to join in. Interested? Play around right now by inspecting the inspector itself!

Work on the Web Inspector using the Web Inspector!

If you’re interested in contributing and have any questions please stop by the #webkit-inspector IRC channel. If you have ideas for new features, any improvements, or if you’ve stumbled across a bug then please don’t hesitate to create a bug report. This link has pre-populated most of the fields so that you only need to fill out the Summary and Description. As always you should do a quick search through the existing inspector bugs first.