With the upcoming release of Firefox 65 (due January 29tgh), its DevTools will sport a new shiny Flexbox Inspector.
The new Flexbox Inspector, created by Firefox DevTools, helps developers understand the sizing, positioning, and nesting of Flexbox elements.
Victoria Wang details how they UX challenges that came with this tool were tackled.
Built on the basic concepts of the CSS Grid Inspector, we sought to expand on the possibilities of what a design tool could be. I’m excited to share a behind-the-scenes look at the UX patterns and processes that drove our design forward.
Keeping a feature of the Chrome Devtools – such as the FPS Meter – running with the DevTools closed unfortunately is not possible (yet?). Kayce Basques provides us with a little workaround though:
You can hack together a Puppeteer script that launches Chromium, opens a remote debugging client, then turns on the DevTools feature that you like (via the Chrome DevTools Protocol), without ever explicitly opening DevTools.
Back in the day I learnt a lot by hitting CTRL+U (View Source) on websites. Nowadays I still check the source code of some apps, yet it’s become a tad more difficult for some specific things.
When it comes to React apps that use Redux I like to see how they’ve set up their store. If the developer has enabled integration with the Redux Devtools I can use just that. When they haven’t (because: production) I manually look up the store and then retrieve it’s state.
To look up the store, use the React DevTools. Traverse the Component Tree until you stumble upon the element with a store prop. This usually is high up the tree.
With the correct component selected, getting the contents of the store is very easy thanks to the $r command:
Dispatching actions also is a breeze:
Happy inspecting 🙂
Did this help you out? Like what you see? Consider donating.
I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!
The new Log Management UI is an experimental feature in Canary DevTools. Once enabled, you can create console.log functions which have their own context.
One can create new logging contexts using console.context(name):
const thirdPartyLogger = console.context('3rd Party');
const infoLogger = console.context('Info');
const requestsLogger = console.context('Requests');
thirdPartyLogger.log('Something about a third party script');
infoLogger.log('An information log');
infoLogger.log('The log management UI helps group this');
infoLogger.log('This is experimental, in Canary! 🆕');
Note: Couldn’t get this to work though, as I couldn’t find any experiment in the settings of Chrome Canary 63’s DevTools to activate this. Perhaps in the next Canary?