Firefox Dev Tools for Layout

As of Firefox 65 (in beta), you can inspect layouts that use Flexbox and CSS Grid easily. Here’s a quick look at how. - https://www.youtube.com/watch?v=wdBquUQzN-8

#video #frirefox #devTools

What’s New in DevTools in Chrome 73

Quite a lot of smaller things, including ‘Logpoints’ a way to log messages to the console without adding console.log() calls, keyboard navigation of the console, and the ability to manage geolocation overrides. - http://amp.gs/913B

#devTools #chrome

5 Things You Didn’t Know About React DevTools

You can theme them, you can debug performance using its profiler, you can dig into source, use ‘secret’ React APIs, and more. - http://amp.gs/UcXm

#react #devtools

16 DevTools Tips & Tricks Every CSS Developer Needs to Know - http://amp.gs/dQGK

#chrome #devTools

Are Long JavaScript Tasks Delaying Your 'Time to Interactive'?

Chrome DevTools can now visualize ‘Long Tasks’ (code that causes the main thread to freeze, breaking the user experience) making it easier to debug and optimize away any problems. - http://amp.gs/OPqE

#javascript #devtools

A Look At What's New In DevTools for Chrome 77

Copy element styles, visualize layout shifting, and more. - http://amp.gs/ShnS

#chrome #devtools

What's New In DevTools for Chrome 78

Including Lighthouse 5.2 in the Audits panel, and Largest Contentful Paint in the Performance panel. - http://amp.gs/A9hw

#chrome #devtools

How to Read A Web Page Test Waterfall Chart

If like me, you often look at a waterfall chart and get a bit lost as to what it all means, you’ll find this to be a handy reference, explaining it all in very accessible way. - http://amp.gs/q00F

#devtools

Future-Proofing Firefox’s JavaScript Debugger Implementation

A run through some of the major improvements made to JavaScript debugging in the Firefox DevTools, including garbage collection, compartments, forced returns and exceptions. - http://amp.gs/0LER

#firefox #devTools

15 DevTool Secrets for JavaScript Developers

I think ‘secrets’ is a bit bold, but nonetheless I picked up a few tips here. Breaking on DOM changes, filtering requests in the Network panel, and copying requests in fetch or curl format are all very neat. - http://amp.gs/6a6g

#devtools

Profiling site speed with the Chrome DevTools Performance tab

Matt Zeunert demonstrates how to use the Chrome DevTools Performance tab to measure and improve the speed of your website. - http://amp.gs/bEYv

#devtools

DevTools for CSS Layouts 2021 Edition

Chen Hui Jing gives an overview of layout-related DevTools features. - http://amp.gs/bXYs

#devtools

How Do Chrome Extensions Impact Browser Performance?

Matt Zeunert investigates how 1000 of the most popular Chrome extensions impact browser performance and end-user experience. - http://amp.gs/jTZNe

#devtools

What’s New With DevTools: Cross-Browser Edition

Patrick Brosset explains what’s new with developer tools in Firefox, Edge, Chrome, and Safari. - http://amp.gs/jzEEB

#devtools

Google Chrome Hidden Features Every Developer Should Know

Chrome Dev Tools is one of the most used tools among web developers. But it has some amazing features that most developers are not aware of. In this article, Yasas Sri Wickramasinghe discusses the top 5 Chrome DevTools experimental features every developer should try to make their developer life easier. - http://amp.gs/jYnSW

#devtools

Developer Tools Secrets That Shouldn’t be Secrets

A product manager for developer tools in Microsoft Edge has written an interesting article about things he encountered while working on the tools, documenting them, and going through user feedback. - http://amp.gs/jtIq5

#devtools

What’s New with the DevTools?

A decent break down of recent changes and additions to developer tooling in Chrome, Edge, Safari and Firefox. - http://amp.gs/jZUAw

#devtools

Useful DevTools Tips and Tricks

Having worked on both Firefox and Edge's devtools, Patrick knows his stuff (and shares over 100 tips on his DevTools Tips site). Here, he shares his top 15. - https://www.smashingmagazine.com/2023/06/popular-devtools-tips/

#devtools

How to use Chrome’s accessibility tree

Whitney Lewis shares how Chrome’s accessibility tree can help you debug issues and quickly check custom widgets for accessibility. - https://blog.pope.tech/2023/11/27/how-to-use-chromes-accessibility-tree

#devtools

Chrome DevTools Offers AI for Understanding Errors and Warnings

Not everyone is going to like this, but it’s optional. Also: the first Chrome feature that requires you be over 18? - https://developer.chrome.com/docs/devtools/console/understand-messages

#devtools