DevTools: State of the Union 2022

TL;DR

A comprehensive overview of the new features in Chrome DevTools, including design tools, debugging enhancements, performance analysis updates, and automation capabilities.

Transcript

[MUSIC PLAYING] JECELYN YEEN: This talk is for the 99% of you who are working on the web. Whether you are working on web design, development, performance analysis, or test automation, we have got you covered. I am Jecelyn, the developer advocate for the Chrome DevTools team. I will share with you some exciting updates on design and debugging tools ... Read More

Key Insights

• 🎨 Chrome DevTools offers powerful design tools, including responsive layout editing and CSS container queries, to help developers create modern and adaptive web designs.
• 👻 The new cascade layer feature in DevTools allows developers to define multiple layers of styles and prioritize their application, reducing the need for importance declarations.
• 💟 Debugging tools in DevTools have been enhanced, with features like WebSocket request throttling, improved CORS error debugging, and support for redeclarations in the JavaScript Console.
• 🤩 Performance analysis has become more user-friendly with the addition of the Performance Insights panel, which provides actionable feedback on key metrics like page load, interactivity, and visual stability.

Questions & Answers

Q: How can I use responsive layout editing in Chrome DevTools?

In Chrome DevTools, you can use the CSS grid, media queries, and the cascade layer to create responsive layouts. You can inspect and modify the layout easily by changing grid areas or grid-row positions.

Q: What are CSS container queries and how can I use them?

CSS container queries allow you to modify elements based on their container size. In DevTools, you can inspect container queries and toggle overlays to see how elements respond to different container sizes.

Q: How can I debug WebSocket requests and Cross-Origin Resource Sharing (CORS) errors in Chrome DevTools?

In the Network panel, you can now throttle WebSocket requests and identify CORS errors. DevTools also provides buttons to locate corresponding network requests and understand the issues causing CORS errors.

Q: How does the Recorder panel in Chrome DevTools help with automation?

The Recorder panel allows you to record, replay, and measure user flows. You can set timeouts between steps, define custom selectors, import/export recordings, and even convert recordings to Cypress or Puppeteer test scripts.

Key Insights:

• Chrome DevTools offers powerful design tools, including responsive layout editing and CSS container queries, to help developers create modern and adaptive web designs.
• The new cascade layer feature in DevTools allows developers to define multiple layers of styles and prioritize their application, reducing the need for importance declarations.
• Debugging tools in DevTools have been enhanced, with features like WebSocket request throttling, improved CORS error debugging, and support for redeclarations in the JavaScript Console.
• Performance analysis has become more user-friendly with the addition of the Performance Insights panel, which provides actionable feedback on key metrics like page load, interactivity, and visual stability.
• The Recorder panel in DevTools enables developers to automate user flows and export recordings as Cypress or Puppeteer test scripts, making it easier to test and validate web applications.

Summary & Key Takeaways

• The talk covers various updates to Chrome DevTools, including design tools like responsive layout editing, CSS container queries, and the new cascade layer feature.

• They also discuss new debugging tools such as WebSocket request throttling, improved Cross-Origin Resource Sharing (CORS) error debugging, and enhanced JavaScript Console features.

• The talk highlights performance tooling improvements, including the new Performance Insights panel and a Developer Preview of the Recorder panel for recording, replaying, and measuring user flows.