Unlock the Power of DevTools in Chrome 85

Revolutionizing Web Development and Testing

Chrome 85 has brought significant improvements to DevTools, making it an even more powerful tool for web developers and testers. From style editing to new JavaScript features, and updates to the Source and Performance panels, this latest version is packed with exciting changes.

Edit Styles with Ease

One of the most useful features of DevTools is the ability to edit code and styles in real-time. With Chrome 85, you can now edit styles created using the CSS Object Model (CSSOM) API, including those built with CSS-in-JS frameworks like LitElement and React Native for web. This feature is particularly useful when working with Constructable Stylesheets, allowing you to create and update stylesheet rules with ease.

/* Example of editing styles using CSSOM API */
const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync('body { background-color: #f2f2f2; }');

New JavaScript Features Unleashed

Chrome 85 brings support for the optional chaining operator (?.), which enables you to write more concise and expressive code. The Acorn parser has been updated to version 7.3.0, providing better syntax highlighting and auto-completion for this operator. Additionally, private fields and methods are now displayed correctly in the Sources panel, and the nullish coalescing operator is properly formatted.

// Example of using optional chaining operator
const user = { name: 'John', address: { street: '123 Main St' } };
console.log(user.address?.street); // Output: "123 Main St"

Enhanced Sources Panel

The Sources panel has received several updates, including the ability to copy or cut the current line even when no text is selected. WebAssembly files now display bytecode offsets, making it easier to work with Wasm modules. Moreover, new icons for breakpoints, conditional breakpoints, and log points have been introduced, improving readability, especially in dark mode.

Performance Panel Updates

Two significant changes have been made to the Performance panel. Firstly, caching information is now always displayed in the summary tab, providing valuable insights into script caching. Secondly, times shown in the rules of recordings are now relative to page navigation, giving you a more accurate understanding of your application’s performance.

• Caching information is now always displayed in the summary tab
• Times shown in the rules of recordings are now relative to page navigation

Get Ready to Take Your Development to the Next Level

With Chrome 85, DevTools has become an even more powerful tool for web developers and testers. By leveraging these new features and updates, you can streamline your development workflow, improve your application’s performance, and deliver exceptional user experiences.