Can I DevTools?

It is like @caniuse but for the browser devtools, created by @pankajparashar. Subscribe to the newsletter:

[Firefox DevTools @FirefoxDevTools]

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 🙂

[J. Kyorov @j_kyorov]

Something freshly designed for a client 💫

[Firefox DevTools @FirefoxDevTools]

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:

https://t.co/5V4F39oYqh

#css #webdev

[一丝 @yisibl]

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.

[Can I DevTools? @CanIDevTools]

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

[Microsoft Edge Dev @MSEdgeDev]

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:
https://t.co/m6WpBC8SRO

[Can I DevTools? @CanIDevTools]

Tips & Tricks #47, by @CanIDevTools

https://t.co/ZrhINsEZEN

[Can I DevTools? @CanIDevTools]

@EdgeDevTools @ChromeDevTools https://t.co/G66Rk5V8fx

[Can I DevTools? @CanIDevTools]

"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. Browser for web devs @polypane]

Polypane 17.1 is out! ✨

Smaller release, mostly bug fixes. Get it today!
https://t.co/jkNtvjzLut

[Can I DevTools? @CanIDevTools]

https://t.co/olSCw24cZg

[Can I DevTools? @CanIDevTools]

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 Dev @MSEdgeDev]

Microsoft Edge DevTools has a brand-new look! 🥸

Learn more: https://t.co/0R5GtsRoiV

[Can I DevTools? @CanIDevTools]

Tips & Tricks: #45, by @CanIDevTools

Link:
https://t.co/FxNDjFpKck

[Can I DevTools? @CanIDevTools]

@ChromeDevTools @EdgeDevTools ⬇️ continue

3⃣ Enter the custom header name, and click Add to add a new column to the Network requests table.

🌐 https://t.co/4D5GtvNImU

[Can I DevTools? @CanIDevTools]

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

[Can I DevTools? @CanIDevTools]

Get Event Listeners:
Can I get all the event listeners on the page?

✅Chrome ✅Edge ✅Safari
🌐https://t.co/9kD3PhcNL1

[Can I DevTools? @CanIDevTools]

@FirefoxDevTools Link:
https://t.co/dTTqT7QyD8

[Can I DevTools? @CanIDevTools]

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

[Can I DevTools? @CanIDevTools]

@polypane https://t.co/YimGDPsTqT

[Can I DevTools? @CanIDevTools]

Copy Image as background-image
↳@polypane (v17+)

◆ Right-click on the image, select Copy > Copy as background-image.

→ Link
(see post below)