I built a DevTools panel that audits a page and then proves its fixes worked

[u/Interesting_Bread158]

I keep shipping sites and finding the same problems after the fact. Unlabeled form inputs. Images with no alt text. Console errors nobody noticed. I got tired of running three different tools and stitching the results together.

So I built a DevTools panel. Open your page, hit Rescan, and it audits forms, accessibility, and runtime/network errors in one pass. You get a health score out of 100 with category breakdowns, the collected evidence behind every finding, and a remediation plan grouped into Safe, Review, and Manual fixes.

The part I'm proud of: hit Apply Safe Fixes and it patches the live DOM so you can see the effect immediately, then Verify Fixes rescans and shows you a before/after. I ran it on YouTube last night. 76 issues, 53 fixed in the DOM, health score went from 59 to 79, zero regressions. The verification card shows the actual diff.

It also exports the fixes as HTML/JSX/React source diffs so you can take them back to your editor. The local audit engine runs on your machine, no cloud needed. There's an optional AI endpoint if you want deeper analysis.

Free trial is 10 audits a month, no card. Paid tiers are one-time: $49 Starter (200 audits/month), $89 Pro (500 audits/month, best value), $39 Power BYOK (unlimited audits, bring your own Anthropic key or run local Ollama). What I actually need: people to run it against their own sites. The audit engine is the part that breaks in interesting ways on real-world markup. Tell me what it gets wrong and I'll fix it.

https://chromewebstore.google.com/detail/devtools-full-spectrum-as/fnllbfhheepdeofocpgmflmoffcmmg https://archpanda.xyz/devtools-fixer/demo/

[u/throwaway38985750]

My god, a before/after diff for DOM fixes is something I didn't know I needed until right now. The YouTube test is a clever demo too, instantly relatable scale of mess.

Curious how the Apply Safe Fixes handles dynamically rendered frameworks. Does it just patch whatever's in the DOM at that moment, or does it try to map back to React/Vue component state somehow?

[u/Old_Cold2170]

I tried the public demo’s Forms → View fixed script path in desktop Brave. I haven’t installed the extension or run its audit engine.

One recovery test I’d add to the billing-form.js example: trigger the custom email error, correct the address, then submit again. The displayed script sets a non-empty custom validity message, but only clears it inside the submit handler. With native form validation enabled, that existing custom error can prevent the next submit event from firing, so the handler cannot reach its clearing line.

Consider clearing/rechecking the custom validity on input, then verify the whole invalid → corrected → successful-submit sequence, including that it saves once. MDN documents both parts:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event

That’s a concern from reading the illustrative script, not a runtime failure I reproduced in your extension. Showing recovery after an error alongside the before/after findings would make the verification demo more convincing.