Over a million developers have joined DZone.

WebKit's Inspector Adds New Visibility

DZone 's Guide to

WebKit's Inspector Adds New Visibility

· Performance Zone ·
Free Resource
WebKit updated their Web Inspector tool this week with the addition of three new monitoring panels for gathering detailed information on website and web app performance.  These new panels include a Timeline, Audits, and Dedicated Console panel.  Web Inspector also features many upgrades of existing features.


The WebKit team is always adding new keyboard shortcuts, and the newest ones can be found on the WebKit wiki.  The scripts panel includes a shortcut of its own - a button to deactivate or activate all breakpoints.  This will help developers easily select the one breakpoint or state they want to debug.  Users can also hover over elements in a breakpoint to see the actual values evaluated on a selected call frame.  

Breakpoint elements hover

DOM, Script, and Resource Inspections

The DOM editing features have been made available via the context menu.  One of the new actions in the context menu is an "Edit as HTML" feature.  DOM inspection also includes more options for handling large trees.  

The styles panel now lets you edit font, color, spacing, and list styles.  You can also jump from the styles sidebar entry to a rule definition.  Styles such as ::before, ::after, and other -webkit-* elements have been exposed.  Users can inspect input fields to see how to decorate passwords, add placeholders, and more.

The resources panel now displays HTTP redirects meta-information, and they are displayed as separate entries.  In the new HTTP Headers View you can see the redirect chain and select an entry for its status code and redirect location.  The Web Inspector also includes some scalability improvements that allow it to be instrumenting for days while inspecting Ajax intensive applications.

Resources Panel

Timeline Panel
The timeline panel helps developers monitor some of the operations that aren't always visible, such as parsing HTML, calculating styles, and painting.  This new panel gives detailed loading, scripting, and rendering timelines with nested records that can be expanded (zoomed into).  A mouse event, for example, will have all resulting events placed under the event's umbrella.  

Timeline Panel

The solid sections of the bars show the amount of synchronous time spent on an operation and the semi-transparent parts are a measurement of the total time consumed by everything caused by that operation.  

Audits Panel
There are a number of website audits in the audit panel.  These audits will give you advice about unused resources, resources to load per domain, image tag parameters, caching optimizations, and more.  The WebKit team plans on making the audits framework extensible so users can contribute audits for things like mobile browsing and static code analysis.

Audits Panel

Dedicated Console Panel
Web Inspector now has a dedicated panel for a robust and powerful console.  Use the panel switching shortcuts to quickly navigate these new panels (e.g. Command-[ and Command-]).

Dedicated Console Panel

Several new features were added by open source community members, and WebKit wants you to get involved too!  Check out WebKit's blog post about the Web Inspector update.

Images Credit: WebKit

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}