@_devtoolstips

Useful cross-browser DevTools tips

devtoolstips.org
Joined June 2021
  • Tweets524
  • Following149
  • Followers975
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.
The new home page

ALT The new home page

7
31
2,871
📏 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! devtoolstips.org/tips/en/see…
Chrome, with DevTools opened, the viewport size overlay appears in the rendered webpage

ALT Chrome, with DevTools opened, the viewport size overlay appears in the rendered webpage

1
335
🚨 New useful tip on the site! Highlight all elements that match a given CSS selector. 🔗 devtoolstips.org/tips/en/hig…
Edge, with a webpage showing 3 highlighted elements, and a CSS selector hovered in the Styles pane

ALT Edge, with a webpage showing 3 highlighted elements, and a CSS selector hovered in the Styles pane

1
6
14
4,955
Concerned about your privacy on the web? You can use DevTools to check if the website you're visiting uses third-party cookies 🍪🥠 ➡️ devtoolstips.org/tips/en/det…
Chrome DevTools' Application tool, showing the cookies section containing a bunch of third-party websites

ALT Chrome DevTools' Application tool, showing the cookies section containing a bunch of third-party websites

2
3
607
💡 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 devtoolstips.org/tips/en/cus…
Firefox with DevTools opened on the side, showing the Console tool with a list of logs. Each log contains a color object that's been rendered by a custom formatter.

ALT Firefox with DevTools opened on the side, showing the Console tool with a list of logs. Each log contains a color object that's been rendered by a custom formatter.

8
16
3,765
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 ➡️ devtoolstips.org/tips/en/ins…
Two Chrome DevTools windows, the first one inspects a webpage, the second one inspects the first one

ALT Two Chrome DevTools windows, the first one inspects a webpage, the second one inspects the first one

1
4
584
Tired of the default DevTools themes? Have a creative idea for a custom theme of your own 💡? You can load custom stylesheets in DevTools by creating a browser extension 🖌️ Learn more ➡️ devtoolstips.org/tips/en/cre…
Chrome DevTools showing a custom theme where attribute names in the Elements tool are bolded

ALT Chrome DevTools showing a custom theme where attribute names in the Elements tool are bolded

4
3
683
I know, the Memory tool 💾 can look quite intimidating. But, hear me out! If you're looking for a memory leak, record 2 snapshots, and use the comparison feature. This helps focus on what changed only and filters out the noise! 🤫 ➡️ Learn more: devtoolstips.org/tips/en/fin…
Microsoft Edge, with a demo webpage, and DevTools on the side with the Memory tool showing 2 snapshots have been recorded

ALT Microsoft Edge, with a demo webpage, and DevTools on the side with the Memory tool showing 2 snapshots have been recorded

1
3
4
586
The Console in DevTools can appear in its own tab, or at the bottom, below another tool you're already using. If you get confused by this and don't know how things really work, take a read at our latest tip: 🔗 devtoolstips.org/tips/en/und…
DevTools, with the main area at the top, and the drawer at the bottom, showing the Console tool.

ALT DevTools, with the main area at the top, and the drawer at the bottom, showing the Console tool.

1
3
344
Want to know which font was used in a 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 the difference between defined and rendered fonts here devtoolstips.org/tips/en/see…
Firefox, DevTools is opened on the side, showing the Inspector tool and the Rules sidebar tab. The font-family property shows a long list of fonts, with one of them being underlined

ALT Firefox, DevTools is opened on the side, showing the Inspector tool and the Rules sidebar tab. The font-family property shows a long list of fonts, with one of them being underlined

6
1
29
4,850
Need to debug your demo on CodePen, JSFiddle, or Glitch? Tired of having to find the right iframe? Did you know you could re-target DevTools to an iframe! Learn how 🔗 devtoolstips.org/tips/en/ins…
Firefox, with DevTools opened on the side, showing the iframe selector button in the toolbar

ALT Firefox, with DevTools opened on the side, showing the iframe selector button in the toolbar

8
1
16
2,825
Hey console fans! What do you do when you have tons of objects to log? You use console.table! But there's more: you can customize the properties that get displayed! Simply pass an array of strings as the second argument to console.table. Learn more 🔗 devtoolstips.org/tips/en/cus…
Example of a console.table output in Chrome DevTools showing just a few specific columns

ALT Example of a console.table output in Chrome DevTools showing just a few specific columns

3
4
460
Load more