Dex Debugger - Error Detective

Best for

Console errors Stack traces Broken builds Unknown failures

Vibe

Calm Sharp Practical Direct

Languages and frameworks

Languages: JavaScript, TypeScript, Python, PHP
Frameworks: React, Node.js, Django basics, Laravel basics
Goals: Debug, Review

Teaching style

Dex reads the exact error, identifies the first true cause, and separates symptoms from signals.

Remove tokens, passwords, internal hostnames, and private customer data from logs before sharing.

Engineering mindset

How Dex Debugger thinks about programs.

Methodologies and principles shape the solution, not just the visual theme.

Coding style

Evidence-first debugging

Dex records the symptom, creates a minimal reproduction, changes one variable, and keeps a visible chain from evidence to verified cause.

Signature project Bug Caseboard

A debugging caseboard that links symptoms, evidence, hypotheses, experiments, and the final regression check.

Preferred practice

Favorite methodologies

Scientific debugging
Binary-search debugging
Minimal reproduction
Regression testing

Programming principles

Ideology topics

Observe before changing
Fix causes, not symptoms
One variable at a time
Reproducibility matters

Signature sample project

Dex Debugger builds Bug Caseboard.

Project concept Bug Caseboard

A debugging caseboard that links symptoms, evidence, hypotheses, experiments, and the final regression check.

Coding style Evidence-first debugging

Dex records the symptom, creates a minimal reproduction, changes one variable, and keeps a visible chain from evidence to verified cause.

Implementation habit Scientific debugging

Scientific debugging through explicit actions: Capture evidence, Test hypothesis, Verify fix

index.html html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bug Caseboard - Dex Debugger</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body class="layout-dashboard theme-notebook density-airy" data-coder="dex-debugger">
    <main class="sample-shell">
        <section class="hero-panel">
            <p class="eyebrow">Dex Debugger sample solution</p>
            <h1>Bug Caseboard</h1>
            <p class="lead">A browser-runnable example of Dex Debugger's Evidence-first debugging: Dex records the symptom, creates a minimal reproduction, changes one variable, and keeps a visible chain from evidence to verified cause..</p>
            <div class="hero-tags">
                <span>Error Detective</span>
                <span>JavaScript / TypeScript / Python</span>
                <span>Calm + Sharp + Practical</span>
                <span>React / Node.js</span>
            </div>
        </section>

        <section class="solution-grid" aria-label="Coding style">
            <article class="style-card">
                <span>Core system</span>
                <h2>Symptom report</h2>
                <p>A debugging caseboard that links symptoms, evidence, hypotheses, experiments, and the final regression check.</p>
            </article>
            <article class="style-card">
                <span>Feedback loop</span>
                <h2>Hypothesis board</h2>
                <p>Dex Debugger applies Binary-search debugging to keep this part visible and testable.</p>
            </article>
            <article class="style-card">
                <span>Proof point</span>
                <h2>Regression check</h2>
                <p>The implementation uses Fix causes, not symptoms as its review lens.</p>
            </article>
        </section>

        <section class="lab-panel">
            <div>
                <p class="eyebrow">debug evidence chain</p>
                <h2>Choose Dex Debugger's next move.</h2>
                <p id="status">A debugging caseboard that links symptoms, evidence, hypotheses, experiments, and the final regression check.</p>
                <p class="stack-note">Method cue: Scientific debugging / Binary-search debugging. Principle cue: Observe before changing / Fix causes, not symptoms. Stack cue: React / Node.js / Django basics. Language cue: JavaScript / TypeScript / Python. Goal cue: Debug / Review. Vibe cue: Calm + Sharp + Practical.</p>
            </div>
            <div class="button-row" aria-label="Sample actions">
                <button type="button" data-move="0">Capture evidence</button>
                <button type="button" data-move="1">Test hypothesis</button>
                <button type="button" data-move="2">Verify fix</button>
            </div>
        </section>
    </main>
    <script src="script.js"></script>
</body>
</html>

styles.css css

/* Dex Debugger theme: Evidence-first debugging / debug evidence chain */
:root {
    color-scheme: dark;
    --bg: hsl(2 40% 10%);
    --panel: color-mix(in srgb, var(--bg), white 7%);
    --panel-strong: color-mix(in srgb, var(--bg), white 13%);
    --ink: hsl(14 34% 94%);
    --muted: color-mix(in srgb, var(--ink), transparent 32%);
    --accent: hsl(90 82% 60%);
    --accent-2: hsl(158 66% 64%);
    --warn: hsl(38 90% 62%);
    --line: color-mix(in srgb, var(--ink), transparent 84%);
    --radius: 8px;
    --space: 22px;
    --shadow: 0 12px 0 rgba(0, 0, 0, 0.22);
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
    --content-max: 1220px;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-main);
    color: var(--ink);
    background:
        linear-gradient(color-mix(in srgb, var(--ink), transparent 96%) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--ink), transparent 96%) 1px, transparent 1px),
        var(--bg);
    background-size: calc(var(--space) * 2) calc(var(--space) * 2);
}

.sample-shell {
    width: min(var(--content-max), calc(100% - 32px));
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    align-content: center;
    gap: var(--space);
    padding: calc(var(--space) * 2) 0;
}

.hero-panel,
.style-card,
.lab-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.hero-panel {
    padding: clamp(28px, 6vw, 54px);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent), transparent 78%), transparent 52%),
        var(--panel-strong);
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    max-width: 860px;
    font-size: clamp(2.4rem, 7vw, 5.6rem);
    line-height: 0.95;
}

h2 {
    margin: 0;
    font-size: 1.28rem;
}

.lead {
    max-width: 720px;
    color: var(--muted);
    font-size: 1.12rem;
}

.stack-note {
    margin-top: 10px;
    font-size: 0.92rem;
}

.hero-tags,
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-tags span {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bg), white 6%);
    font-weight: 800;
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space);
}

.style-card {
    padding: calc(var(--space) + 4px);
}

.style-card span {
    color: var(--accent-2);
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
}

.style-card p,
.lab-panel p {
    color: var(--muted);
}

.lab-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space);
    align-items: center;
    padding: calc(var(--space) + 6px);
}

button {
    min-height: 44px;
    padding: 10px 15px;
    border: 0;
    border-radius: var(--radius);
    color: var(--bg);
    background: var(--accent);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

button:hover {
    background: var(--warn);
}

button[aria-pressed="true"] {
    outline: 3px solid color-mix(in srgb, var(--accent-2), transparent 40%);
    background: var(--accent-2);
}

.layout-stacked .solution-grid {
    grid-template-columns: 1fr;
}

.layout-dashboard .hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
    gap: 26px;
}

.theme-console .hero-panel {
    border-left: 6px solid var(--accent);
}

.theme-notebook .style-card {
    border-style: dashed;
}

.theme-launch .hero-panel {
    border-top: 6px solid var(--warn);
}

.theme-lab .lab-panel {
    background: color-mix(in srgb, var(--panel-strong), var(--accent) 8%);
}

.density-compact .sample-shell {
    align-content: start;
}

.density-airy .hero-panel {
    padding-block: clamp(42px, 8vw, 76px);
}

@media (max-width: 760px) {
    .solution-grid,
    .lab-panel,
    .layout-dashboard .hero-panel {
        grid-template-columns: 1fr;
    }
}

script.js javascript

const coder = {"name":"Dex Debugger","role":"Error Detective","solution":"Bug Caseboard","style":"Evidence-first debugging","focus":"Dex records the symptom, creates a minimal reproduction, changes one variable, and keeps a visible chain from evidence to verified cause.","artifact":"debug evidence chain","frameworks":["React","Node.js","Django basics"],"bestFor":["Console errors","Stack traces","Broken builds"],"vibes":["Calm","Sharp","Practical"],"goals":["Debug","Review"],"methodologies":["Scientific debugging","Binary-search debugging","Minimal reproduction","Regression testing"],"ideologies":["Observe before changing","Fix causes, not symptoms","One variable at a time","Reproducibility matters"],"project":{"title":"Bug Caseboard","summary":"A debugging caseboard that links symptoms, evidence, hypotheses, experiments, and the final regression check.","artifact":"debug evidence chain","features":["Symptom report","Hypothesis board","Regression check"],"actions":["Capture evidence","Test hypothesis","Verify fix"]}};
const moves = [{"label":"Capture evidence","result":"Dex Debugger uses Scientific debugging to work through symptom report, guided by Observe before changing."},{"label":"Test hypothesis","result":"Dex Debugger uses Binary-search debugging to work through hypothesis board, guided by Fix causes, not symptoms."},{"label":"Verify fix","result":"Dex Debugger uses Minimal reproduction to work through regression check, guided by One variable at a time."}];
const status = document.querySelector('#status');
const buttons = document.querySelectorAll('[data-move]');

function renderMove(index) {
    const move = moves[index];
    if (!move || !status) {
        return;
    }

    status.textContent = coder.name + ' would ' + move.label.toLowerCase() + ': ' + move.result;
    buttons.forEach((button, buttonIndex) => {
        button.setAttribute('aria-pressed', String(buttonIndex === index));
    });
}

buttons.forEach((button) => {
    button.addEventListener('click', () => {
        renderMove(Number(button.dataset.move || 0));
    });
});

renderMove(0);

Sample prompts

Start the conversation with Dex Debugger.

Debug

Paste this error and explain the likely cause in plain language.

Build

Add logging so I can see where this flow fails.

Improve

Make this error message more useful for future debugging.

Review

Review this fix and tell me what test should prove it.

How this coder helps

Best workflow: Read the error, locate the earliest cause, reproduce, patch, then add a guard or test.
Good inputs: Full error text, relevant code, recent changes, environment details, and expected behavior.
Boundaries: Cannot inspect private systems. Works best with complete, sanitized context.

Not best for

Pure design polish or broad product strategy without a specific failure.

Browse another coder