@CanIDevTools
Account based inIndia
About this account
- Account based in
- India
- Connected via
- Web
Account-level information from X, not a live location or the device used for a specific post.
It is like @caniuse but for the browser devtools, created by @pankajparashar. Subscribe to the newsletter: https://nitter.cf/t.co/m3rcUFQcUI
Inside browser
Joined February 2022
- Tweets334
- Following21
- Followers176
- Likes67
Can I DevTools? retweeted
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 🙂
Can I DevTools? retweeted
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-devtools-ne…
#css #webdev
ALT Firefox DevTools Inspector rules view, showing a variable tooltip whose declaration value is `light-dark(hotpink, var(--primary-color))`. A computed value section has the following text in it `rgb(255, 105, 180)`. Below it is a `@property` section, describing the variable registered property information.
Can I DevTools? retweeted
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? retweeted
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/canide…
"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
Can I DevTools? retweeted
Polypane 17.1 is out! ✨
Smaller release, mostly bug fixes. Get it today!
polypane.app/blog/polypane-1…
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
Can I DevTools? retweeted
Microsoft Edge DevTools has a brand-new look! 🥸
Learn more: msft.it/6018iWemA
Tips & Tricks: #45, by @CanIDevTools
Link:
open.substack.com/pub/canide…
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
⬇️ 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…
Get Event Listeners:
Can I get all the event listeners on the page?
✅Chrome ✅Edge ✅Safari
🌐canidev.tools/get-event-list…
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
Copy Image as background-image
↳@polypane (v17+)
◆ Right-click on the image, select Copy > Copy as background-image.
→ Link
(see post below)