The forthcoming Chrome 85 release in August includes style editing for CSS-in-JS frameworks, Lighthouse 6, support for new ES2020 features, and several other helpful additions for web developers.
While CSS-in-JS remains a polarizing approach to development, it has gained adoption in the React ecosystem. Most CSS-in-JS frameworks leverage the CSS Object Model (CSSOM) to construct styles. Chrome version 73 added constructable stylesheets to support seamless reusable styles that work with the Shadow DOM portion of the web components specification.
With Chrome 85, DevTools users can now edit styles added using the CSSOM, making it possible for developers to modify styles within the browser to review the immediate impact of style changes.
Chrome 85 also includes Lighthouse version 6, which consists of a series of new web performance metrics including the largest contentful paint (LCP), cumulative layout shift (CLS), and total blocking time (TBT) to provide even more insight into the performance of a website. The LCP metric replaces the now deprecated First Meaningful Paint (FMP) metric. With Lighthouse 6, a new formula of weighted metrics gets used to generate lighthouse performance scores. Lighthouse 6 also adds an unused JavaScript audit, eight new accessibility audits, and numerous other improvements.
With recent ECMAScript additions including optional chaining, private class fields, and nullish coalescing, the Chrome 85 DevTools now supports this syntax in the console and includes accurate syntax highlighting in the sources tab. Service worker support also benefits from respondWith events in the network panel.
The Chrome 85 DevTools release provides bytecode offset information for working with WebAssembly resources, making it clearer when viewing binary data and making it easier to reference runtime locations when debugging WebAssembly issues.
Several other refinements exist in the Chrome 85 DevTools release including app shortcut warnings, performance panel updates, and other cosmetic improvements. Developers are encouraged to switch to the Chrome Canary channel to leverage these features now.
Chrome DevTools provides the foundation for DevTools in most Chromium-based browsers. Chrome DevTools continues to evolve to support new standards, patterns, pain points, and best practices to help developers build efficient web apps. DevTools gets included with each Google Chrome release. Community feedback is encouraged for all new DevTools features.
