@_devtoolstips

Useful cross-browser DevTools tips

devtoolstips.org
Joined June 2021
  • Tweets524
  • Following149
  • Followers975
108Media
✂️Paper cuts fixed! #ChromeDevTools now format & pretty print all JSON data & its sub types everywhere. developer.chrome.com/blog/ne… #webdevelopment #debugging #json
1
15
1,040
Here's a tip for you, different ways of taking browser screenshots in DevTools 📸️ What do you think of this sort of 1 minute web development video? Would you like to see more of these?
4
16
1
59
13,296
Simulate color blindness ↳ @FirefoxDevTools ◆ In the "Accessibility" panel, from the toolbar open the "Simulate" menu and select the type of deficiency to simulate the page for the users with that deficiency. → canidev.tools/simulate-color…
1
4
297
Having access to a free reporting tool like Lighthouse in DevTools is a great start for diagnosing performance issues by identifying bottlenecks on the main thread. ↬ Check out how @SpeedCurve can help you and your team dig deeper into the data: smashingmagazine.com/2023/10…
Browser Waterfall: SpeedCurve can go even deeper than Optimizely simply by distinguishing between first- and third-party scripts.

ALT Browser Waterfall: SpeedCurve can go even deeper than Optimizely simply by distinguishing between first- and third-party scripts.

8
17
8,544
Preview social media cards ↳ @polypane ◆ Open Info > Meta & scroll to Social media previews section. Works with localhost & you can overwrite domain with a click. ◆ Toggle light/dark buttons to preview the card in light and dark mode respectively. 🌐canidev.tools/preview-social…
5
6
831
✨ Chrome 119 is here! What's New in DevTools? - View CSS @property in the Styles pane - Refresh the emulate devices - Better pretty-print and autocompletion ...and more! 👇🏽 developer.chrome.com/blog/ne…
2
12
1
47
13,677
Polypane 16 is here! 🥳 - Cool new CSS tools/emulation: @​scope, prefers-reduced-transparency, scripting - Updated X/Twitter preview cards, with domain overwriting - A11y workflow improvements - Chromium 118 Find all the details here: polypane.app/blog/polypane-1…

Polypane 16: workflow improvements, scoped styles and Chromium 118 | Polypane

Polypane 16 ships a ton of improvements to common workflows, updates to the meta panel social media previews, support for @scope in the elements panel, an…

polypane.app
8
17
1,452
Spent hours debugging unwanted horizontal scrollbars? @FirefoxDevTools shows directly in the inspector, which is the element with scrollbar and what are the overflowing elements 🤯
11
118
21
684
It's here! What's new in DevTools (Chrome 118) 🍋 Styles pane support CSS @property 😏 More local overrides improvements 🔎 Enhanced and faster search 📹 youtu.be/-dOYxJnRhxQ?si=v54S… 📜 developer.chrome.com/blog/ne…
4
14
56
14,619
Lighthouse v11.2 includes an overhaul to the performance category that focuses audit prioritization on estimated impact to the performance metrics. Also included is an upgraded score gauge. On hover, it visualizes how each performance metric affects the overall performance score.
A Lighthouse report, with the score gauge at the top subdivided into multiple arcs, each corresponding to one of the performance metrics.

ALT A Lighthouse report, with the score gauge at the top subdivided into multiple arcs, each corresponding to one of the performance metrics.

6
87
4
355
41,829
Introducing the Crash Analyzer tool, improvements to the memory tool, and accessibility improvements in Microsoft Edge for Business🧠 Learn more about what else is new in DevTools 113 and 114: msft.it/60139sr8J
3
7
22
5,071
DevTools implemented improvements to the Sources panel! 🛠️ Dive in and see what’s new for developers in Chrome 118. → goo.gle/46E2ium
New in Chrome 118

ALT New in Chrome 118

1
10
46
10,850
I’m extremely pleased to announce the release of Scroll-Driven Animations Debugger, a Chrome DevTools extension to visualize and debug Scroll-Driven Animations. 🔗 brm.us/scroll-driven-animati… Get the extension from the Chrome Web Store and start inspecting scroll-driven-animations.sty…
8
81
5
404
40,945
New #DevToolsTip! "It works on my machine!" 😆 Let's see how @oliverdunk_ and @jecfish debug and fix their Chrome extension. Watch 📹: youtu.be/Ta-YTDhiBIQ?si=ZZaI…
1
2
1
13
8,421
By default, any changes you make in DevTools are not saved because they disappear after the page is reloaded. 💥 But Workspace can change that! @jecfish has all the tips on setting up a workspace to ensure your changes are saved in your source code.
3
31
5
161
17,307
My face when I saw the new #ChromeDevTools 117 features. 🤯 Watch the highlight to learn more: youtu.be/oMRpODeXzho Mock API responses? 🙀 Hide Chrome extension requests? 🥷🏼 Debugging fetch priority? 📊 This update is so good it's got me feeling like 👇🏽
2
11
1
50
7,083
What's next in DevTools (Chrome 118)? 🪮 View CSS @ property 🎬 Filter overridden network requests 🔎 Enhanced search ... and more! Try them first in Chrome Canary. developer.chrome.com/blog/ne…
5
33
6,928
When you’re running the same code repeatedly, have you considered saving the code as a snippet? It’s simple and can save you time! ⏰ @jecfish has the details on how to create snippets. → goo.gle/44xsaGW
10
1
53
11,664
Learn how to use Chrome DevTools Snippets and Live Expressions to boost your productivity and debug like a pro! 💪 Watch our new video to get started: youtu.be/zW9ibQbYJNE #ChromeDevTools #DevToolsTips #Snippets #LiveExpressions
7
26
7,911
The local storage and session storage APIs allow you to store data on a user's device locally in slightly different ways. @jecfish dives in into each of them to see how you can inspect and update these values with DevTools. More → goo.gle/3ssElr7
17
50
16,436
Load more