Log images to the DevTools Console with console.image()

One of the things you can do on the DevTools’s Console is style the output for console.log() and the like: console.log(“%cMy stylish message”, “color: yellow; font-style: italic; background-color: blue;padding: 2px”); Leveraging this technique, it’s possible to log images to the console: Load the image via JS and extract its dimensions Expand the box of the …

VisBug — Open source browser design tools

Speaking of alternative in-browser DevTools in the previous post: be sure to also check out VisBug, created by Adam Give power to designers & content creators power within the web project they have today, by bringing design tool interactions to the browser. Here’s Adam presenting it at Chrome Dev Summit 2018: You can try it …

CSS Scan Pro — A re-imagined DevTools for web design

Guilherme Rizzo has been busy creating CSS Scan Pro, a re-imagined DevTools CSS Scan Pro makes it radically easy to get the looks of your favorite websites. Hover over any element, and get everything you need (styles, animations, assets, etc…), instantly. Copy elements with a single click, or edit them with our intuitive CSS editor, …

DevTools for Tailwind

If Tailwind is your thing, the “DevTools for Tailwind” by the folks over at BeyondCode looks like a handy tool to have. The DevTools for Tailwind CSS bring back designing and debugging in your browser. You can use the full power of the JIT engine and even add classes like border-[30px] on sites that use …

What’s new in Chrome 97 (Features + DevTools)

Pete LePage has all the details about what’s new for developers in Chrome 97: Chrome 97 is rolling out now! There’s a new option for sending real-time messages between the client and server using Web Transport. You can use feature detection to see what types of scripts a browser supports. JavaScript gets better, and there’s …

Designing in the Browser, Season 3

As part of Designcember, Google Chrome Developer Relations Engineer Una Kravets published season three of “Designing in the Browser”, a series of videos on exploring user interface design through the lens of modern web technology. In these short and on-point videos, you’ll learn about certain Web/CSS features and DevTools along the way. The third season …

Debug memory leaks with the “Detached Elements” tool

An experimental feature in the DevTools of Microsoft Edge Canary is the “Detached Elements” tool. The “Detached Elements” tool allows you to find all nodes that are no longer attached to the document — a typical cause for leaking memory when you forget to clean them up. There are valid reasons for detaching elements from …

Customise the React Native Developer Menu with Dev Settings API

Azim Ahmed comes with a few practical code snippets to alter the React Native Developer Menu from within your code, via the DevSettings Module: Toggle why-did-you-render Perform an action on the current route import {DevSettings} from 'react-native'; import React, {useEffect, useState} from 'react'; if (process.env.NODE_ENV === 'development') { const whyDidYouRender = require('@welldone-software/why-did-you-render'); whyDidYouRender(React, {trackAllPureComponents: false}); …

DOM Treemap DevTools Extension

Christian Schaefer created a DevTools Extension for both Chromium and Firefox that visualizes the children of a DOM Node. The bigger the box, the more children that child node has. After a Google Lighthouse audit complaining an excessive DOM size, have you ever wondered in which corner of your document most DOM nodes are buried? …