WebKit's Inspector Adds New Visibility
Join the DZone community and get the full member experience.Join For Free
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.
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.
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.
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.
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.