Chrome 128 is rolling out! Here's what's new in DevTools
🕵🏼 Console insights with Gemini is available in Europe
🛜 Enhanced network trace in Performance
📝 API to customize performance tracks
... and more!
🌅 Now in Beta: Inactive CSS!
We show you which CSS properties aren’t affecting the selected element and why.
(Has this saved you time already? We love hearing from you and seeing screenshots!)
—
@violasong
It's almost here: CSS grid tooling! 🤘
Over the last couple of months, we teamed up with
@EdgeDevTools
to work on this highly-requested feature. Here is a sneak preview.
We have many more ideas on how to make grids easier and more accessible in the future – stay tuned!
Now you can right click on a node in Elements panel and capture the node screenshot! 📸
Like it? Freshly landed on Chrome Canary. Update and give it a try! 🔥
We realize how cluttered warnings on the console can be.
In Chrome 84, we are starting to organize warnings in the new Issues tab, with actionable guidance and links to resources within DevTools.
We hope that this helps you find and fix problems.
Initial DWARF support has landed in Chrome DevTools!
It means that you can resolve stack traces, set breakpoints and step-in/-over source code in C/C++/Rust natively, without generating source maps.
Tip: Run getEventListeners(element) in the Console to get an array of that element's event listeners. Passing $0 (like in the screenshot) returns the listeners for whatever element you've selected in the DOM Tree of the Elements panel.
🌟 Introducing the new Recorder panel 🌟
You can now record, replay and measure user interactions with
@ChromeDevTools
.
See it in action - ordering coffee. ☕️
Learn more about this preview feature (available in Chrome Canary now):
We are planning to add adorners to the DOM tree in the Elements Panel for tooling around CSS grid. We have been wondering for what other features we could use adorners, and created a few mocks.
Any opinions or ideas?
What's New in DevTools in Chrome 85? ✨
• Style editing for CSS-in-CSS
• Lighthouse 6
• Support for new JavaScript features
Find out more great new features and fixes here 👉🏼
How we migrated
@ChromeDevTools
(150k lines of code) to TypeScript.
@TimvdLippe
will describe our 13-month journey moving away from the Closure Compiler type checker.
This is the 3rd post in our architecture refresh series!
👉🏼
In collaboration with Mozilla, we’re proud to announce Puppeteer v2.1.0! 🔥
The new version works with Chromium 80 and now supports official Firefox binaries as well.
Woo-hoo! 🎊 Official
@Cypress_io
extension to export user flows as Cypress Tests.
Also, Recorder will auto-pick "data-cy" as the default selector (if it's defined) out of the box.
Seamless process to create Cypress Tests!
👉🏼
📜
Do you have a set of console commands that you repeat often? You don't have to go through console history for that!
You can execute snippets in the command menu (Cmd+P or CTRL+P) with ! as prefix.
I've been working on DevTools for 3 years and just learned yesterday that this little device orientation model thing is interactive 🤯 ---
@kaycebasques
New tutorial: Optimize Website Speed. A hands-on tutorial for learning how to use DevTools to find ways to make your sites faster. Special guest appearance by Tony the cat.
Ouch, bitten by CORS errors. With the new prototype, you can override the "Access-Control-Allow-Origin header" locally to see if the proposed solution (in console) works!
Share your thoughts in our RFC - we want your feedback!
👉🏼
#ChromeDevTools
#RFC
Did you notice that we redesign the breakpoint and logpoint in Chrome Canary? 👀
It's much easier to differentiate them now. Comment and let us know if you like it! 😃
Don't you think these colors look good in both light and dark theme? 😉
💡 In source code, stop using the old rgb()/hsl() CSS color syntax with commas.
Get used to the modern comma-free CSS color syntax, supported in all modern browsers.
Why? Upcoming new features such as lab(), lch(), and color() use the same syntax (and don’t work with commas).
New RFC ✨ - Override HTTP response headers
Override, reload the page and viola! Experiment response header values locally without changing server config. Useful to test CORS, Permissions-Policy & more.
Try out the prototype and send us your feedback 👉
🚀 Discover how leading frameworks & build tools like
@nuxt_js
,
@angular
,
@vite_js
, and
@RollupJS
supercharge your debugging experience with the "x_google_ignoreList" source maps extension.
Dive into our article:
On Friday we released a video version of our "Optimize Site Speed" tutorial. Covers the Audits panel, the Coverage tab, request blocking, and the Performance panel.
Vid:
Doc:
What's new in DevTools in Chrome 88? ✨
🕔 New CSS angle swatch
🖼 Emulate AVIF and WebP images
🗄 Simulate storage quota size
Try in Chrome Canary today!
Full list of goodies 👉🏼
⚠️ Spoiler alert! A new Performance Insights panel is coming in Chrome Canary. 👀
It's experimental, so... give it a try and share with us your thoughts!
[1/2] Yes, we hear you, we are working on restoring the old filter bar in Network panel to Chrome 121 (stable).
Track the progress here:
In the meantime...
Now in Firefox Dev Edition: When inspecting a Flexbox item, the sidebar shows a diagram illustrating basis, shrink/grow, and min/max. Below is a step-by-step description of how the item got its size. We'd love your feedback on this feature!
—
@violasong
New in Chrome 77: Lighthouse 5.1 in the Audits panel. Includes a new audit for checking that a PWA can be added to iOS homescreen, a diagnostic audit that reports request counts and file sizes broken down by categories like scripts, and a new speed metric.
What's new in DevTools in Chrome 87? ✨
🤩 New CSS Grid debugging tools!!!
🔐 New WebAuthn tab
⚒ Move tools up and down
📟 New Computed sidebar pane
Try in Chrome Canary today!
Full list of goodies 👉🏼
🥁 *drumroll* Introducing the new
#ChromeDevTools
engineering blog!
The first post by
@TimvdLippe
will take you through our journey of migrating DevTools from legacy custom module format to JavaScript modules.
Stay tuned for more engineering content! 🤩
Now in Chrome 64: Select an element in the DOM Tree, and the new
#Accessibility
pane shows you that element's position in the accessibility tree, as well as its ARIA attributes and computed properties.
Chrome 87 is here! 🎉
Try inspect CSS Grid with our new debugging tools! 📐
On top of that, with just 1 click, DevTools now detect all color contrast issues of your page (experimental).
Excited? Update your Chrome today!
Full list of what's new 👉🏼
New in Chrome 71: Store DOM nodes as global variables. Also available from the Console when you right-click an expression result that evaluated to a node.
Coming soon in Chrome 66: The Preview tab pretty-prints minified resources by default. You can still inspect the original, minified code via the Response tab.
Coming to Chrome 65: Local Overrides. Make a tweak and DevTools saves the changed file to a location of your choosing. On next load, DevTools loads the local file rather than going to the network.
Chrome 85 is here! 🎉
Be sure to update your Chrome and audit your page with the latest Lighthouse (with Core Web Vitals, ) in DevTools and more!
Full list of What's new in DevTools 👉🏼
✨ Qué hay de nuevo en DevTools (Chrome 92) ✨
Editor de CSS Grid, soporte para la redeclaración de 'const' en la consola, visor de orden de los elementos y más!
¡Gracias
@midudev
por la traducción al español!
👉🏼
✨ What's New in DevTools in Chrome 90?
📐CSS flexbox debugging tools (woohoo!)
⚡️ Core Web Vital overlay (View performance metrics on screen real-time)
🔑 New Trust Tokens pane
💽 Improved PWA tooling
... and more. Try in Chrome Canary today!
👉🏼
Ever wanted to capture a snapshot of just a part of a web page? Thanks to
@JecelynYeen
we now have a context menu item in the Elements panel to do exactly that!
Chrome 96 is rolling out now! Try out these new features in DevTools:
🌈 The long-awaited CSS Overview panel is now available for preview!
🐞 Restored and improved CSS length edit and copy experience
Read more 👉🏼
Chrome DevTools helps you debug SameSite cookie issues. In Chrome 80, the Network Panel offers a filter for requests that were blocked from setting cookies. Reload the page while DevTools is open to see which cookies were blocked, and why.
Web guru
@addyosmani
recently put out an awesome article on JS startup optimization that you should totally check out. Or not. I'm a dev tool. Not a cop.
🔥 Chrome 98 is here! Update now to use these new DevTools features:
🌴 Toggle to view full-page accessibility tree
🕣 Set timeout to wait for record / replay user flow
📦 New bfcache tab
📺
👉🏼
✨ TGIF! New
#engineering
blog post. 😃
CSS-in-JS is different from regular CSS, and you can use DevTools to edit both!
In this post,
@orkon
will explain:
▶️ What is CSS-in-JS
▶️ How we implement CSS-in-JS authoring in DevTools
👉🏼
What's new in DevTools in Chrome 86? ✨
📹 New Media panel
👋🏽 Goodbye Issues warning bar
🤖 3 new emulations
📸 Capture node screenshot
Try in Chrome Canary today!
Full list of goodies 👉🏼
New in Chrome 77: Copy a DOM node's styles. After iterating on styles, right-click the node in the DOM Tree > Copy > Copy styles to copy your changes to your clipboard. Thanks
@argyleink
and VisBug for the inspiration.
puppeteer-firefox, an experimental project with 90% support that lets you automate
@firefox
with the same
@nodejs
API that you use to automate
@googlechrome
. Powered by the
@ChromeDevTools
Protocol.
Talk:
NPM: