# devtools

Published articles for devtools.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Chrome Adds Experimental Metrics to Measure Website Ad Load

DevFeed: [Chrome Adds Experimental Metrics to Measure Website Ad Load](<https://devfeed.tech/articles/chrome-can-now-measure-exactly-how-obnoxious-your-website-s-ads-are-41369.md>)

Original publisher: [Read original article](<https://webdesignerdepot.com/chrome-can-now-measure-exactly-how-obnoxious-your-websites-ads-are/>)

Author: Alex Harper

Published: 2026-09-17T15:00:00Z

Content type: article

Language: en

Sources: [Web Designer Depot](<https://devfeed.tech/sources/web-designer-depot.md>)

Topics: [Chrome](<https://devfeed.tech/topics/chrome.md>), [Web](<https://devfeed.tech/topics/web.md>), [data](<https://devfeed.tech/topics/data.md>), [User Experience](<https://devfeed.tech/topics/user-experience.md>), [Google](<https://devfeed.tech/topics/google.md>), [developer tooling](<https://devfeed.tech/topics/developer-tooling.md>), [Core Web Vitals](<https://devfeed.tech/topics/core-web-vitals.md>)

Tags: [ad-density](<https://devfeed.tech/tags/ad-density.md>), [ad-performance](<https://devfeed.tech/tags/ad-performance.md>), [ad-tech](<https://devfeed.tech/tags/ad-tech.md>), [advertising](<https://devfeed.tech/tags/advertising.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [chrome-user-experience-report](<https://devfeed.tech/tags/chrome-user-experience-report.md>), [core-web-vitals](<https://devfeed.tech/tags/core-web-vitals.md>), [crux](<https://devfeed.tech/tags/crux.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [google](<https://devfeed.tech/tags/google.md>), [google-chrome](<https://devfeed.tech/tags/google-chrome.md>), [online-advertising](<https://devfeed.tech/tags/online-advertising.md>), [page-experience](<https://devfeed.tech/tags/page-experience.md>), [performance](<https://devfeed.tech/tags/performance.md>), [publishers](<https://devfeed.tech/tags/publishers.md>), [user-experience](<https://devfeed.tech/tags/user-experience.md>), [ux](<https://devfeed.tech/tags/ux.md>), [ux-usability](<https://devfeed.tech/tags/ux-usability.md>), [web-design](<https://devfeed.tech/tags/web-design.md>), [web-development](<https://devfeed.tech/tags/web-development.md>), [web-performance](<https://devfeed.tech/tags/web-performance.md>), [website-ads](<https://devfeed.tech/tags/website-ads.md>), [website-optimization](<https://devfeed.tech/tags/website-optimization.md>), [website-performance](<https://devfeed.tech/tags/website-performance.md>)

### AI overview

Chrome has introduced four experimental metrics to the Chrome User Experience Report (CrUX) that quantify website ad load: ad count, ad density, network weight, and CPU weight. The aggregated data is public and can be accessed through CrUX Vis, APIs, and Chrome DevTools, although availability and evaluation thresholds remain limited.

### Source excerpt

Chrome can now measure exactly how obnoxious a website's ads are, from how much of your screen they swallow to how much data and CPU time they burn. Those ad-stuffed websites can finally be measured, and the results are public.

## Inertia DevTools Now Available for Firefox

DevFeed: [Inertia DevTools Now Available for Firefox](<https://devfeed.tech/articles/inertia-devtools-now-available-for-firefox-41326.md>)

Original publisher: [Read original article](<https://laravel-news.com/inertia-devtools-firefox>)

Author: Paul Redmond

Published: 2026-09-17T02:28:55Z

Content type: release

Language: en

Sources: [Laravel](<https://devfeed.tech/sources/laravel.md>)

Topics: [Firefox](<https://devfeed.tech/topics/firefox.md>), [Browser Extension](<https://devfeed.tech/topics/browser-extension.md>), [developer tooling](<https://devfeed.tech/topics/developer-tooling.md>), [Chrome](<https://devfeed.tech/topics/chrome.md>), [vs-code](<https://devfeed.tech/topics/vs-code.md>), [phpstorm](<https://devfeed.tech/topics/phpstorm.md>)

Tags: [chrome-extension](<https://devfeed.tech/tags/chrome-extension.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [editor](<https://devfeed.tech/tags/editor.md>), [extension](<https://devfeed.tech/tags/extension.md>), [features](<https://devfeed.tech/tags/features.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [news](<https://devfeed.tech/tags/news.md>), [panel](<https://devfeed.tech/tags/panel.md>), [phpstorm](<https://devfeed.tech/tags/phpstorm.md>), [vs-code](<https://devfeed.tech/tags/vs-code.md>)

### AI overview

Inertia DevTools is now available as an official Firefox extension with feature parity with the Chrome extension. It records Inertia visits and exposes props, request and response details, routes, controller actions, and page state in a Firefox DevTools panel. Sensitive fields are redacted, and recorded data remains on the local machine.

### Source excerpt

Inertia DevTools, the panel for inspecting Inertia.js visits and props, is now on Firefox with the same features as the Chrome extension. The post Inertia DevTools Now Available for Firefox appeared first on Laravel News. Join the Laravel Newsletter to get Laravel articles like this directly in your inbox.

## From Chrome DevTools to AI Engineering, with Addy Osmani

DevFeed: [From Chrome DevTools to AI Engineering, with Addy Osmani](<https://devfeed.tech/articles/from-chrome-devtools-to-ai-engineering-with-addy-osmani-18173.md>)

Original publisher: [Read original article](<https://newsletter.pragmaticengineer.com/p/from-chrome-devtools-to-ai-engineering>)

Author: Gergely Orosz

Published: 2026-08-19T16:53:57Z

Content type: article

Language: en

Sources: [The Pragmatic Engineer](<https://devfeed.tech/sources/the-pragmatic-engineer.md>)

Topics: [AI Engineering](<https://devfeed.tech/topics/ai-engineering.md>), [AI Agent](<https://devfeed.tech/topics/ai-agent.md>), [Developer experience](<https://devfeed.tech/topics/developer-experience.md>), [Google](<https://devfeed.tech/topics/google.md>), [developer tooling](<https://devfeed.tech/topics/developer-tooling.md>), [engineering-culture](<https://devfeed.tech/topics/engineering-culture.md>), [Loop Engineering](<https://devfeed.tech/topics/loop-engineering.md>), [Chrome](<https://devfeed.tech/topics/chrome.md>)

Tags: [agents](<https://devfeed.tech/tags/agents.md>), [ai-agents](<https://devfeed.tech/tags/ai-agents.md>), [ai-engineering](<https://devfeed.tech/tags/ai-engineering.md>), [developer](<https://devfeed.tech/tags/developer.md>), [developer-experience](<https://devfeed.tech/tags/developer-experience.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [google](<https://devfeed.tech/tags/google.md>), [software-engineering](<https://devfeed.tech/tags/software-engineering.md>), [workflows](<https://devfeed.tech/tags/workflows.md>)

### AI overview

Addy Osmani discusses his 14 years at Google, including work on Chrome, DevTools, Core Web Vitals, and AI developer experience. The conversation covers AI agents, loop engineering, cognitive surrender, engineering culture, and the broader skills engineers need.

### Source excerpt

Addy Osmani shares lessons from 14 years at Google and how AI agents are reshaping software engineering, developer workflows, and the skills engineers need to succeed.

## Building a design system specced for engineers and agents

DevFeed: [Building a design system specced for engineers and agents](<https://devfeed.tech/articles/building-a-design-system-specced-for-engineers-and-agents-19780.md>)

Original publisher: [Read original article](<https://evilmartians.com/chronicles/building-a-design-system-specced-for-engineers-and-agents>)

Author: Travis Turner (richardturner@evilmartians.com)

Published: 2026-06-17T00:00:00Z

Content type: article

Language: en

Sources: [Evil Martians](<https://devfeed.tech/sources/evil-martians.md>)

Topics: [Design system](<https://devfeed.tech/topics/design-system.md>), [User interface design](<https://devfeed.tech/topics/ui-design.md>), [AI-assisted coding](<https://devfeed.tech/topics/ai-assisted-coding.md>), [cursor](<https://devfeed.tech/topics/cursor.md>), [Claude](<https://devfeed.tech/topics/claude.md>)

Tags: [ai](<https://devfeed.tech/tags/ai.md>), [ai-assisted-coding](<https://devfeed.tech/tags/ai-assisted-coding.md>), [claude](<https://devfeed.tech/tags/claude.md>), [components](<https://devfeed.tech/tags/components.md>), [cursor](<https://devfeed.tech/tags/cursor.md>), [design](<https://devfeed.tech/tags/design.md>), [design-system](<https://devfeed.tech/tags/design-system.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [dx](<https://devfeed.tech/tags/dx.md>), [figma](<https://devfeed.tech/tags/figma.md>), [llms](<https://devfeed.tech/tags/llms.md>), [ui-design](<https://devfeed.tech/tags/ui-design.md>)

### AI overview

Evil Martians describes how it built a design system for Currents in seven weeks. The system standardized UI decisions and was structured to be readable by engineers and AI-assisted coding tools, including Cursor and Claude, helping the lean team reuse components and maintain a consistent product interface.

### Source excerpt

Coding without design guidelines can leave teams with an inconsistent UI design and a complex feature development process. Here's how we built a design system for Currents that's readable by engineers and AI agents.

## Using encapsulated development to code on my phone

DevFeed: [Using encapsulated development to code on my phone](<https://devfeed.tech/articles/using-encapsulated-development-to-code-on-my-phone-21585.md>)

Original publisher: [Read original article](<https://maryrosecook.com/blog/post/using-encapsulated-development-to-code-on-my-phone>)

Published: 2026-05-25T07:00:00Z

Content type: article

Language: en

Sources: [Mary Rose Cook](<https://devfeed.tech/sources/mary-rose-cook.md>)

Topics: [Development](<https://devfeed.tech/topics/development.md>), [Code](<https://devfeed.tech/topics/code.md>), [test](<https://devfeed.tech/topics/test.md>), [developer tooling](<https://devfeed.tech/topics/developer-tooling.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [development](<https://devfeed.tech/tags/development.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [test](<https://devfeed.tech/tags/test.md>), [tests](<https://devfeed.tech/tags/tests.md>)

### AI overview

The author describes using encapsulated development to code on a phone. Each prompt leaves the repository in a known, stable, verified, and stateless condition, supported by refactoring and automated end-to-end testing.

### Source excerpt

I'm lucky enough to have a wife, two young children and a job as an AI Engineer at Notion. I'm also lucky enough to have a side project. Some weeks, I'll get half an hour on my laptop to work on this side project. Most weeks, I won't. Yet, I've averaged two commits to the project per day for the last three months. How? By building on my phone. But, really, by making it possible to build on my phone. The broad approach: encapsulated development. Each prompt leaves the repo in a known, stable, verified, stateless condition that permits the next change. Known My mental model of the project is functional enough that I can make future changes. This doesn't mean I understand everything. I may not know the architecture of some parts of the system. I may not know how some implementations work. But I can understand the behavior of those parts of the system as black boxes. For example, I don't know exactly how the particle system stores particles. But I do know that, when it spawns particles, it doesn't allocate new objects. Stable The quality of the software must be high enough for the next change to be successful. This means well factored, working code. Sometimes, the project will start to crumble with the accumulation of low quality code. I do a string of refactors to get things back on track, then start building features again. Verified Every change must be correct. I don't have time to manually test changes. The kettle has just finished boiling. Incorrect changes build into a wobbly tower. Each prompt must include how it will be verified as correct. This usually means end-to-end tests. For a web app, this might mean having Chrome DevTools actually click through the UI to check it works. Or spinning up the API and checking that inputs produce the expected outputs. Or going full ~StrongDM~ and implementing the external services the product interacts with. In my case, I'm working on a tool for making video games. So I built a headless version of my engine. Test code can ini

## Author Announces Joining GitHub

DevFeed: [Author Announces Joining GitHub](<https://devfeed.tech/articles/hello-github-37729.md>)

Original publisher: [Read original article](<https://carlosbecker.com/posts/github/>)

Author: Carlos Alexandro Becker

Published: 2026-03-31T00:00:00Z

Content type: opinion

Language: en

Sources: [Carlos Becker](<https://devfeed.tech/sources/carlos-becker.md>)

Topics: [GitHub](<https://devfeed.tech/topics/github.md>), [developer tooling](<https://devfeed.tech/topics/developer-tooling.md>)

Tags: [announcement](<https://devfeed.tech/tags/announcement.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [github](<https://devfeed.tech/tags/github.md>)

### AI overview

The author announces that they are joining GitHub after building developer tools throughout their career, including work at GoReleaser and Charm.

### Source excerpt

On to the next thing!

## A Visual Feedback Loop for Electron Apps with Claude Code

DevFeed: [A Visual Feedback Loop for Electron Apps with Claude Code](<https://devfeed.tech/articles/a-visual-feedback-loop-for-electron-apps-with-claude-code-21153.md>)

Original publisher: [Read original article](<https://juri.dev/articles/visual-feedback-loop-electron-apps-claude-code/>)

Published: 2026-03-06T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Electron](<https://devfeed.tech/topics/electron.md>), [Agent Browser](<https://devfeed.tech/topics/agent-browser.md>), [Claude Code](<https://devfeed.tech/topics/claude-code.md>), [Protocol (disambiguation)](<https://devfeed.tech/topics/protocol.md>), [Tooling](<https://devfeed.tech/topics/tooling.md>), [Command-line interface](<https://devfeed.tech/topics/cli.md>), [Chromium](<https://devfeed.tech/topics/chromium.md>)

Tags: [agent-browser](<https://devfeed.tech/tags/agent-browser.md>), [chromium](<https://devfeed.tech/tags/chromium.md>), [claude-code](<https://devfeed.tech/tags/claude-code.md>), [cli](<https://devfeed.tech/tags/cli.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [electron](<https://devfeed.tech/tags/electron.md>), [nx](<https://devfeed.tech/tags/nx.md>), [protocol](<https://devfeed.tech/tags/protocol.md>), [tooling](<https://devfeed.tech/tags/tooling.md>)

### AI overview

This tutorial explains how to give Claude Code visual feedback when building Electron applications. It uses agent-browser and the Chrome DevTools Protocol to connect to a running Electron app, capture screenshots, inspect the DOM, and verify that the rendered interface works. The article covers installing the required tooling, enabling CDP, configuring electron-vite and Nx development scripts, and checking the CDP endpoint.

### Source excerpt

A Visual Feedback Loop for Electron Apps with Claude Code When building Electron apps with an AI coding agent, you run into a fundamental problem: the agent can't see what it's building. It writes code, runs the build, maybe checks the logs, but never actually looks at the rendered UI. If the window is blank or the layout is broken, it has no way to know. I found a way to close that gap using agent-browser and Chrome DevTools Protocol (CDP).

## Next.js 16

DevFeed: [Next.js 16](<https://devfeed.tech/articles/next-js-16-3210.md>)

Original publisher: [Read original article](<https://nextjs.org/blog/next-16>)

Author: Tim Neutkens

Published: 2025-10-21T20:00:00Z

Content type: release

Language: en

Sources: [Next.js Blog](<https://devfeed.tech/sources/next-js-blog.md>)

Topics: [Next.js](<https://devfeed.tech/topics/next-js.md>), [Caching](<https://devfeed.tech/topics/caching.md>), [Compiler](<https://devfeed.tech/topics/compiler.md>), [Routing (disambiguation)](<https://devfeed.tech/topics/routing.md>), [React](<https://devfeed.tech/topics/react.md>), [Model Context Protocol](<https://devfeed.tech/topics/model-context-protocol.md>)

Tags: [caching](<https://devfeed.tech/tags/caching.md>), [compiler](<https://devfeed.tech/tags/compiler.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [model-context-protocol](<https://devfeed.tech/tags/model-context-protocol.md>), [next-js](<https://devfeed.tech/tags/next-js.md>), [react](<https://devfeed.tech/tags/react.md>), [release](<https://devfeed.tech/tags/release.md>), [routing](<https://devfeed.tech/tags/routing.md>)

### AI overview

Next.js 16 is a release featuring Cache Components, stable Turbopack, file system caching, React Compiler support, smarter routing, updated caching APIs, React 19.2 features, and Next.js Devtools MCP integration.

### Source excerpt

Next.js 16 includes Cache Components, stable Turbopack, file system caching, React Compiler support, smarter routing, new caching APIs, and React 19.2 features.

## Using Gemini CLI as an AI Coding Copilot

DevFeed: [Using Gemini CLI as an AI Coding Copilot](<https://devfeed.tech/articles/my-co-pilot-is-an-ai-agent-and-it-s-a-game-changer-26126.md>)

Original publisher: [Read original article](<https://medium.com/@yonatanvlevin/my-co-pilot-is-an-ai-agent-and-its-a-game-changer-c1118bb90245?source=rss-8735065c2497------2>)

Author: Yonatan (Yoni) Levin

Published: 2025-06-25T15:27:03Z

Content type: opinion

Language: en

Sources: [Stories by Yonatan V. Levin on Medium](<https://devfeed.tech/sources/stories-by-yonatan-v-levin-on-medium.md>)

Topics: [AI Agent](<https://devfeed.tech/topics/ai-agent.md>), [AI Development](<https://devfeed.tech/topics/ai-development.md>), [genai](<https://devfeed.tech/topics/genai.md>)

Tags: [ai-agent](<https://devfeed.tech/tags/ai-agent.md>), [ai-development](<https://devfeed.tech/tags/ai-development.md>), [co-pilot](<https://devfeed.tech/tags/co-pilot.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [gemini](<https://devfeed.tech/tags/gemini.md>), [gemini-cli](<https://devfeed.tech/tags/gemini-cli.md>), [genai](<https://devfeed.tech/tags/genai.md>), [llm](<https://devfeed.tech/tags/llm.md>)

### AI overview

The author introduces an opinion piece about using Gemini CLI for software development, drawing on work at a startup that uses LLMs and other AI technologies.

### Source excerpt

After a long break and a lot of life happening all at once, I'm back. Why? Because so much exciting stuff has happened that I just need to spit it out. It's going to be a long article, so prepare a good cup of coffee & a couple of cookies. Today, we're diving deep into something that I believe is the future of how we build software: the Gemini CLI. At least, until the next amazing thing comes along and reshapes our industry all over again. :) The Backstory: A New Mission and a Brick Wall For those who don't know me, my name is Yonatan, but friends call me Yoni. My career has been a wild ride: from low-level hardware development to leading Android teams, then switching to the backend to build the Public API for monday.com, and finally, leading AI development with the explosion of GenAI. Someone once joked that my career is just a series of abbreviations: Android -> API -> AI. About a year ago, after an incredible six-year journey, I left monday.com. After taking some time to breathe, I teamed up with two amazing people, Limor and Eyal, to start a new adventure: a startup called Wisdom. Our mission is to help people become wiser and happier by transforming how they interact with the profound knowledge tucked away in self-development books. We want to transform passive reading into an active, life-changing experience, bridging the gap between knowing something and truly living it. A few weeks ago, we launched our first closed alpha version with a chosen book authors. Our tech stack is a beast: various LLMs, Knowledge Graphs, audio models, and a ton of custom heuristics. And, of course, the standard stuff -- Node.js servers and React for our websites. We started, as most do, with a prototype. Something to show investors and our first potential customers. But I hit a brick wall. Hard. Despite my vast experience, my front-end knowledge was practically zero. I knew some basic HTML and CSS, but that was it. How was I, a backend and AI guy, supposed to build the face of our pro

## What's new in Apollo Client 3.11

DevFeed: [What's new in Apollo Client 3.11](<https://devfeed.tech/articles/what-s-new-in-apollo-client-3-11-23584.md>)

Original publisher: [Read original article](<https://www.apollographql.com/blog/whats-new-in-apollo-client-3-11>)

Author: Jerel Miller

Published: 2024-07-23T11:21:52Z

Content type: release

Language: en

Sources: [Apollo Blog](<https://devfeed.tech/sources/apollo-blog.md>)

Topics: [apollo-client](<https://devfeed.tech/topics/apollo-client.md>), [React](<https://devfeed.tech/topics/react.md>), [Developer Tools](<https://devfeed.tech/topics/developer-tools.md>)

Tags: [apollo-client](<https://devfeed.tech/tags/apollo-client.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [improvements](<https://devfeed.tech/tags/improvements.md>), [react](<https://devfeed.tech/tags/react.md>), [release](<https://devfeed.tech/tags/release.md>), [subscriptions](<https://devfeed.tech/tags/subscriptions.md>)

### AI overview

Apollo Client 3.11 introduces subscription API improvements, support for React 19 release candidate versions, improved React Compiler support, new Apollo Client Devtools options, and a transition from experimental schema testing utilities to the @apollo/graphql-testing-library package.

### Source excerpt

With the release of Apollo Client 3.11, we're excited to announce a number of features and improvements. Here is what you can expect in Apollo Client 3.11: - A number of improvements to Apollo Client's subscription APIs such as access to in Suspense-enabled hooks, the ability to forward extensions in , a new option for , and a new function for . - Support for React 19 release candidate versions with improved React Compiler support. - New Apollo Client Devtools options.

## Measuring and analyzing the KotlinJS bundle size - Gustavo Fão Valvassori

DevFeed: [Measuring and analyzing the KotlinJS bundle size - Gustavo Fão Valvassori](<https://devfeed.tech/articles/measuring-and-analyzing-the-kotlinjs-bundle-size-gustavo-fao-valvassori-38293.md>)

Original publisher: [Read original article](<https://touchlab.co/measuring-kotlin-js-bundle>)

Published: 2024-02-16T00:00:00Z

Content type: tutorial

Language: en

Sources: [Touchlab | Enterprise Mobile Innovation & Development](<https://devfeed.tech/sources/touchlab-enterprise-mobile-innovation-development.md>)

Topics: [kotlinjs](<https://devfeed.tech/topics/kotlinjs.md>), [Webpack](<https://devfeed.tech/topics/webpack.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [analyze](<https://devfeed.tech/tags/analyze.md>), [article](<https://devfeed.tech/tags/article.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [gradle](<https://devfeed.tech/tags/gradle.md>), [gradle-plugin](<https://devfeed.tech/tags/gradle-plugin.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [kotlin-js](<https://devfeed.tech/tags/kotlin-js.md>), [kotlinjs](<https://devfeed.tech/tags/kotlinjs.md>), [lighthouse](<https://devfeed.tech/tags/lighthouse.md>), [measuring](<https://devfeed.tech/tags/measuring.md>), [performance](<https://devfeed.tech/tags/performance.md>)

### AI overview

This tutorial explains how KotlinJS projects are compiled into JavaScript and bundled with Webpack. It presents two ways to measure and analyze bundle size: examining source maps with SourceMapExplorer or Chrome Lighthouse, and using WebpackBundleAnalyzer.

### Source excerpt

Smaller JavaScript bundle size helps improve a website's loading speed and performance. In this article, we present two different ways of analyzing and measuring KotlinJS bundle size.

## Dark Theme - CSS Migration

DevFeed: [Dark Theme - CSS Migration](<https://devfeed.tech/articles/dark-theme-css-migration-30952.md>)

Original publisher: [Read original article](<https://developerhub.io/blog/dark-theme-css-migration/>)

Author: Zaid Daba'een

Published: 2023-07-06T11:19:48Z

Content type: tutorial

Language: en

Sources: [DeveloperHub.io](<https://devfeed.tech/sources/developerhub-io.md>)

Topics: [Dark Mode](<https://devfeed.tech/topics/dark-mode.md>), [CSS](<https://devfeed.tech/topics/css.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [developer tooling](<https://devfeed.tech/topics/developer-tooling.md>)

Tags: [branding](<https://devfeed.tech/tags/branding.md>), [css](<https://devfeed.tech/tags/css.md>), [dark-mode](<https://devfeed.tech/tags/dark-mode.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [migration](<https://devfeed.tech/tags/migration.md>), [variables](<https://devfeed.tech/tags/variables.md>)

### AI overview

This tutorial explains DeveloperHub's new dark theme, including how to enable it, add a reader theme toggle, test it with DevTools, migrate custom CSS, and customize colors with CSS variables.

### Source excerpt

Dark theme is out now! Let those eyes rest.

## Encore's approach to simplifying backend development and DevOps

DevFeed: [Encore's approach to simplifying backend development and DevOps](<https://devfeed.tech/articles/from-spotify-to-devtools-17801.md>)

Original publisher: [Read original article](<https://encore.dev/blog/from-spotify-to-encore>)

Author: Marcus Kohlberg

Published: 2023-04-25T00:00:00Z

Content type: opinion

Language: en

Sources: [Encore Updates](<https://devfeed.tech/sources/encore-updates.md>)

Topics: [developer tooling](<https://devfeed.tech/topics/developer-tooling.md>), [DevOps](<https://devfeed.tech/topics/devops.md>), [backend-development](<https://devfeed.tech/topics/backend-development.md>), [distributed-systems](<https://devfeed.tech/topics/distributed-systems.md>), [software-development](<https://devfeed.tech/topics/software-development.md>), [Spotify](<https://devfeed.tech/topics/spotify.md>)

Tags: [backend](<https://devfeed.tech/tags/backend.md>), [development](<https://devfeed.tech/tags/development.md>), [devops](<https://devfeed.tech/tags/devops.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [distributed](<https://devfeed.tech/tags/distributed.md>), [software-development](<https://devfeed.tech/tags/software-development.md>), [streaming](<https://devfeed.tech/tags/streaming.md>)

### AI overview

A former Spotify engineer compares the music industry's transformation through streaming with current challenges in software development and DevOps. The article presents Encore as a development platform intended to reduce backend complexity and automate infrastructure and distributed-systems overhead through a standardized approach.

### Source excerpt

Transforming development and DevOps like we did the music industry

## Nuxt 3.0.0 Stable Release Introduces Vite, Vue 3, Nitro, and TypeScript Support

DevFeed: [Nuxt 3.0.0 Stable Release Introduces Vite, Vue 3, Nitro, and TypeScript Support](<https://devfeed.tech/articles/announcing-3-0-3422.md>)

Original publisher: [Read original article](<https://nuxt.com/blog/v3>)

Published: 2022-11-16T00:00:00Z

Content type: release

Language: en

Sources: [The Nuxt Blog](<https://devfeed.tech/sources/the-nuxt-blog.md>)

Topics: [Nuxt.js](<https://devfeed.tech/topics/nuxt.md>), [releases](<https://devfeed.tech/topics/releases.md>), [Framework](<https://devfeed.tech/topics/framework.md>), [Vite](<https://devfeed.tech/topics/vite.md>), [Vue.js](<https://devfeed.tech/topics/vue.md>), [Node.js](<https://devfeed.tech/topics/node-js.md>), [TypeScript](<https://devfeed.tech/topics/typescript.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Edge](<https://devfeed.tech/topics/edge.md>), [Firefox](<https://devfeed.tech/topics/firefox.md>), [developer tooling](<https://devfeed.tech/topics/developer-tooling.md>), [Testing](<https://devfeed.tech/topics/testing.md>)

Tags: [announce](<https://devfeed.tech/tags/announce.md>), [browser](<https://devfeed.tech/tags/browser.md>), [deployment](<https://devfeed.tech/tags/deployment.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [edge](<https://devfeed.tech/tags/edge.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [framework](<https://devfeed.tech/tags/framework.md>), [node-js](<https://devfeed.tech/tags/node-js.md>), [nuxt](<https://devfeed.tech/tags/nuxt.md>), [release](<https://devfeed.tech/tags/release.md>), [releases](<https://devfeed.tech/tags/releases.md>), [testing](<https://devfeed.tech/tags/testing.md>), [typescript](<https://devfeed.tech/tags/typescript.md>), [vite](<https://devfeed.tech/tags/vite.md>), [vue](<https://devfeed.tech/tags/vue.md>)

### AI overview

Nuxt announces the first stable release of Nuxt 3.0.0, a rewrite based on Vite, Vue 3, and Nitro with first-class TypeScript support. The release includes a production-ready API, more than 50 supported modules, evergreen-browser support, and support for Node.js 14, 16, 18, and 19.

### Source excerpt

We are thrilled to announce the first stable version of Nuxt 3.0.0

## A personal update on DevRel, Chrome DevTools, and frontend work

DevFeed: [A personal update on DevRel, Chrome DevTools, and frontend work](<https://devfeed.tech/articles/dear-zach-39438.md>)

Original publisher: [Read original article](<https://aerotwist.com/blog/dear-zach/>)

Author: Paul Lewis

Published: 2022-06-18T00:00:00Z

Content type: opinion

Language: en

Sources: [Paul Lewis](<https://devfeed.tech/sources/paul-lewis.md>)

Topics: [developer tooling](<https://devfeed.tech/topics/developer-tooling.md>), [devrel](<https://devfeed.tech/topics/devrel.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [TypeScript](<https://devfeed.tech/topics/typescript.md>), [Web Components](<https://devfeed.tech/topics/web-components.md>), [modules](<https://devfeed.tech/topics/modules.md>), [Svelte](<https://devfeed.tech/topics/svelte.md>), [GSAP](<https://devfeed.tech/topics/gsap.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [devrel](<https://devfeed.tech/tags/devrel.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [gsap](<https://devfeed.tech/tags/gsap.md>), [longtimenospeak](<https://devfeed.tech/tags/longtimenospeak.md>), [svelte](<https://devfeed.tech/tags/svelte.md>), [typescript](<https://devfeed.tech/tags/typescript.md>), [update](<https://devfeed.tech/tags/update.md>)

### AI overview

A personal update covering the author's move from Google DevRel through DeepMind, Chrome, and Chrome DevTools, including migrations to ES Modules, TypeScript, and Web Components. It also discusses leaving Google, working at Spotify, FLIP animations, and completing a philosophy master's degree.

### Source excerpt

I suppose it's time I responded...

## Backing up your content from Google Photos

DevFeed: [Backing up your content from Google Photos](<https://devfeed.tech/articles/backing-up-your-content-from-google-photos-38529.md>)

Original publisher: [Read original article](<https://msfjarvis.dev/posts/backing-up-your-content-from-google-photos/>)

Author: Harsh Shandilya

Published: 2022-04-04T06:30:00Z

Content type: tutorial

Language: en

Sources: [Posts on Harsh Shandilya](<https://devfeed.tech/sources/posts-on-harsh-shandilya.md>)

Topics: [Google](<https://devfeed.tech/topics/google.md>), [data](<https://devfeed.tech/topics/data.md>), [Chrome](<https://devfeed.tech/topics/chrome.md>), [Protocol (disambiguation)](<https://devfeed.tech/topics/protocol.md>), [Linux](<https://devfeed.tech/topics/linux.md>)

Tags: [archive](<https://devfeed.tech/tags/archive.md>), [archiving](<https://devfeed.tech/tags/archiving.md>), [backing-up](<https://devfeed.tech/tags/backing-up.md>), [backup](<https://devfeed.tech/tags/backup.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [google](<https://devfeed.tech/tags/google.md>), [google-photos](<https://devfeed.tech/tags/google-photos.md>), [gphotos-cdp](<https://devfeed.tech/tags/gphotos-cdp.md>), [linux](<https://devfeed.tech/tags/linux.md>), [nas](<https://devfeed.tech/tags/nas.md>), [photos](<https://devfeed.tech/tags/photos.md>)

### AI overview

A tutorial on using gphotos-cdp to automate archiving images from Google Photos while retaining their EXIF metadata. The tool drives Google Chrome through the Chrome DevTools Protocol and is described as tested on Linux.

### Source excerpt

Putting your media into Google Photos is easy, taking it out, not as much.

## New Terminal Output & Performance Improvements in Nx 13.5

DevFeed: [New Terminal Output & Performance Improvements in Nx 13.5](<https://devfeed.tech/articles/new-terminal-output-performance-improvements-in-nx-13-5-21417.md>)

Original publisher: [Read original article](<https://nx.dev/blog/new-terminal-output-performance-improvements-in-nx-13-5>)

Author: Juri Strumpflohner

Published: 2022-01-25T00:00:00Z

Content type: release

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Terminal](<https://devfeed.tech/topics/terminal.md>), [Caching](<https://devfeed.tech/topics/caching.md>), [Chrome](<https://devfeed.tech/topics/chrome.md>), [developer tooling](<https://devfeed.tech/topics/developer-tooling.md>), [Command-line interface](<https://devfeed.tech/topics/cli.md>), [Graphs](<https://devfeed.tech/topics/graphs.md>)

Tags: [cache](<https://devfeed.tech/tags/cache.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [dx](<https://devfeed.tech/tags/dx.md>), [feature](<https://devfeed.tech/tags/feature.md>), [improvements](<https://devfeed.tech/tags/improvements.md>), [nx](<https://devfeed.tech/tags/nx.md>), [performance](<https://devfeed.tech/tags/performance.md>), [profiling](<https://devfeed.tech/tags/profiling.md>), [terminal](<https://devfeed.tech/tags/terminal.md>), [visualization](<https://devfeed.tech/tags/visualization.md>)

### AI overview

Nx 13.5 introduces dynamic terminal output that separates completed and running tasks while showing errors immediately. The release also reports performance improvements, continued caching of full terminal output, and Chrome DevTools profiling support for Nx commands.

### Source excerpt

Nx 13.5 brings a new dynamic terminal output, 2.3x faster operations, Chrome DevTools profiling support, and improved project graph visualization.

## 2021 in Review

DevFeed: [2021 in Review](<https://devfeed.tech/articles/2021-in-review-28743.md>)

Original publisher: [Read original article](<https://una.im/2021-in-review/>)

Published: 2021-12-31T00:00:00Z

Content type: opinion

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Web platform](<https://devfeed.tech/topics/web-platform.md>), [Developer Tools](<https://devfeed.tech/topics/developer-tools.md>), [web design](<https://devfeed.tech/topics/web-design.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [design](<https://devfeed.tech/tags/design.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [review](<https://devfeed.tech/tags/review.md>), [web-platform](<https://devfeed.tech/tags/web-platform.md>)

### AI overview

A personal review of 2021 covering major life events, health and financial challenges, content production, podcasts, video projects, and the launch of Designcember. It reports audience figures and highlights CSS, DevTools, responsive web design, and web platform content.

### Source excerpt

Reviewing 2021's highs, lows, and everything in between.

## Before You memo()

DevFeed: [Before You memo()](<https://devfeed.tech/articles/before-you-memo-36161.md>)

Original publisher: [Read original article](<https://overreacted.io/before-you-memo/>)

Published: 2021-02-23T00:00:00Z

Content type: tutorial

Language: en

Sources: [Dan Abramov](<https://devfeed.tech/sources/dan-abramov.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [developer tooling](<https://devfeed.tech/topics/developer-tooling.md>), [Development](<https://devfeed.tech/topics/development.md>)

Tags: [devtools](<https://devfeed.tech/tags/devtools.md>), [performance](<https://devfeed.tech/tags/performance.md>), [react](<https://devfeed.tech/tags/react.md>)

### AI overview

This article explains two React rendering optimization techniques: moving state closer to the components that use it and splitting components so unaffected subtrees can be passed as JSX content. It also recommends verifying production builds, keeping state low in the tree, and using the React DevTools Profiler.

### Source excerpt

Rendering optimizations that come naturally.

## NodeJS 内存泄漏检测与定位

DevFeed: [NodeJS 内存泄漏检测与定位](<https://devfeed.tech/articles/nodejs-41005.md>)

Original publisher: [Read original article](<https://blog.joway.io/posts/nodejs-debug/>)

Author: Joway

Published: 2019-11-10T00:00:00Z

Content type: tutorial

Language: zh

Sources: [Random Thoughts](<https://devfeed.tech/sources/random-thoughts.md>)

Topics: [Node.js](<https://devfeed.tech/topics/node-js.md>), [developer tooling](<https://devfeed.tech/topics/developer-tooling.md>), [Chrome](<https://devfeed.tech/topics/chrome.md>), [bug](<https://devfeed.tech/topics/bug.md>)

Tags: [bug](<https://devfeed.tech/tags/bug.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [comparison](<https://devfeed.tech/tags/comparison.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [dump](<https://devfeed.tech/tags/dump.md>), [nodejs](<https://devfeed.tech/tags/nodejs.md>), [object](<https://devfeed.tech/tags/object.md>), [snapshot](<https://devfeed.tech/tags/snapshot.md>), [string](<https://devfeed.tech/tags/string.md>), [tech](<https://devfeed.tech/tags/tech.md>)

### AI overview

This Chinese tutorial documents diagnosing and locating a Node.js memory leak using heapdump files and Chrome DevTools. It explains how to obtain heap snapshots, compare snapshots over time, and inspect object references and retained size while noting that increased memory or retained size alone does not conclusively prove a leak.

### Source excerpt

最近解决了一个 Node.JS 应用内存泄漏 Bug，顺便学会了用 Chrome DevTools 去看 heapdump 文件。这里做一些简单的记录。 如何「优雅地」获得 heapdump 文件 由于我们所有应用都是以容器部署的，所以要去获得某个容器内的文件，并拷贝到本地难度还是比较大，也非常麻烦。考虑到调试时或许会需要下载非常多次的 snapshot 文件，建议可以包下 heapdump 库，做成一个接口，把文件 dump 之后再传输给客户端，这样一劳永逸。

## Debugging Angular Ivy Applications from the Devtools Console

DevFeed: [Debugging Angular Ivy Applications from the Devtools Console](<https://devfeed.tech/articles/debugging-angular-ivy-applications-from-the-devtools-console-21358.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2019/09/debugging-angular-ivy-console/>)

Published: 2019-09-25T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [Tooling](<https://devfeed.tech/topics/tooling.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [browser](<https://devfeed.tech/tags/browser.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [commands](<https://devfeed.tech/tags/commands.md>), [debugging](<https://devfeed.tech/tags/debugging.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [rxjs](<https://devfeed.tech/tags/rxjs.md>), [state](<https://devfeed.tech/tags/state.md>)

### AI overview

This tutorial explains how Angular Ivy exposes APIs that let developers inspect and interact with component state from the browser's DevTools console. It demonstrates selecting an Angular component in Chrome DevTools, accessing it through the console, invoking component functions, and notes that NgProbe is not supported by Ivy.

### Source excerpt

Lorem ipsum dolor sit amet

## \[object ErrorEvent\] thrown by Karma in Angular Unit Tests

DevFeed: [\[object ErrorEvent\] thrown by Karma in Angular Unit Tests](<https://devfeed.tech/articles/object-errorevent-thrown-by-karma-in-angular-unit-tests-21331.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2018/07/object-errorthrown-karma/>)

Published: 2018-07-25T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [debugging](<https://devfeed.tech/topics/debugging.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [Chrome](<https://devfeed.tech/topics/chrome.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [debug](<https://devfeed.tech/tags/debug.md>), [debugging](<https://devfeed.tech/tags/debugging.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [rxjs](<https://devfeed.tech/tags/rxjs.md>), [tests](<https://devfeed.tech/tags/tests.md>), [unit-tests](<https://devfeed.tech/tags/unit-tests.md>)

### AI overview

This tutorial explains how to diagnose the "[object ErrorEvent] thrown by Karma" message when running Angular unit tests. It recommends debugging with Chrome DevTools and disabling source maps with an Angular CLI flag when source maps contribute to cryptic errors.

### Source excerpt

Lorem ipsum dolor sit amet

## Improved Apollo Client Devtools

DevFeed: [Improved Apollo Client Devtools](<https://devfeed.tech/articles/improved-apollo-client-devtools-23397.md>)

Original publisher: [Read original article](<https://www.apollographql.com/blog/improved-apollo-client-devtools-eb43258f103f>)

Author: James Baxley III

Published: 2018-02-01T21:53:00Z

Content type: release

Language: en

Sources: [Apollo Blog](<https://devfeed.tech/sources/apollo-blog.md>)

Topics: [apollo-client](<https://devfeed.tech/topics/apollo-client.md>), [Tooling](<https://devfeed.tech/topics/tooling.md>), [GraphQL](<https://devfeed.tech/topics/graphql.md>), [Cache](<https://devfeed.tech/topics/cache.md>), [Chrome](<https://devfeed.tech/topics/chrome.md>)

Tags: [announcement](<https://devfeed.tech/tags/announcement.md>), [apollo](<https://devfeed.tech/tags/apollo.md>), [apollo-client](<https://devfeed.tech/tags/apollo-client.md>), [cache](<https://devfeed.tech/tags/cache.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [dark-mode](<https://devfeed.tech/tags/dark-mode.md>), [debugging](<https://devfeed.tech/tags/debugging.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [graphql](<https://devfeed.tech/tags/graphql.md>), [new-features](<https://devfeed.tech/tags/new-features.md>), [subscriptions](<https://devfeed.tech/tags/subscriptions.md>)

### AI overview

Apollo announces an improved version of Apollo Client Devtools for Chrome, with a more stable architecture, better performance, improved dark mode, GraphQL subscription support in GraphiQL, and initial client-side schema support.

### Source excerpt

One of my favorite parts of the Apollo ecosystem are the Apollo Devtools. What started as a hack week project for the core team turned into a pretty amazing way to debug and understand what is happening in an Apollo Client-driven app. The integrated GraphiQL, list of active operations, and cache inspector are all invaluable tools for digging around the data your app is using. Today I'm super excited to showcase a couple new features we've added and give you a taste of what is to come!

## Apollo interns on GraphQL Radio

DevFeed: [Apollo interns on GraphQL Radio](<https://devfeed.tech/articles/apollo-interns-on-graphql-radio-23194.md>)

Original publisher: [Read original article](<https://www.apollographql.com/blog/apollo-interns-on-graphql-radio-4af512f5d3b3>)

Author: Sashko Stubailo

Published: 2017-08-22T17:58:00Z

Content type: article

Language: en

Sources: [Apollo Blog](<https://devfeed.tech/sources/apollo-blog.md>)

Topics: [GraphQL](<https://devfeed.tech/topics/graphql.md>), [apollo-client](<https://devfeed.tech/topics/apollo-client.md>), [developer tooling](<https://devfeed.tech/topics/developer-tooling.md>), [Scala](<https://devfeed.tech/topics/scala.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>)

Tags: [apollo](<https://devfeed.tech/tags/apollo.md>), [code-generation](<https://devfeed.tech/tags/code-generation.md>), [community](<https://devfeed.tech/tags/community.md>), [devtools](<https://devfeed.tech/tags/devtools.md>), [graphql](<https://devfeed.tech/tags/graphql.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [scala](<https://devfeed.tech/tags/scala.md>)

### AI overview

An Apollo blog post introduces three interns who appeared on GraphQL Radio and describes their summer work on Apollo open source projects, including GraphQL subscriptions, the Apollo Client cache API, Scala.js code generation, and Apollo Client Devtools.

### Source excerpt

One of my favorite times of year at the office is when the interns join us for the summer. This summer was the biggest group of interns yet, with 6 interns working on open source and commercial products at MDG. Three of the interns -- Shadaj, Ramya, and Evans -- were working on Apollo open source technology, and so Abhi and Nikolas from GraphQL Radio suggested they come on the show to round out the summer. Watch the episode below or listen on Soundcloud!

[Next page](<https://devfeed.tech/tags/devtools.md?cursor=WyIyMDE3LTA4LTIyVDE3OjU4OjAwKzAwOjAwIiwgImZlN2RlNTUzLTY2MDItNDQzOS1hYWVhLTg3MTJjZTBkZGM5ZCJd>)