• New Features in Chrome 88 Devtools
  • Guy Nesher
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Hoarfroster
  • Proofreader: Chorer

The recently released Chrome 88 includes major updates to Chrome DevTools, including improved web debugging, experimental CSS Flexbox debugging tools, improved framework details views, new WASM debugging capabilities, and overall performance improvements.

The Network TAB provides three new features designed to simplify the debugging process:

  1. We can now right-click on a specific request and selectDuplicate values(Copy value), directly fromnetwork(Network) TAB.
  2. Now you can selectCopy stack trace(Copy stack trace) option to copy the stack trace of the network initiator from a single network request.
  3. Cross-origin-resource-sharing errors can now be correctly flagged on the network view.

CSS Flexbox is a powerful design tool, but because it operates on two axes, it is often difficult to debug. To simplify the debugging process, Chrome provides two new flags. The first flag appears on the element hierarchy view and marks the element with display: Flex.

The second flag is a context-sensitive alignment indicator based on the following flexbox properties:

  • flex-direction
  • align-items
  • align-content
  • align-self
  • justify-items
  • justify-content

Directions based on the following attributes are also taken into account:

  • flex-direction
  • direction
  • writing-mode

To use Flexbox debugging, developers need to enable it under the Settings > Experiments TAB.

Chrome 88 Devtools also provides an improved frame details view, including additional information about the status of cross-domain isolation information, specific information about frame Web workers, and the ability to discover which frame triggered another window to open.

Chrome 88 also aligns Wasm debugging with existing JavaScript debugging capabilities. When code execution is paused at the break point, a developer can hover over a variable to see its current value or evaluate it in the console.

Finally, in terms of JavaScript compilation speed, DevTools is now nearly 40% faster to start because of the reduced performance overhead associated with serialization, parsing, and deserialization during 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 will continue to improve DevTools and provide new features every time a new version of Chrome is released. Developers can keep up with the latest features on the Google Developer site and discuss possible features, updates, and bugs in the mailing list.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.