Can I DevTools?

Inflation strikes again, but this time you might actually like it! The console already had $() and $$(), @FirefoxNightly, now has $$$(), which returns an array of nodes matching the selector, including those in the ShadowDOM. This should make working with Web Components easier 🙂

Something freshly designed for a client 💫

Firefox 131 was released this weeks and we're really excited because it comes with new superpowers for debugging CSS variables and other Inspector improvements: fxdx.dev/firefox-devtoo… #css #webdev

I've implemented a visual preview icon for the text-emphasis-style property of Chrome DevTools. Let me know what other properties you need to add previews for, such as `cursor`, `list-style-type`, etc.

Do you remember when you joined X? I do! #MyXAnniversary

We recently introduced a new Activity Bar that makes it easier to recognize and discover the available Edge DevTools ⭐ Learn more about the all-new Activity Bar, and its icons: msft.it/6010ivcvy

Tips & Tricks #47, by @CanIDevTools open.substack.com/pub/canidevtoo…

@EdgeDevTools @ChromeDevTools canidev.tools/throttle-cpu-s…

"Throttle CPU speed" Can I throttle CPU speed to simulate slower machines? ✅@EdgeDevTools ✅@ChromeDevTools 1⃣Open DevTools > Goto the Performance tab, open Settings using the gear icon and select the "CPU: No throttling" dropdown & choose "4x/6x slowdown." ⬇️ link below

Polypane 17.1 is out! ✨ Smaller release, mostly bug fixes. Get it today! polypane.app/blog/polypane-…

Clear network log ➡️ @ChromeDevTools @EdgeDevTools 1⃣In the "Network" panel, click the "Clear network log" button in the toolbar. 2⃣Or Press "Cmd+K" (Windows/Linux) or "Ctrl+L" (macOS) to clear all the network requests in the table. ⬇️ Link

Microsoft Edge DevTools has a brand-new look! 🥸 Learn more: msft.it/6018iWemA

Tips & Tricks: #45, by @CanIDevTools Link: open.substack.com/pub/canidevtoo…

@ChromeDevTools @EdgeDevTools ⬇️ continue 3⃣ Enter the custom header name, and click Add to add a new column to the Network requests table. 🌐 canidev.tools/add-custom-hea…

Add custom header columns @ChromeDevTools @EdgeDevTools 1⃣In the Network panel, right click on the column headers > Response Headers > Manage Header Columns. 2⃣In the Manage Header Columns popup window, click "Add Custom Header". Enter the custom header name, .. ⬇️ more

Get Event Listeners: Can I get all the event listeners on the page? ✅Chrome ✅Edge ✅Safari 🌐canidev.tools/get-event-list…

@FirefoxDevTools Link: canidev.tools/inspect-custom…

Inspect custom element @FirefoxDevTools ◆ Open the Inspector panel. Custom elements are decorated with the custom badge to make them easier to identify them in the Element tree. ◆ Click the badge to directly jump to the JavaScript source code in the Debugger panel. ⬇️ more

@polypane canidev.tools/copy-img-bgimg

Copy Image as background-image ↳@polypane (v17+) ◆ Right-click on the image, select Copy > Copy as background-image. → Link (see post below)