Surfin' Safari

More Web Inspector Updates

Posted by Pavel Feldman on Wednesday, April 14th, 2010 at 5:43 pm

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.

CSS Line NumberCSS Snippet

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.

Large DOM Tree

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 http://gmail.com.

HTTP Redirects

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

HTTP Headers View

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.

Large resources

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.

Evaluate on HoverEvaluate on Hover

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

Timeline Panel

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.

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.

Audits Launch Panel

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.

Console Panel

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.

10 Responses to “More Web Inspector Updates”

  1. hawkman Says:

    Really excited by the Styles improvements — viewing inherited styles is going to be exceptionally useful — and both Timeline and Audits look like they could be very handy. Wow, guys.

  2. CyberSkull Says:

    Are there any plans to do any native building of the inspector?

  3. bobspryn Says:

    Love it all. The biggest thing I’m waiting for is a shortcut that pops open the inspector and puts it in inspection mode (magnifying glass) so that I can quickly hit that keyboard shortcut and select something to inspect. Right now I can right-click inspect, but its quite a bit slower.

  4. charleshimmer Says:

    I was really excited to see you can now see the form data posted in an ajax request!

  5. jweber Says:

    > We have also worked on scalability all over the inspector.

    This is huge. I find the Resources and Scripts panels almost unusable in the current version of Safari, because they can’t handle large files. But I’m playing around with the latest release of Chrome, which seems to include these changes, and it’s MUCH better. I haven’t noticed any problems so far, even with my 800K JavaScript files.

    Great job!

  6. Steven Roussey Says:

    Awesome work!

    Where is a “quick-start” guide to working on the inspector?

  7. Ray Drainville Says:

    This looks like a really useful update to the inspector, thank you very much :)

    One addition that could be useful would be a built-in tidy engine, to verify that we’re building standards-compliant sites. Before 64-bit goodness stopped the fun, I was a big fan of Safari Tidy:

    http://zappatic.net/safaritidy/

  8. lensco Says:

    Really nice updates. I started writing a comment however about how I think Firebug is still superior for web designers, but it got a bit lengthy so I turned it into a blog post:

    http://lensco.be/2010/04/15/webkit-inspector-wish-list/

    What do you guys think?

  9. Trackback from alkaba222's me2DAY:

    맥스제로이쉐뀌의 생각…

    오오…사파리 Inspector Updates …….Timeline Panel 추가됬넹..후후 …

  10. dak Says:

    For some reason in Audit I am always getting the following error for all images:
    Specify image dimensions: “A width and height should be specified for all images in order to speed up page display. The following image(s) are missing a width and/or height:”

    This isn’t just for my web site but for any site I check (including apple.com and webkit.org). All of the images, however, actually do have width and height specified in html.