A rather geeky/technical weblog, est. 2001, by Bramus
Over at web.dev, Katie Hempenius learns us how to identify and fix layout shifts using the Layout Instability API and the DevTools. What I take away from this is that you can easily spot them using DevTools: In the Rendering Panel you can enable an option to highlight areas of Layout Shift: To enable Layout …
Harry Roberts explains how to inspect pages from MobileSafari (on your iDevice) using the Safari (on your Mac) DevTools. It’s been a while since I’ve done this, but if I recall correctly you can — once set up — also debug pages in MobileSafari without needing a physical USB connection. It’ll run over Bluetooth. Measuring …
Continue reading “Inspecting Safari on iPhone using the Safari (on desktop) DevTools”
I especially like the New CSS Angle Visualization Tool 🙂 What’s New In DevTools (Chrome 88) →
Move over Chrome Dino Game! Now you can play Pong inside the Chrome DevTools. Chrome DevTools Pong → Spoiler: How it works In case you were wondering: it’s a regular Pong game, but with the elements visually hidden (opacity: 0;) so that they only show up in the DevTools’ Layers Panel. So simple, that becomes …
Continue reading “Chrome DevTools Pong – A game to play inside the Chrome DevTools”
Reactime is a debugging tool for React developers. It records state whenever it is changed and allows the user to jump to any previously recorded state. This dev tool is for React apps using stateful components and prop drilling, and has beta support for Context API, conditional state routing, Hooks (useState, useEffect) and functional components. …
Continue reading “Reactime – A time-travel state debugger for React apps”
Coming to the next version of Chrome is a way to emulate “Dark Mode” using the DevTools. With the DevTools open and focused, hit SHIFT+CMD+P and choose “Emulate CSS prefers-color-scheme: dark” from the menu You can also access the option via the Rendering panel. (Via @ChromeDevTools)
Solid introduction – with a real use case – on how to use the browsers’s built-in debugger: In this post, I will cover using breakpoints, stepping through your code, setting watch expressions, and applying your fixes in Chrome Developer Tools. How to stop using console.log() and start using your browser’s debugger → ☝️ Do not …
Continue reading “How to start using your browser’s debugger”
Dev Tools can do a lot of things. We’re are not going to dive into the nitty gritty details of each and every feature. Instead we’ll take a look at the top 10 helpful features that help us save time and write better React code. Good intro (*) on how to find your way around …
Continue reading “How to use React Dev Tools, an introduction”
Version 4 of the React DevTools have been released, with a lot of improvements. At a high level, this new version should offer significant performance gains and an improved navigation experience. It also offers full support for React Hooks, including inspecting nested objects. The release notes hold a detailed list of changes, with example gifs. …
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 …
Continue reading “Mozilla Hacks: Designing the Flexbox Inspector”