@devtoolstips@front-end.social
@devtoolstips@front-end.social avatar

devtoolstips

@devtoolstips@front-end.social

Useful cross-browser DevTools tips for all web developers and designers

This profile is from a federated server and may be incomplete. Browse more on the original instance.

devtoolstips, to random
@devtoolstips@front-end.social avatar

💬 To help diagnose CSS cascade issues, display the specificity of any CSS selector in DevTools.

➡️ Learn more with our latest tip: https://devtoolstips.org/tips/en/display-css-selector-specificity/

🌟 Available in Chrome, Edge, Safari, Polypane, and soon in Firefox!

devtoolstips, to random
@devtoolstips@front-end.social avatar

Until now, Edge was the only browser to have a perf tool for investigating slow CSS selectors in long style recalculation events.

The Edge team "upstreamed" the code into Chromium, so starting with 125, Chrome also has this feature!

Learn more about it: https://devtoolstips.org/tips/en/find-expensive-selectors/

devtoolstips, to random
@devtoolstips@front-end.social avatar

With DevTools, every day can be #cssnakedday!

Learn how to disable all styles on a page with your favorite browser DevTools: https://devtoolstips.org/tips/en/disable-all-css/

devtoolstips, to random
@devtoolstips@front-end.social avatar

🌟 NEW TIP 🌟

To find what's overriding the CSS property you wish would apply, filter the list CSS rules, or the list of computed styles.

Find out how: https://devtoolstips.org/tips/en/find-why-css-property-is-overridden/

devtoolstips, to random
@devtoolstips@front-end.social avatar

What’s the one DevTools feature you couldn’t live without?

devtoolstips, to random
@devtoolstips@front-end.social avatar

Testing your website by using assistive technology is important. But sometimes, it can be useful to visualize the internal browser accessibility tree too.

You can do it by using DevTools. Learn how with our latest tip:

💬 See the accessibility tree
🔗 https://devtoolstips.org/tips/en/see-accessibility-tree/

devtoolstips, to random
@devtoolstips@front-end.social avatar

It can sometimes be harder, in DevTools, to work with JS code that's inline in the HTML document than when it's loaded from an external file.

You can use the sourceURL special comment to make it a lot easier though!

Learn more: https://devtoolstips.org/tips/en/name-evaluated-files/

devtoolstips, to random
@devtoolstips@front-end.social avatar

PWA lovers! Here's a new Chrome/Edge DevTools feature that lets you simulate the Window Controls Overlay API!

🔗 https://devtoolstips.org/tips/en/simulate-pwa-wco/

No need to install the app on multiple OS to test your title bar anymore.

If you don't know about the Window Controls Overlay API, check this out:

🔗 https://blogs.windows.com/msedgedev/2022/09/27/closing-pixel-gap-native-web-window-controls-overlay/

devtoolstips, to random
@devtoolstips@front-end.social avatar

One of your server requests is failing?

You can edit and resend it directly in DevTools!

Learn how 🔖 https://devtoolstips.org/tips/en/edit-and-resend-network-requests/

stefan, to random
@stefan@front-end.social avatar

There are times when you need to debug a focused element, but opening DevTools causes the focus to be lost.

Today I Learned: In Chromiums, there is a way to maintain the focus state of a page while using DevTools. 🤯

Say Hi to the "Emulate a focused page" rendering option.

Thanks @devtoolstips for sharing!

Example showing how to debug focused elements with the “emulate focused page” rendering option.

devtoolstips,
@devtoolstips@front-end.social avatar

@simevidas @patrick_h_lauke @stefan I think the F8 trick is only really useful to debug popups that appear on hover because F8 requires the focus to be in DevTools in the first place.

The freeze idea is interesting and reminds me of this feature request: https://bugzilla.mozilla.org/show_bug.cgi?id=1472162
I think there's a lot of value in snapshoting the page, by capturing its current DOM tree and computed styles, so you can continue inspecting without being interrupted by changes on the page.

devtoolstips, to random
@devtoolstips@front-end.social avatar

https://devtoolstips.org just got a face lift!

Now with:

✅ A home page that actually says what the site is about 😂
✅ A persistent sidebar to quickly access collections of tips.
✅ A persistent search field to find other tips.

Also, spoiler alert: we're working on full length guides. We'll start with guide about "Understanding DevTools" soon, and have more in mind. Stay tuned!

The new home page, on mobile.

nhoizey, to random French
@nhoizey@mamot.fr avatar

Let's say a SPA first load has been optimized with SSR and the LCP image is loaded pretty fast because it's in the HTML.

But the JavaScript then builds a carousel in the DOM, which initially shows the very same image.

I guess there's a second render of the image. How can I check this easily?

Would it make sense that the LCP takes the late second render of the image, instead of the fast first one?

#image #LCP #WebPerf

⚓️ https://nicolas-hoizey.com/notes/2023/11/03/1/

devtoolstips,
@devtoolstips@front-end.social avatar

@nhoizey @khalidabuhakmeh you can highlight repaints in real time.
Open the Rendering tool, and check Paint flashing.
See https://developer.chrome.com/docs/devtools/rendering/performance/

devtoolstips, to random
@devtoolstips@front-end.social avatar

"Simulate different devices and screen sizes" is by far our most used tip on https://devtoolstips.org.

So, I took some time yesterday to improve it by structuring it better, making it easier to read, and adding new screenshots.

🔗 Learn how to simulate devices: https://devtoolstips.org/tips/en/simulate-devices/

devtoolstips,
@devtoolstips@front-end.social avatar

@dpom @janriemer we only document browser devtools on the site, that’s why. But would be good to mention in a « see also » section maybe.

devtoolstips,
@devtoolstips@front-end.social avatar

@dpom @janriemer I was going to reply "because Polypane is an entire dev browser, which contains multiple tools to inspect elements, debug css, etc.", but then realized that Sizzy was too! I guess I haven't checked it in a while. Maybe I'm mis-remembering, but in my mind it was just a utility webpage to test a webpage at different sizes. I didn't realize this wasn't the case anymore.

So let me revise my original answer. Why not Sizzy? Because I don't have bandwidth to document more on the site.

devtoolstips, to random
@devtoolstips@front-end.social avatar

📏 The current size of the viewport is kind of important to know about when debugging certain issues, or working on media queries.

💡 With DevTools, you can easily see the viewport size!

https://devtoolstips.org/tips/en/see-viewport-size/

devtoolstips,
@devtoolstips@front-end.social avatar

@simevidas good point. Should make this clear in the post. Does this area have a name though ?

devtoolstips, to random
@devtoolstips@front-end.social avatar

❗ Convert any image to a data-uri in DevTools, with a couple of clicks only!

🔗 https://devtoolstips.org/tips/en/convert-image-to-data-url/

devtoolstips, to random
@devtoolstips@front-end.social avatar

Did you know DevTools reports inactive styles? If a property doesn’t do anything in a particular rule, on the inspected element, then DevTools can tell you about it!

Learn more ➡️ https://devtoolstips.org/tips/en/find-inactive-styles/

devtoolstips, to random
@devtoolstips@front-end.social avatar

💡 You can customize the way objects are displayed in the Console and when debugging JavaScript in DevTools!

Even better, this now also works in Firefox, in addition to Chrome and Edge.

Learn all about creating your own custom object formatters at https://devtoolstips.org/tips/en/custom-object-formatters/

devtoolstips, to random
@devtoolstips@front-end.social avatar

Inception of the DevTools 😵‍💫

You can inspect DevTools with DevTools. Yes, you heard right! A new DevTools window that inspects and debugs the first one.

After all, the DevTools UI is all HTML, CSS, JS, so why not?

Learn how ➡️ https://devtoolstips.org/tips/en/inspect-devtools-with-devtools/

devtoolstips, to random
@devtoolstips@front-end.social avatar

We’ve now removed all embedded tweets on devtoolstips.org, you know, just in case…

devtoolstips, to random
@devtoolstips@front-end.social avatar

Survey fatigue is real, I know, but this one is very very short, I promise. 3 questions only ➡️ https://docs.google.com/forms/d/e/1FAIpQLScd0j7vT4nkuIxt02M5Rfq36cixE1g34Om2o28zhlnyrPhJog/viewform

Help make a better devtools tips website!

devtoolstips, to random
@devtoolstips@front-end.social avatar

Want to know which font was actually used in your long list of fallback in a font-family?

Firefox's got your back! It nicely underlines the font that was used in the Rules sidebar!

Learn more about it, and about the difference between defined and rendered fonts at https://devtoolstips.org/tips/en/see-which-font-was-used-in-font-family/

devtoolstips, to random
@devtoolstips@front-end.social avatar

Español 🇪🇸, Français 🇫🇷, 中文 🇨🇳, Deutsch 🇩🇪 …

You don’t have to use DevTools in English if you feel more comfortable using a different language!

Find out how here ➡️ https://devtoolstips.org/tips/en/use-another-language/

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • JUstTest
  • InstantRegret
  • mdbf
  • ethstaker
  • magazineikmin
  • cubers
  • rosin
  • thenastyranch
  • Youngstown
  • osvaldo12
  • slotface
  • khanakhh
  • kavyap
  • DreamBathrooms
  • provamag3
  • Durango
  • everett
  • tacticalgear
  • modclub
  • anitta
  • cisconetworking
  • tester
  • ngwrru68w68
  • GTA5RPClips
  • normalnudes
  • megavids
  • Leos
  • lostlight
  • All magazines
    •