DevTools StackProbe

Deterministic DevTools companion: console triage, error translation, DOM/CSS doctor, framework component trees and more.

DEVTOOLS STACKPROBE — Your Local JavaScript Debugging Companion Supercharge your browser DevTools with eight specialized analysis tabs. StackProbe runs entirely locally on your machine—nothing is sent to external servers. It's deterministic, transparent, and built for developers who want complete control over their debugging workflow. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WHAT IT DOES Friction History Track user interaction friction: key presses, clicks, focus changes, and form submissions. Get week-over-week summaries to identify where your users struggle. Spot patterns that analytics dashboards miss. Console Inspector Triage console messages instantly. Filter by severity, search by text, export logs as JSON or CSV. Understand your logs at a glance without scrolling through noise. DOM Inspector Analyze the selected element's computed styles, layout behavior, CSS cascade, and live mutations. Understand why an element looks or behaves the way it does. Get explanations, not just values. Network Aggregate API calls by endpoint, method, and domain. Track status codes, latency, caller stack traces, and failure counts. Filter by HTTP method (GET, POST, etc.) and origin (first-party vs third-party). Spot which services your app depends on and how often they're called. Components Build a live component tree for any framework—React, Vue, Angular, or Next.js. See component names, props, state, and context values. Watch trees rebuild in real time as the page interacts. State Inspector Inspect Redux, Vuex, Pinia, and other state stores. See what's in memory, watch it change, understand the structure. Export snapshots for debugging or sharing. Reports Run five kinds of analysis on demand: • Live Audit — Find accessibility issues, lazy-loading problems, duplicate assets, and CSS smell • Bug Reporter — Capture reproducible bugs with element snapshots, console output, and state at the moment of failure • App Doc Generator — Auto-generate Markdown documentation of your application structure • E2E Codegen — Record user interactions and generate Playwright/ Cypress test code • Execution Map — Trace which functions ran and in what order; replay user sessions step by step Settings & Config Inspect localStorage, sessionStorage, IndexedDB, and cookies. Decode JWTs inline. View application configuration and environment variables. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WHY STACKPROBE ✓ 100% Local All analysis runs on your machine. No data leaves your browser. No tracking, no telemetry, no cloud dependencies. ✓ Deterministic Same input = same output, every time. Reproducible debugging. No randomness, no timing-dependent results. ✓ Framework-Agnostic Works with React, Vue, Angular, Next.js, Svelte, and vanilla JavaScript. Detects frameworks automatically. ✓ Privacy-First You own your data. Inspection results stay in memory—nothing is stored, transmitted, or shared. Your pages remain private. ✓ Six Languages English, Español, Français, Deutsch, Italiano, Português. Switch languages anytime without restarting. ✓ Dark & Light Themes Adapts to your system preference. Readable in any lighting. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HOW TO USE 1. Open DevTools (F12 / Cmd+Opt+I) 2. Click the StackProbe tab 3. Select a tab to start analyzing 4. Click buttons, interact with the page, watch results stream in 5. Export, filter, share, or drill into details Each tab updates live as your page runs. No refresh needed. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PHILOSOPHY DevTools StackProbe believes in: • Transparency — Show exactly what you're measuring and how. No hidden calculations. • Honesty — Declare when we can't prove something rather than guessing. • Local-First — Your data never leaves your machine. • Simplicity — One feature done well beats ten half-finished ones. • Developer Experience — Built by people who debug code for a living. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PERFECT FOR • Debugging production issues • Understanding third-party dependencies • Optimizing page performance • Analyzing user interaction patterns • Building test suites • Learning how frameworks work • Auditing accessibility and security ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PRIVACY GUARANTEE ✓ No analytics ✓ No cloud storage ✓ No tracking ✓ No data transmission ✓ No telemetry ✓ No third-party access ✓ No personal data collection ✓ No external requests Everything stays on your machine. Period. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ KEYBOARD SHORTCUTS Press '?' in any tab to see available shortcuts. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Start debugging with confidence. StackProbe is here.