Mozilla Hacks: Designing the Flexbox Inspector

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.

Designing the Flexbox Inspector →

Enabling experimental Developer Tools Experiments

Using chrome://flags/ it’s possible to enable “Developer Tools Experiments”.

On the most recent Fronteers Conference, Umar Hansa showed that there are even more DevTools Experiments that one can enable:

  1. Enable “Developer Tools Experiments” via chrome://flags/ if you haven’t already
  2. In the DevTools, go to Settings and select Experiments
  3. Hit SHIFT 6 times

After having done so you should see some – eh – “experimental experiments” available in the list (highlighted in grey)

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!

☕️ Buy me a Coffee ($3)

Using DevTools Features Without Opening DevTools using Puppeteer

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.

const page = await browser.newPage();
const devtoolsProtocolClient = await page.target().createCDPSession();
await devtoolsProtocolClient.send('Overlay.setShowFPSCounter', { show: true });
await page.goto('https://example.org/');

Check out Chrome DevTools Protocol View for an entire list of commands you can send.

Using DevTools Features Without Opening DevTools →

Inspecting Redux Stores in Production, without the Redux Devtools


Checking out the Redux Store of Soundcloud Redux

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.

💁‍♂️ The regular DevTools provide you the $0 command in the console to get the most recently selected element or JavaScript object, the React DevTools provide the $r command to get the most recently selected React Component.

With the correct component selected, getting the contents of the store is very easy thanks to the $r command:

$r.store.getState();

Dispatching actions also is a breeze:

$r.store.dispatch({
    type: '…',
    payload: {
        …
    }
});

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!

☕️ Buy me a Coffee ($3)

Chrome DevTools: Better JavaScript logging with the Log Management UI

Great explanation by Umar Hansa on the upcoming Log Management UI in the Chrome DevTools:

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! 🆕');
fetch(location.href).then(requestsLogger.log);

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?

Chrome DevTools’ Command Menu

Something I learnt via Umar Hansa‘s great DevTools Tips is that the Chrome DevTools sport a Command Menu.

By hitting SHIFT+CMD+P (same shortcut as Sublime Text’s command menu BTW) you can open it. Thanks to fuzzy matching you can easily access things in it.

Chrome DevTools: UI: Command Menu →

Umar Hansa’s Twitter Account is worth following if you’re into the Chrome DevTools (I know I am 😉). Additionally you can sign up for his video course Modern DevTools

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!

☕️ Buy me a Coffee ($3)

Debugging Node.js using the Chrome DevTools

With Chrome 57+, the Node.js debugging feature is enabled by default. To start debugging, run your Node.js application [using Node 6.4+] with the --inspect flag.

Like so:

$ node --inspect <your_file>.js

Open the outputted URL or visit chrome://inspect/ to open dedicated DevTools for Node to start debugging 🙂

Debugging Node.js with Google Chrome →