I Uninstalled Vue DevTools. My Tests Became the Better Debugger.

I stopped relying on Vue and React browser extensions for everyday debugging. AI-assisted tests now give me something state inspectors cannot: repeatable proof that survives the debugging session.

#AI
#web development
#testing
#Vue
#React
✍️jenuel.dev
Advertisement

I used to open Vue DevTools almost by reflex. If a page behaved strangely, I would inspect the component tree, hunt through Pinia stores, watch state change, and try to catch the moment something went wrong. I did the same kind of thing in React Developer Tools.

I rarely do that now.

The extension did not become bad. My workflow changed. AI can read the store, trace the component using it, inspect the API contract, write a focused test, run it, and revise the code when the test fails. That gives me something a browser tab never did: a repeatable proof that stays in the repository.

So here is the opinion I have landed on: framework DevTools are still useful, but I no longer think they should be the center of everyday web debugging. For much of my work, a good AI agent plus a serious test suite is more useful than manually picking through live state.

What I used DevTools for

Vue DevTools and React Developer Tools solve real problems. They let us inspect component trees, props, state, hooks, and performance information while an application is running. When I needed to know whether a Pinia store had the wrong value, opening the extension was faster than adding temporary logs everywhere.

But the answer disappeared as soon as I closed the tab.

I might discover that userStore.profile was still null after login, fix one code path, and move on. Unless I wrote a test afterward, nothing guaranteed that the same bug would not return during the next refactor.

That was the weakness of my old habit. I was getting an explanation, not building protection.

AI changed the cost of writing tests

The old argument against adding a test for every small bug was time. Setting up mocks, mounting a component, preparing a fake store, and remembering the test framework's API could take longer than the fix itself. Under deadline pressure, clicking through the app felt cheaper.

AI has changed that calculation for me. I can ask an agent to:

The code generation is helpful, but verification is the part that matters. Anthropic's own Claude Code guidance says to give the agent a check it can run, such as tests, a build, a linter, or a screenshot comparison. Without that check, "looks done" is the only signal available. That is exactly the trap I want to avoid.

AI does seem to produce fewer bugs in my current workflow, but I want to be precise about that claim. I do not trust AI because it sounds confident or writes clean-looking code. I see fewer regressions because I make it create and run checks around the change. The process got better. The model did not become magically incapable of mistakes.

A test is a debugger that remembers

Suppose a Vue checkout page loses the selected delivery option after refreshing customer data. I could open Vue DevTools, inspect the store before and after the request, and find the mutation that resets it.

Or I can keep that discovery as a regression test:

import { beforeEach, describe, expect, it } from 'vitest'
import { createPinia, setActivePinia } from 'pinia'
import { useCheckoutStore } from '@/stores/checkout'

describe('checkout store', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
  })

  it('keeps the selected delivery option after customer refresh', async () => {
    const store = useCheckoutStore()
    store.deliveryOption = 'express'

    await store.refreshCustomer()

    expect(store.deliveryOption).toBe('express')
  })
})

The exact setup will vary, and an AI agent can easily write a shallow test that mocks away the bug. I still review the assertion and make sure the test fails before the fix. But once the test is correct, it can run on my machine, in CI, and six months later when someone changes the same store.

Vue's testing guide makes the same practical case: automated tests prevent regressions and push applications toward testable functions, modules, and components. Pinia has dedicated guidance for testing stores and components with createTestingPinia(). These are not workarounds for losing DevTools. They are a more durable engineering layer.

Test what the user can see

Store tests are useful, but I do not want to replace one obsession with implementation details with another. A perfectly tested store can still produce a broken screen.

Testing Library recommends tests that resemble how people use the software. Playwright gives similar advice for end-to-end tests: verify user-visible behavior and avoid depending on details a user would never see, such as internal function names or CSS classes.

That changes the question from "Did this store contain the expected object?" to "Can the customer still choose express delivery, refresh their profile, and complete checkout?"

This is where AI is especially useful. It can help build a small verification ladder:

I do not need all three for every change. I need the cheapest test that would have caught the actual bug, plus an end-to-end check for the flows where failure would hurt users or the business.

Why I removed the extensions

My browser had accumulated extensions for Vue, React, state inspection, accessibility, JSON formatting, network tooling, and several unrelated tasks. Each one added another panel, another process to think about, and another thing that could interfere with a development session.

After removing the framework extensions, my setup felt lighter and less cluttered. I noticed fewer small lags in my own browser. That is a personal observation, not a benchmark, and I would not claim every machine will speed up after removing Vue DevTools. The bigger benefit was mental: I stopped reaching for live inspection as the default answer.

Now I start with the code, the failing behavior, and a reproducible check. If the problem is still unclear, I can use the browser's built-in console, network panel, performance tools, and source debugger. If I need framework-specific visibility, I can reinstall or enable the extension for that session.

This does not mean DevTools are dead

There are jobs where framework DevTools remain excellent.

I am not arguing that developers should uninstall every tool. I am arguing against turning an inspector into a safety net. Inspectors help us understand one running session. Tests protect expected behavior across sessions, machines, and future changes.

AI is not evidence

There is a temptation to tell a simple story: AI writes better code now, so developers need fewer debugging tools. The evidence is messier.

GitHub published a controlled study in which code written with Copilot scored better on functionality, readability, reliability, and maintainability. That is encouraging, but GitHub sells Copilot, and one study should not become a universal law.

Other findings push in the opposite direction. The 2025 Stack Overflow Developer Survey found that more developers distrusted AI output accuracy than trusted it. METR's study of experienced open-source developers working in familiar repositories found that early-2025 AI tools made them 19% slower, even though participants believed AI had helped them move faster. DORA's 2024 report also warned that higher AI adoption could hurt delivery stability and throughput when teams neglected basic engineering practices.

Those results do not cancel my experience. They explain why my workflow depends on executable checks. AI can be fast, careful, and still wrong. Tests give the machine a way to challenge its own answer, and they give me evidence I can review.

My current rule

When I find a bug, I try not to spend twenty minutes clicking through state panels and then keep the discovery only in my head. I ask the AI to reproduce it in a test. I check that the test fails for the right reason. Then I let the agent attempt the fix and run the relevant verification.

If the test cannot explain the bug, I reach for live DevTools. The order matters.

Vue DevTools and React Developer Tools are still valuable diagnostic instruments. They are simply no longer permanent furniture in my browser. AI lowered the cost of creating tests, and those tests keep paying rent long after a debugging tab is closed.

That is a trade I am happy to make.

References

Thanks for reading! If you enjoyed this article and like this kind of content, you're always welcome to buy me a little coffee, but only if you'd like to. No pressure at all, and either way I'm truly grateful you stopped by. ☕

Buy Me A Coffee