BT

InfoQ Homepage News New Features in Chrome 88 Devtools

New Features in Chrome 88 Devtools

Bookmarks

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:

  1. Request properties can now be copied directly from the network tab by right-clicking the specific request and selecting 'Copy value.'
  2. The stack trace for the network initiator can now be copied from individual network requests by selecting the 'Copy stack trace' option.
  3. 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.

We need your feedback

How might we improve InfoQ for you

Thank you for being an InfoQ reader.

Each year, we seek feedback from our readers to help us improve InfoQ. Would you mind spending 2 minutes to share your feedback in our short survey? Your feedback will directly help us continually evolve how we support you.

Take the Survey

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.