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

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.

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.

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.