| Website | https://devtoolstips.org |
| Source code | https://github.com/captainbrosset/devtools-tips |
The Selector Stats feature in Edge and Chrome DevTools is now much faster!
The feature lists the most costly CSS selectors in the Perf tool. But it used to slow down the recorded page quite a bit, especially for sites with many CSS rules.
That's no longer the case!
Check out the docs: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/performance/selector-stats
TIL that the most recent Firefox will now show the font licensing information in the inspector. Nice!
There’s something very depressingly emblematic that Chrome Dev Tools’ annoying “Ask AI” sprinkles everywhere include one that pops up and *covers* the Accessibility Tree toggle.
Want to investigate a quick fix in production directly?
No need to change your source file or deploy to a server, you can test your quick fix in DevTools directly!
Learn how: https://devtoolstips.org/tips/en/override-responses-with-files/
The Network panel now allows overriding network request responses with local files.
We now* display fonts metadata (version, designer, vendor, license, …) in @FirefoxDevTools Inspector Fonts panel
* latest @firefoxnightly , `137.0a1 (2025-02-13)`
Create Contextual Console Loggers, by @patrickbrosset (@devtoolstips):
https://devtoolstips.org/tips/en/create-contextual-console-loggers/
Lost in thousands of logs from all parts of your app?
Use the `console.context()` API to create contextualized loggers for each of your subsystems.
You can then filter the Console by typing "context:name-of-component".
➡️ https://devtoolstips.org/tips/en/create-contextual-console-loggers/
Patrick Brosset
Mia (web luddite)
Colin M. Ford
Chris
Firefox Nightly
Nicolas Chevobbe
Frontend Dogma