Original text: blog.logrocket.com/whats-new-i… “> < p style =” max-width: 100%; clear: both;

Without a doubt, DevTools is one of the most useful tools we have for developing and testing Web applications. In Chrome 85, DevTools adds several improvements, such as.

  • NetworkOf the panelTimingThe TAB now includesresponseWithEvent, which records the service workerfetchTime between event handler run and promise completion (issue#1066579)
  • In the Console Settings, the Group similar toggler now works for duplicate messages, and the “Selected context only” setting in the Console Settings is now stuck (issue#1082963 and #1055875).
  • The Manifest pane now displays a warning of application shortcuts if the application icon is incorrectly sized or not square (Issue #955497)
  • Display calculation panes consistently across multiple viewport sizes (issue#1073899)

These are all beneficial changes, but in this article I’ll review the changes related to style editing and new JavaScript features, as well as the changes to the Source and Performance panels.

Chances are, by the time you read this, Chrome 85 will be the mainstream stable release. At the time of this writing (July 2020), you can only get Chrome 85 by downloading Chrome development. You can learn more about Chrome releases on the Chrome Release Channel page.

Style editing for CSS-in-JS framework

Editing code or styles in place and seeing changes in real time is one of the most useful features of DevTools.

When using CSS styles, you can choose to programmatically manipulate CSS rules using the CSS Object Model (CSSOM) API.

const style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule('#myDiv {background-color: blue; color: yellow}');
Copy the code

However, DevTools does not allow you to edit styles created this way.

This has changed in Chrome 85. Starting with this release, you can edit styles built using the CSSOM API, Especially in the use of CSSStyleSheet. InsertRule, CSSStyleSheet. DeleteRule, CSSStyleDeclaration. SetProperty and CSSStyleDeclaration removeProper Ty.

This also works with libraries like LitElement (try this example) or React Native for Web (try this example).

Constructable Stylesheets allows you to create Stylesheets by calling the CSSStyleSheet() constructor, and add and update stylesheet rules by replacing () and replaceSync().

const sheet = new CSSStyleSheet();
sheet.replaceSync('#myDiv {background-color: blue; color: yellow}');
document.adoptedStyleSheets = [sheet];
Copy the code

Support for new JavaScript features

Chrome uses Acorn to parse JavaScript in the DevTools console.

In Chrome 85, Acorn has been updated to version 7.3.0, which, among other improvements, adds support for the optional chain operator (? .) syntax support.

Use the optional chain operator instead of having a piece of code like the following.

if (user && user.name && user.name.last)
 lastName = user.name.last.toUpperCase();
Copy the code

You can just have this.

lastName = user? .name?.last?.toUpperCase();Copy the code

But before Chrome 84, the auto-completion of this operator was broken.

Now, property auto-completion in the console can use the operator (User? .). , just as you would use user. Or user[.

The other two changes relate to syntax highlighting in the sources panel.

Prior to Chrome 84, private fields and methods were displayed in white text. In some cases, even the rest of the line appears white.

The Sources board uses CodeMirror to display the code.

CodeMirror has been updated to version 5.54.0 in Chrome 85. This version improves the parsing of private attributes and class fields.

The final change to the new JavaScript feature concerns the Nullish coalescing operator.

Before Chrome 85, pretty print formats were broken when this operator was included in code.

But now it’s fixed and the format works.

More on the changes to the Sources panel

There are other useful changes to the Sources panel.

Now we can copy or cut the current line in the editor, even if you don’t select anything.

To do this, place your cursor at the end of the line you want to copy or cut, and then press the appropriate keyboard shortcut.

Another improvement is that if you are using WebAssembly files, the editor now displays bytecode (hexadecimal) offsets to show the source location in the Wasm module, rather than the line-based location used for other formats.

Finally, ICONS for breakpoints, conditional breakpoints, and log points have been added.

They look like this:

Again, this is what they look like in dark mode:

Now they are more colorful:

I think this improves the readability of breakpoint ICONS, especially when dark mode is enabled:

The Performance Performance panel is updated

There are two important changes in the Performance panel of DevTools.

Regarding the first, prior to Chrome 84, DevTools did not display cache information if a given script was not cached.

The cache information is now always displayed in the Summary TAB, showing why the cache did not occur.

The second change has to do with the time displayed in the recording rules.

In previous versions, the time was displayed based on when the recording began.

Note the time stamp shown on FCP on page 2, 8907 ms. This is the time when the event occurs because the recording begins.

Now, time is relative to where the user navigates.

In the example above, the FCP timestamp for the second page is 901.1 milliseconds, which is when the event occurred after the page loaded.

conclusion

In this article, we review the most important changes to DevTools in Chrome 85. I didn’t go back in depth to the four changes mentioned at the beginning of this post, but you can learn more about them in this article (and feel free to give feedback to the development team).

The post also mentions that the Lighthouse panel has been updated to use Lighthouse 6.0 in Chrome 85. Luckily, Lighthouse 6.0 was released in Chrome 84, so we didn’t have to wait for the next release. Check out this article or the release notes for all the changes that version 6.0 brings.

Finally, keep in mind that you can download Chrome Canary or Chrome dev to access the latest DevTools features.