In this post, I’m going to review the changes related to style editing and new JavaScript features, as well as changes in the source and performance panels.

There’s no doubt DevTools is one of the most useful tools we could use when developing and testing web applications. In Chrome 85, DevTools added several improvements, such as:

• The timing tab of the network panel now includes respondWith events, which record the time before the service worker fetch event handler runs to the time when the promise is settled (issue #1066579)
• In the console settings, the group similar toggle now applies to duplicate messages and the selected context only setting in console settings is now persisted (issues #1082963 and #1055875)
• The manifest pane now shows warnings for app shortcuts if the app icon doesn’t have the correct size or is not square (issue #955497)
• Consistent display of the computed pane across multiple viewport sizes (issue #1073899)

These are helpful changes, but in this post, I’m going to review the changes related to style editing and new JavaScript features, as well as changes in the source and performance panels.

Most likely, by the time you read this, Chrome 85 will be the mainstream, stable version. At the time of this writing (July 2020), you can only get Chrome 85 by downloading the development version of Chrome. You can learn more about Chrome’s release versions on the page about Chrome release channels.

Style editing for CSS-in-JS frameworks

Editing code or styles in-place to see the changes in real-time is one of the most useful features of DevTools.

When working with CSS styles, you have the option to manipulate CSS rules programmatically 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}');

However, DevTools didn’t allow you to edit styles created this way.

This has changed in Chrome 85. Starting from this version, you can edit styles built with the CSSOM API, in particular, when using CSSStyleSheet.insertRule, CSSStyleSheet.deleteRule, CSSStyleDeclaration.setProperty, and CSSStyleDeclaration.removeProperty.

This also works for libraries such as LitElement (try it with this example) or React Native for web (try it with this example).

The styles are editable even if they were inserted after DevTools are opened, and this also works with Constructable Stylesheets(at this time, only available in Chrome).

Constructable Stylesheets allows you to create stylesheets by invoking the CSSStyleSheet() constructor, adding and updating stylesheet rules with replace() and replaceSync():

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

Try it here and here.

#chrome #devtools #javascript #developer