The recent release of Chrome 88 includes significant updates to the Chrome DevTools, including improved network debugging, experimental CSS Flexbox debugging tools, improved frame details view, new WASM debug capabilities, and general performance improvements.
The network tab offers three new capabilities aimed at simplifying the debug process:
- Request properties can now be copied directly from the network tab by right-clicking the specific request and selecting 'Copy value.'
- The stack trace for the network initiator can now be copied from individual network requests by selecting the 'Copy stack trace' option.
- Failed Cross-Origin Resource Sharing will now be flagged correctly on the network view.
CSS Flexbox is a powerful design tool that is often difficult to debug - as it operates on both axes. To simplify the debugging process, Chrome offers two new badges. The first badge appears on the elements hierarchy view and flags elements with display:flex applied to them.
The second badge is a context-aware alignment indicator that is based on the following flexbox properties:
- flex-direction
- align-items
- align-content
- align-self
- justify-items
- justify-content
While taking into account the direction based on:
- flex-direction
- direction
- writing-mode
To use flexbox debugging, developers need to enable it under the Settings > Experiments tab.
The Chrome 88 Devtools also provide an improved frame details view that includes additional information on Cross-origin isolation information status, dedicated information on frame web workers, and the ability to discover which frame triggers another Window opening.
Chrome 88 also aligns Wasm debugging with existing Javascript debugging capabilities. While pausing execution on a breakpoint, developers can either hover over variables to see their current values or evaluate them in the Console.
Finally, the DevTools startup is now nearly 40% faster in terms of JavaScript compilation due to the reduced performance overhead of serialization, parsing, and deserialization during the startup.
Chrome DevTools provides a rich set of utilities for debugging web applications and is used in most Chromium-based browsers. The Chrome development team continues to improve the DevTools and ships new features with every release of Chrome. Developers can keep track of the latest features on the Google developers website and discuss possible features, changes, and bugs on the mailing list.