English versionEN

Supercharge Your Debugging With the New Features in Chrome Devtools

Chrome DevTools just got a turbo boost! The Chrome DevTools team has been releasing new features at a furious rate over the past year, including a complete Performance Panel overhaul with real-time Live Metrics and AI-powered Insights that'll expose bottlenecks you never knew existed.

Forget tedious documentation searches and forum hunts; now, AI assists you directly within the Elements, Performance, Network and Sources panels, keeping you in the flow. Use the new alignment and collaboration tools to easily share your observations and debugging wizardry with your team and stakeholders,

We'll unleash the full potential of these game-changing features, revealing hidden gems and shortcuts that'll transform your debugging workflow from a slog to a supercharged sprint. Get ready to code faster, debug smarter, and build experiences that fly.

This talk has been presented at JSNation 2025, check out the latest edition of this JavaScript Conference.

FAQ

The live metrics screen is a feature in the Chrome DevTools performance panel that provides real-time performance data as you interact with a webpage. It is centered around the three core web vitals: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), and INP (Interaction to Next Paint).

AI assistance in Chrome DevTools provides insights and suggestions for improving webpage performance. It uses AI to interpret performance data, suggest fixes, and even generate code patches. The AI features are available from Chrome version 137 and require user opt-in.

Core Web Vitals are a set of metrics introduced by Google to measure and summarize webpage performance. They include LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), and INP (Interaction to Next Paint), and are used to assess loading, stability, and responsiveness of web pages.

Developers can use the performance panel in Chrome DevTools to pull in real user data from the Chrome User Experience Report (Crux) and compare it with local metrics. This allows developers to see how their performance metrics align with what real users experience.

Yes, AI in Chrome DevTools can suggest and generate code patches to fix issues. These changes are temporary unless saved to a local workspace, which can be done if the project is connected to DevTools.

The AI assistance panel helps developers understand and resolve performance issues by providing detailed explanations and suggested actions. It offers context-sensitive help and can interact with the performance trace to provide deeper insights.

The performance panel has been reimagined to make it easier to find and fix performance issues. Improvements include the introduction of the live metrics screen, which shows real-time performance data, and the ability to compare local metrics with real user data from the Chrome User Experience Report (Crux).

The Insights sidebar combines performance insights from Lighthouse with the detailed data from the performance trace. It prioritizes insights for developers to review and allows for interactive exploration of performance data.

To use AI features in Chrome DevTools, developers need to be logged in and explicitly enable the features in the settings. These AI features are designed to assist in debugging and understanding code, and feedback from users is encouraged.

deep dive

Barry Pollard

Ewa Gasperowicz

29 min

12 Jun, 2025

Comments

Video Summary and Transcription

Eva and Bari introduce the complexity of web development and emphasize the evolving nature of DevTools, discussing productivity gains through new features. The talk covers performance debugging enhancements and user-friendly changes in the performance panel. Live metrics screen offers real-time insights, integrating real user data for performance comparison. Configuring DevTools for accurate user emulation and leveraging performance trace capabilities for debugging. Enhancing user experience with AI insights and visual assistance, setting up AI workspace in DevTools. Addressing data privacy concerns and AI usage control. Chrome DevTools API and Gemini model enhancements, AI features specific to Chrome, web sockets throttling, and AI agent probing in performance context.

Available in Español: Supercarga Tu Depuración Con las Nuevas Características en Chrome Devtools

Video transcription and chapters available for users with access.

Available in other languages:

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

A Guide to React Rendering Behavior

React Advanced 2022

25 min

A Guide to React Rendering Behavior

Top Content

Mark Erikson

Replay.io

This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.

react performance deep dive react rendering

React Concurrency, Explained

React Summit 2023

23 min

React Concurrency, Explained

Top Content

Watch video: React Concurrency, Explained

Ivan Akulov

Google Developer Expert, Web Performance Consultant, Netherlands

React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.

react performance best practices react 18 deep dive react concurrent mode

If You Were a React Compiler

React Summit US 2024

26 min

If You Were a React Compiler

Top Content

Tony Alicea

Tony is a bestselling Udemy and Pluralsight author, known for his online courses such as "JavaScript: Understanding the Weird Parts"

In this talk, the speaker aims to build an accurate understanding of how the new React compiler works, focusing on minimizing re-renders and improving performance. They discuss the concept of memoization and how it can be used to optimize React applications by storing the results of function calls. The React compiler automates this process by analyzing code, checking dependencies, and transpiling JSX. The speaker emphasizes the importance of being aware of memory concerns when using memoization and explains how the React compiler detects changes in function closure values. They also mention the Fibre Tree, which drives the reconciliation process and helps optimize performance in React. Additionally, the speaker touches on JSX transpilation, compiler caching, and the generation of code. They encourage developers to understand the code generated by the compiler to optimize specific sections as needed.

react deep dive react 19

Making Magic: Building a TypeScript-First Framework

TypeScript Congress 2023

31 min

Making Magic: Building a TypeScript-First Framework

Top Content

Daniel Roe

Leads the Nuxt core team

Daniel Rowe discusses building a TypeScript-first framework at TypeScript Congress and shares his involvement in various projects. Nuxt is a progressive framework built on Vue.js, aiming to reduce friction and distraction for developers. It leverages TypeScript for inference and aims to be the source of truth for projects. Nuxt provides type safety and extensibility through integration with TypeScript. Migrating to TypeScript offers long-term maintenance benefits and can uncover hidden bugs. Nuxt focuses on improving existing tools and finds inspiration in frameworks like TRPC.

typescript frameworks vue nuxt.js deep dive builders and founders

Inside Fiber: the in-depth overview you wanted a TLDR for

React Summit 2022

27 min

Inside Fiber: the in-depth overview you wanted a TLDR for

Top Content

Matheus Albuquerque

Staff Software Engineer @Medallia • Google Developer Expert • International Speaker • Technical Reviewer

This Talk explores the internals of React Fiber and its implications. It covers topics such as fibres and units of work, inspecting elements and parent matching, pattern matching and coroutines, and the influence of coroutines on concurrent React. The Talk also discusses effect handlers in React, handling side effects in components, and the history of effect handlers in React. It concludes by emphasizing the importance of understanding React internals and provides learning resources for further exploration.

react react 18 deep dive

Deep Diving on Concurrent React

React Advanced 2022

29 min

Deep Diving on Concurrent React

Matheus Albuquerque

Staff Software Engineer @Medallia • Google Developer Expert • International Speaker • Technical Reviewer

The Talk discussed Concurrent React and its impact on app performance, particularly in relation to long tasks on the main thread. It explored parallelism with workers and the challenges of WebAssembly for UI tasks. The concepts of concurrency, scheduling, and rendering were covered, along with techniques for optimizing performance and tackling wasted renders. The Talk also highlighted the benefits of hydration improvements and the new profiler in Concurrent React, and mentioned future enhancements such as React fetch and native scheduling primitives. The importance of understanding React internals and correlating performance metrics with business metrics was emphasized.

react concurrent rendering react 18 deep dive

Workshops on related topic

React Hooks Tips Only the Pros Know

React Summit Remote Edition 2021

177 min

React Hooks Tips Only the Pros Know

Top Content

Featured Workshop

Maurice de Beijer

The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.

react best practices react hooks deep dive react 18 hooks react profiler

Designing Effective Tests With React Testing Library

React Summit 2023

151 min

Designing Effective Tests With React Testing Library

Top Content

Featured Workshop

Josh Justice

React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn

react testing best practices deep dive react testing react testing library test driven development react

Advanced TypeScript types for fun and reliability

TypeScript Congress 2022

116 min

Advanced TypeScript types for fun and reliability

Workshop

Maurice de Beijer

If you're looking to get the most out of TypeScript, this workshop is for you! In this interactive workshop, we will explore the use of advanced types to improve the safety and predictability of your TypeScript code. You will learn when to use types like unknown or never. We will explore the use of type predicates, guards and exhaustive checking to make your TypeScript code more reliable both at compile and run-time. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
Are you familiar with the basics of TypeScript and want to dive deeper? Then please join me with your laptop in this advanced and interactive workshop to learn all these topics and more.
You can find the slides, with links, here: http://theproblemsolver.nl/docs/ts-advanced-workshop.pdf
And the repository we will be using is here: https://github.com/mauricedb/ts-advanced

best practices typescript deep dive