Jecelyn Yeen
Developer advocate working on Chrome DevTools at Google.
A look back in time: the evolution of test automation
A journey into the evolution of test automation on the web.
The ignoreList source map extension
ignoreList source map extension
Improve debugging experience in Chrome DevTools with the ignoreList source map extension.
Inspect and debug HD and non-HD colors with the Color Picker
Learn how to use the Color Picker in Elements > Styles to inspect and debug HD and non-HD colors.
Customize the Recorder with extensions
Customize and integrate the Recorder by installing extensions.
What's New In DevTools (Chrome 110)
Clearing Performance panel on reload, view and highlight the code in the Recorder, and more.
What's New In DevTools (Chrome 109)
Copy step as script in the Recorder, actual function names in performance’s recordings, and more.
What's New In DevTools (Chrome 108)
Hints for inactive CSS properties, new XPath and text selectors in the Recorder, and more.
Customize and automate user flows beyond Chrome DevTools Recorder
Learn how to customize and automate user flows beyond Chrome DevTools Recorder.
What's New In DevTools (Chrome 107)
Customize keyboard shortcuts, highlight C/C++ objects in the Memory Inspector and more.
What's New In DevTools (Chrome 106)
Better support for modern web debugging, LCP timings breakdown in the Performance Insights, and more.
What's New In DevTools (Chrome 105)
Supports step-by-step replay and mouse over events in the Recorder, LCP in the Performance insights panel and more.
What's New In DevTools (Chrome 104)
Restart frame during debugging, slow replay options in the Recorder panel, and more.
Inspect and debug CSS container queries
Learn how to use Chrome DevTools to inspect, modify, and debug CSS container queries.
What's New In DevTools (Chrome 103)
Record double-click and right-click events, new options to measure user flow in Lighthouse and more.
What's New In DevTools (Chrome 102)
New Performance insights panel, shortcuts to emulate light/dark themes, and more.
What's New In DevTools (Chrome 101)
Import and export user flow as JSON, support hwb() colors, view cascade layers in the Styles pane and more.
Performance insights: Get actionable insights on your website's performance
Get actionable insights on your website's performance with the Performance insights panel.
What's New In DevTools (Chrome 100)
View and edit @supports at rules, rename and customize recording’s selector, and more.
What's New In DevTools (Chrome 99)
Throttling WebSocket requests, new Reporting API pane, console styling and more.
Inspect and debug CSS flexbox layouts
Learn how to use Chrome DevTools to inspect, modify and debug CSS flexbox layouts.
What's New In DevTools (Chrome 98)
Full-page Accessibility tree, more precise changes in the Changes tab, and more.
Record, replay, and measure user flows
Record, replay, measure user flows, and edit their steps with the Recorder panel.
What's New In DevTools (Chrome 96)
New CSS Overview panel, emulate CSS prefers-contrast media and Chrome’s auto dark mode, and more.
CSS Overview: Identify potential CSS improvements
Identify potential CSS improvements with the CSS Overview panel.
What's New In DevTools (Chrome 95)
New CSS length authoring tools, hide issues in the Issues tab, improved the display of properties, and more.
What's New In DevTools (Chrome 94)
Use DevTools in your preferred language, new Nest Hub devices, new CSS container queries badge and more.
WebDriver BiDi - The future of cross-browser automation
Getting to know what is WebDriver BiDi and why it is the future of cross-browser automation
What's New In DevTools (Chrome 93)
Editable CSS container queries, web bundle preview, better string handling in the Console and more.
What's New In DevTools (Chrome 92)
CSS grid editor, support for const redeclaration in console, source order viewer and more.
What's New In DevTools (Chrome 91)
Web vitals information pop up, visualize CSS scroll-snap, new Memory inspector and more.
What's New In DevTools (Chrome 90)
Debugging support for CSS Flexbox, performance heads-up display on page, issues tab updates and more.
What's New In DevTools (Chrome 89)
Debugging support for Trusted Types violations, capture node screenshot beyond viewport, new Trust Tokens tab for network requests and more.
What's New In DevTools (Chrome 88)
New CSS angle visualization tools, emulate unsupported image types and storage quota, new Web Vitals lane and more.
What's New In DevTools (Chrome 87)
New CSS Grid debugging tools, Web Authn tab, moveable tools and Computed sidebar pane.
What's New In DevTools (Chrome 86)
New Media panel, capture node screenshot, Issues tab updates, emulate missing local fonts, inactive users and prefers-reduced-data.
Media: View and debug media players information
Use the Media Panel to view information and debug the media players per browser tab.
Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory.
Use the Memory inspector to inspect an ArrayBuffer, TypedArray, or DataView in JavaScript as well as WebAssembly.Memory of C++ Wasm apps.
What's New In DevTools (Chrome 85)
Style editing for CSS-in-JS frameworks, Lighthouse 6.0, new JavaScript features, and more.
Customize DevTools
A list of ways you can customize Chrome DevTools: Change theme, placement, panel order, language, and more.