I Built a Chrome Extension to Make JavaScript State Debugging Less Painful

VR Frequency — Thu, 14 May 2026 03:15:34 +0000

I recently published my Chrome extension, Dweav (Data Weave) Trace, on the Chrome Web Store.

It started from a simple frustration:

console.log() is useful... until your app state starts changing across multiple steps, components, events, API responses, user actions, and hidden edge cases.

At that point, debugging becomes less about understanding your application and more about digging through a noisy console trying to remember what changed, when it changed, and why.

So I built Dweav Trace.

Chrome Web Store:

https://chromewebstore.google.com/detail/dweav-trace/djibmlmofhdmijbpekpneclbpnokemne

Privacy policy:

https://altru.dev/extensions/dweav-trace.html

What is Dweav Trace?

Dweav Trace is an offline-first Chrome extension for tracing JavaScript application state inside the browser.

The basic idea is simple.

Instead of scattering random logs everywhere, you can send structured state snapshots to Dweav Trace and view them in a chronological timeline.

dweav(cartState, "Cart updated");

Or:

dweav(userSession, "User logged in");

Each trace gives you a clearer picture of what your app looked like at a specific moment.

The goal is not to replace Chrome DevTools.

The goal is to make state changes easier to understand when normal console logging becomes too messy.

Why I built it

When building complex browser-based apps, I kept running into the same problem.

I would add logs like this:

console.log("before", state);
console.log("after", state);
console.log("checkout step", checkout);
console.log("user", user);
console.log("cart", cart);

Then I would run the app again, trigger a flow, open the console, and try to visually compare large objects across multiple logs.

That works for small things.

But once the app grows, the console becomes noisy.

You start asking:

What changed between step 1 and step 2?
Was this value added, removed, changed, or moved?
Did the state mutate unexpectedly?
Did the problem happen before or after the API response?
Which snapshot was actually the important one?

That is the problem Dweav Trace is trying to solve.

What Dweav Trace does

Dweav Trace gives you a browser side panel where you can inspect state snapshots over time.

Some of the main features include:

Chronological state timeline
Structured object inspection
Snapshot labeling
Structural diffing
Added, removed, changed, and moved value tracking
Auto-redaction for sensitive-looking values
Offline-first design
No analytics
No telemetry
No external servers
No account required for the basic workflow

It is designed for developers who want more visibility into browser app behavior without sending their debugging data somewhere else.

Example use case

Imagine you are debugging a checkout flow.

You might trace state at different points:

dweav(cart, "Initial cart");
dweav(cart, "After quantity update");
dweav(checkoutState, "Checkout started");
dweav(paymentState, "Payment form submitted");
dweav(orderResult, "Order response received");

Instead of manually comparing console logs, you get a timeline of meaningful checkpoints.

That makes it easier to understand how the state evolved through the flow.

Built-in developer tools

I also included several small utilities that I often need while debugging or building web apps.

Dweav Trace includes tools like:

JSON formatter
JWT decoder
Base64 encode/decode
SHA-256 hashing
UUID generator
URL parser/tools
Case converter
CRON translator
Clipboard history
Local diagnostic helpers

The idea is to keep common browser-development utilities close to the tracing workflow.

Privacy-first by design

One of the most important decisions I made was to keep Dweav Trace offline-first.

Debugging data can be sensitive.

Application state may contain tokens, user information, internal IDs, API responses, or other data you do not want leaving your machine.

So Dweav Trace is designed around local usage.

The extension does not use analytics or telemetry, and the Chrome Web Store listing declares no data collection.

There is also built-in auto-redaction to help reduce accidental exposure of sensitive-looking values.

Who is this for?

Dweav Trace is mainly for JavaScript developers building browser-based applications.

It can be useful for:

Frontend developers
Indie hackers
Web app builders
Dashboard developers
Game UI developers
Crypto/web3 app developers
AI tool builders
Anyone debugging complex browser state

It is especially useful when your app has multiple moving parts and you need to understand how state changes over time.

What it is not

Dweav Trace is not meant to replace the full browser DevTools experience.

It is also not a full observability platform.

It is focused on one specific problem:

Helping developers understand state changes more clearly while building and debugging browser apps.

Current status

Dweav Trace is now published on the Chrome Web Store.

This is an early public release, and I am looking for feedback from developers who regularly work with complex frontend state.

Chrome Web Store:

https://chromewebstore.google.com/detail/dweav-trace/djibmlmofhdmijbpekpneclbpnokemne

Privacy policy:

https://altru.dev/extensions/dweav-trace.html

Feedback wanted

I would love feedback on:

The tracing workflow
The side panel experience
The state diff format
The developer utilities
The onboarding flow
What frameworks or debugging patterns should be supported next

If you try it, let me know what feels useful, confusing, missing, or unnecessary.

I built Dweav Trace because I wanted a cleaner way to debug state-heavy browser apps.

Hopefully it helps other developers too.

JelloOS: Assistive Tech Without Barriers

VR Frequency — Wed, 11 Mar 2026 20:28:31 +0000

Just wanted to say hello and introduce everyone to one of my projects currently in development.

Sovereign Assistive OS
Digital Nervous System
Human‑Centered Computing
Browser‑Native Eye‑Tracking
Client‑Side Telemetry
Privacy‑First Assistive Tech
Accessible Autonomy
Open Assistive Infrastructure

JelloOS is a project built around a simple belief: everyone deserves the ability to interact with their world, no matter their physical limitations.

Most assistive technologies today are expensive, locked‑down, or require specialized hardware. JelloOS takes the opposite approach. It runs entirely in the browser, uses standard laptops or tablets, and relies on privacy‑preserving eye‑tracking to let people communicate, navigate interfaces, and control connected devices — all without sending a single frame of video to a server.

The goal isn’t just accessibility; it’s dignity. JelloOS is meant to feel like a digital nervous system for people who’ve been cut off from their physical environment, giving them back agency through open, human‑centered design. It’s free, it’s lightweight, and it’s built so anyone can try it without needing a clinic, a specialist, or a five‑figure device.

At its core, JelloOS is an experiment in what assistive tech could look like if we treated autonomy as a fundamental right rather than a premium feature.

Project meant to be free and accessible worldwide using any standard browser and preferably tablet.
https://altrue.dev

DEV Community: VR Frequency

I Built a Chrome Extension to Make JavaScript State Debugging Less Painful

What is Dweav Trace?

Why I built it

What Dweav Trace does

Example use case

Built-in developer tools

Privacy-first by design

Who is this for?

What it is not

Current status

Feedback wanted

JelloOS: Assistive Tech Without Barriers