Debug Your Launchpad with Claude Code

Use Claude Code to diagnose and repair a broken Node.js web app.

Introduction

30 Second Summary

A button can look perfectly normal while doing nothing when you click it. The hardest part is often finding the tiny disconnect hidden across different files.

In this project, you will use Claude Code inside Visual Studio Code to debug the Developer Launchpad from Part 1. You will move from a reproducible button failure to a reviewed one-line repair that you verify in Microsoft Edge.

What You'll Build

Picture demonstrating a broken Launchpad button that works again after Claude Code proposes one focused edit for your approval.

By the end of this project, you'll have:

A repeatable bug demo where the button stays visible while its status text refuses to change.
A context-grounded explanation that connects the button markup in public/index.html to its click listener in public/app.js.
A safe diff-review workflow in Manual mode that restores the original success message with one approved HTML edit.
Secret Mission: A Plan mode enhancement that adds the browser's local start time to the existing status message.

Are there any prerequisites?

This project requires the completed developer-launchpad folder from Build Your First Node.js Web Project. That project supplies your Windows setup with Visual Studio Code, Node.js, npm, and Microsoft Edge.

You also need an existing paid Claude plan because the free plan does not include Claude Code access.

Before We Start

This checkpoint connects Claude Code to a concrete debugging goal before you begin. You are committing to a safe workflow that reproduces a selector mismatch, reviews a minimal fix, and verifies the repaired button in Microsoft Edge.

Connect Claude Code to VS Code

Your Developer Launchpad already has a working button. Its local Node.js server gives you a known-good baseline before AI enters the workflow.

Claude Code can help safely once it is connected to the correct Visual Studio Code workspace. Manual mode keeps every proposed file edit under your control.

In this step, get ready to:

Verify the existing button through the running local server in Microsoft Edge.
Confirm subscription authentication will be used without separate API billing.
Connect Claude Code to the workspace under Manual mode.

Reopen and prove the Part 1 baseline

A working baseline separates existing project behavior from changes made later. The integrated Windows PowerShell terminal starts the same server you used in Part 1.

Press the Windows key to open Windows search.
Type Visual Studio Code into the search field.
Press Enter to open Visual Studio Code.
Use the VS Code folder picker to open the existing developer-launchpad folder from its Part 1 location.
Open the integrated Windows PowerShell terminal in this workspace.
Start the existing local server by running this command:

npm start

What Does This Command Do?

The npm start script launches the existing server.js file. The process serves the Developer Launchpad from your computer.

Keep this terminal running throughout the project.
Press the Windows key to open Windows search.
Type Microsoft Edge into the search field.
Press Enter to open Microsoft Edge.
Enter http://127.0.0.1:3000 in the address bar.

Before you click the button, do you expect the status text to stay the same or confirm that the coding session started?

Click Start my coding session.

You should see Session started. Your editor, JavaScript, and browser are working together.

Does the Launchpad Fail to Load?

Check that the first Windows PowerShell terminal still shows the running server. Restart the command if that terminal was closed.

Confirm the address bar contains http://127.0.0.1:3000.

Still stuck? Help me troubleshoot why my Developer Launchpad does not load or update its status text.

Check the billing path before signing in

Claude Code checks ANTHROPIC_API_KEY before an authenticated subscription. A configured value makes Claude Code use separate pay-as-you-go API billing.

This check protects you from unexpected API charges. Your existing paid subscription covers Claude Code usage within its plan limits when the key is unset.

Open a second integrated Windows PowerShell terminal in the existing VS Code workspace.
Check the current environment value by running this command:

echo $env:ANTHROPIC_API_KEY

What Does This Check Show?

A blank line means the environment variable is unset. Any printed value means Claude Code would prioritize that API key over your paid subscription.

✔️ The command prints nothing

Your billing path is ready for subscription authentication. Keep ANTHROPIC_API_KEY unset as you continue.

ⓧ The command prints a value

The value could trigger separate API charges. Remove the user variable before signing in with your paid subscription.

Open System Properties through Windows search.
Select Advanced.
Select Environment Variables.
Remove the user variable named ANTHROPIC_API_KEY.
Restart Visual Studio Code so the updated environment reaches a new terminal.
Return to the existing developer-launchpad workspace.
Open a fresh integrated Windows PowerShell terminal.
Verify the removal by running this command:

echo $env:ANTHROPIC_API_KEY

What Confirms the Removal?

The command should now print a blank line. That empty result confirms Claude Code can use subscription authentication.

Still Seeing an API Key Value?

Confirm you removed the user variable from Environment Variables. Close every VS Code window before reopening the workspace.

Need help? Help me remove ANTHROPIC_API_KEY from my Windows environment.

Install, sign in, and choose Manual mode

The Claude Code extension provides the graphical chat panel inside VS Code. Its side-by-side diff view keeps proposed changes visible before you grant permission.

Why Use the VS Code Extension?

The extension keeps chat plus diff review inside the workspace. Anthropic recommends this graphical experience for VS Code.

The standalone CLI requires a separate installation. That extra terminal setup does not improve this project's review workflow.

Press Ctrl+Shift+X to open the Extensions view.
Search for Claude Code.
Select Install on the Claude Code extension.

The Claude Code extension is now part of your workspace workflow. You have added the review surface that controls every AI edit in this project.

Claude Code Does Not Appear?

Confirm the extension installation finished in the Extensions view. Keep a project file open because the Spark icon appears in the editor toolbar when a file is open.

Need help? Help me find the installed Claude Code extension in Visual Studio Code.

Opening Claude Code for the first time shows a sign-in screen. Authorization continues in your browser before returning you to the workspace.

Open public/index.html in the existing workspace.
Click the Spark icon in the editor toolbar.
Select Sign in.
Complete authorization in the browser with your paid Claude account.
Return to the Claude Code panel in VS Code.
Choose Manual mode in the Claude prompt box.

What Does Manual Mode Protect?

Manual mode shows a side-by-side comparison before Claude edits a file. You can accept the proposal or reject it.

You can also redirect a proposal that changes more than you requested. The final decision stays with you.

Before you check the account, which plan details do you expect the usage dialog to connect to this workspace?

Confirm your subscription account by entering this command in the Claude prompt box:

/usage

What Does This Command Confirm?

The /usage command opens the Account & usage dialog. It shows the signed-in account plus its plan.

The dialog also shows your usage bars. These bars confirm that Claude Code is connected to the paid subscription.

You should see your signed-in account plus the paid plan. You should also see usage bars for that account.

That is the safe connection in place. Claude Code now has authenticated access to this workspace under Manual mode.

Does the Usage Dialog Show the Wrong Account?

Confirm the browser authorization used your paid Claude account. A free Claude account does not include Claude Code access.

Recheck that ANTHROPIC_API_KEY prints no value in Windows PowerShell.

Still stuck? Help me verify my Claude Code account and subscription authentication.

Your Launchpad is still running with its original #start-session plus #status selectors. Next, you will give Claude the exact file context behind that working button.

Give Claude the Right Context

Your Developer Launchpad is working in Microsoft Edge. Claude Code is signed in inside Visual Studio Code with Manual mode active.

A generic coding answer leaves you guessing whether Claude understood this Launchpad. Explicit file references provide the workspace context needed for a project-specific explanation.

In this step, get ready to:

Reference the selected event-listener lines from public/app.js.
Add public/index.html to the same Claude prompt.
Verify that Claude explains the matching selectors without proposing an edit.

Attach the relevant files

The button flow crosses public/index.html and public/app.js. The first file uses HTML to define the elements.

The second file uses JavaScript to connect the button click to the status update.

In the Explorer sidebar in Visual Studio Code, select public/app.js.
Select the complete startButton.addEventListener block.
Press Alt+K to insert a reference to the selected lines.
In the Claude prompt box, type @public/index.html.
Confirm the prompt represents both public/app.js and public/index.html.

That is the fiddly part done. Both sides of the button flow are now attached to one prompt.

Why attach both files?

The selected reference from public/app.js points Claude at the event listener.

The @public/index.html reference supplies the elements targeted by the selectors. Together, the references ground the explanation in the current workspace.

Ask for an explanation first

An explanation-only request lets you test Claude's understanding before trusting it with edits. Manual mode remains the safety boundary if Claude proposes a change.

Ask Claude for a file-grounded explanation by pasting this prompt into the Claude prompt box:

Explain how the button in @public/index.html updates the status text through @public/app.js. Name the matching selectors and do not edit any files.

What Does This Prompt Control?

The two file references tell Claude where to find the button flow.
The request to name the matching selectors requires exact project details.
The instruction to avoid file edits preserves the working baseline.

Before you send it, which HTML IDs do you expect Claude to connect to the JavaScript variables?

Confirm Manual mode remains selected in the Claude prompt box.
Send the prompt to Claude.
Read Claude's response.
Confirm the response names public/index.html and public/app.js.
Confirm Claude connects #start-session to startButton.
Confirm Claude connects #status to statusText.
Confirm Claude explains that the click listener updates the status text.
Confirm Claude does not open an edit proposal.

You should see Claude trace #start-session from the HTML button to startButton in public/app.js.

You should also see Claude trace #status from the HTML paragraph to statusText.

Claude should explain that the click listener changes the paragraph's text when you click the button.

That is grounded debugging in action. Claude has explained the real project flow without changing either file.

Got a Generic Answer or Edit Proposal?

Check that the selected-line reference from public/app.js is still present in the prompt.
Check that @public/index.html is visible in the prompt.
Reject any proposed file edit.
Choose Manual mode in the Claude prompt box.
Send the exact explanation prompt again.

Still stuck? Help me make Claude use both project files without editing them.

Your context-first check is complete. Next, you'll create a selector mismatch that this same workflow can diagnose.

Create a Reproducible Bug

Claude Code has already traced the working button flow in your open Visual Studio Code workspace. That explanation gives you a clean baseline for the test ahead.

Useful debugging begins with a reproducible bug. A controlled change gives you an observable symptom that you can repeat.

In this step, get ready to:

Change the button ID in public/index.html without editing public/app.js.
Reproduce the unchanged status message in Microsoft Edge.

Break the HTML and JavaScript contract

The HTML button ID forms one side of a cross-file contract. The JavaScript selector forms the other side.

Switch back to the public/index.html tab in Visual Studio Code.
Find id="start-session" in the Start my coding session button.
Replace only id="start-session" with id="start-coding".
Leave public/app.js unchanged.
Save public/index.html.

Your saved HTML now gives the button the start-coding ID. The JavaScript file still contains its original selector.

✔️ Awesome, I've got everything!

Your saved HTML contains the controlled one-line ID change.

ⓧ I'd like to double check the full code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Developer Launchpad</title>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js" defer></script>
  </head>
  <body>
    <main>
      <p class="eyebrow">Windows web development setup</p>
      <h1>Developer Launchpad</h1>
      <p>Your local project is ready for a focused coding session.</p>

      <ul>
        <li>Visual Studio Code workspace opened</li>
        <li>Node.js runtime connected</li>
        <li>Browser JavaScript loaded</li>
      </ul>

      <button id="start-coding" type="button">Start my coding session</button>
      <p id="status" aria-live="polite">Waiting for your first click.</p>
    </main>
  </body>
</html>

What does this file show?

The file defines the visible Developer Launchpad page.
The button now uses id="start-coding" after your controlled change.
Every other line remains unchanged to isolate the test to one ID.

const startButton = document.querySelector("#start-session");
const statusText = document.querySelector("#status");

startButton.addEventListener("click", () => {
  statusText.textContent =
    "Session started. Your editor, JavaScript, and browser are working together.";
});

Why keep this file unchanged?

The file preserves the JavaScript from the working baseline.
The startButton variable still searches for #start-session.
The statusText variable still searches for #status.

Reproduce the failure in Microsoft Edge

A reproducible test repeats the same input against a known state. Here, the input is one page refresh followed by one button click.

Before you test it, predict whether the status message will change after the click.

Return to Microsoft Edge at http://127.0.0.1:3000.
Refresh the page.
Click Start my coding session.
Observe the status text below the button.

You'll see the button remain visible. The status text stays Waiting for your first click. after the click.

Why does the button stop responding?

The document.querySelector("#start-session") call searches the DOM for the original button ID. The HTML now contains id="start-coding".

The startButton variable receives no matching element. The click listener cannot attach to the button.

Status message still changes?

Confirm that public/index.html is saved. Unsaved changes leave the previous HTML in the browser.

Check that the button line contains id="start-coding". Confirm that you refreshed http://127.0.0.1:3000 after saving.

Still stuck? Help me reproduce the selector mismatch in my Developer Launchpad.

You now have the evidence a focused diagnosis needs. Next, you'll review Claude Code's smallest proposed repair in Manual mode.

Review and Accept the Minimal Fix

The button failure is now reproducible. Your next goal is to turn that evidence into a minimal repair.

The selector mismatch is specific enough for Claude Code to diagnose from the two project files. Manual mode keeps the proposed edit under your control until you approve it.

In this step, get ready to:

Ask Claude to diagnose the button failure using both relevant files.
Inspect the proposed one-line diff before accepting it.
Test the repaired button independently in Microsoft Edge.

Ask Claude for a constrained diagnosis

A grounded diagnosis compares the broken HTML ID with the JavaScript selector that still expects the original value. Clear constraints also keep Claude focused on the smallest possible repair.

Switch back to the Claude Code panel from earlier.
Confirm Manual mode remains selected in the prompt box.
Send a constrained diagnosis request by using this prompt:

Diagnose the broken button using @public/index.html and @public/app.js. Propose the smallest fix. Keep #start-session in JavaScript as the source of truth, change only the mismatched HTML id, and do not edit any other file.

How Does This Prompt Constrain Claude?

The references to public/index.html and public/app.js ground the diagnosis in your actual project files.
The instruction to keep #start-session as the source of truth limits the repair to the HTML button ID.
The final constraint protects unrelated files from unnecessary changes.

Claude's wording may vary. The response should identify that id="start-coding" does not match the #start-session selector in public/app.js.

Inspect the proposed diff

Manual mode presents the edit as a proposal before changing your file. The side-by-side comparison lets you confirm the exact scope of the repair.

Review the side-by-side comparison before granting permission.
Confirm the removed HTML line contains id="start-coding".
Confirm the replacement HTML line contains id="start-session".
Confirm the proposal leaves public/app.js unchanged.
Reject the proposal if it changes another file.
Redirect Claude if the proposal modifies unrelated lines.
Accept only the focused one-line repair in public/index.html.

That is the safety check complete. You approved one precise repair without allowing broader changes to the working app.

✔️ Awesome, I've got everything!

Great. The accepted proposal restores the original button ID while leaving the JavaScript untouched.

ⓧ I'd like to double check the full code

Compare your repaired public/index.html with this complete file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Developer Launchpad</title>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js" defer></script>
  </head>
  <body>
    <main>
      <p class="eyebrow">Windows web development setup</p>
      <h1>Developer Launchpad</h1>
      <p>Your local project is ready for a focused coding session.</p>

      <ul>
        <li>Visual Studio Code workspace opened</li>
        <li>Node.js runtime connected</li>
        <li>Browser JavaScript loaded</li>
      </ul>

      <button id="start-session" type="button">Start my coding session</button>
      <p id="status" aria-live="polite">Waiting for your first click.</p>
    </main>
  </body>
</html>

Compare your unchanged public/app.js with this complete file:

const startButton = document.querySelector("#start-session");
const statusText = document.querySelector("#status");

startButton.addEventListener("click", () => {
  statusText.textContent =
    "Session started. Your editor, JavaScript, and browser are working together.";
});

Both files should now match these references exactly.

Prove the repair outside the chat

An accepted AI edit still needs an independent test. The browser result proves that the restored HTML ID reconnects the button to its JavaScript listener.

Save public/index.html if its tab still shows unsaved changes.
Return to the Launchpad page in Microsoft Edge from earlier.

Before you test the repair, what do you expect the status text to show after the click?

Refresh http://127.0.0.1:3000.
Click Start my coding session.

You'll see the status change to Session started. Your editor, JavaScript, and browser are working together. The repaired button now works through the original selectors.

Status Still Stuck on the Waiting Message?

Confirm public/index.html contains id="start-session" on the button.
Save public/index.html after correcting the ID.
Refresh Microsoft Edge after saving the file.
Confirm the existing local server is still running in the terminal.

Still seeing the waiting message? Help me check why my repaired button does not update the status text.

Secret mission

Plan a Time-Aware Status Upgrade

Your repaired button works again. Now use Plan mode to add the browser's local start time while preserving the existing selectors and success message.

Clean Up Your Resources

Your local project adds no charge beyond your existing paid plan while subscription authentication remains active. Choose a cleanup level that fits what you want to do next.

Cost warning

Your Claude Code usage counts against your paid plan's limits.

The ANTHROPIC_API_KEY environment variable remains unset. This keeps Claude Code on subscription authentication without separate pay-as-you-go API charges.

Resources you used:

Local Node.js server process running the Developer Launchpad.
Claude Code extension installed in Visual Studio Code.

Keep everything running

No action needed. Choose this if you want to continue experimenting with the repaired Developer Launchpad.

Leave the local Node.js server running in Windows PowerShell.
Keep Visual Studio Code open with the developer-launchpad workspace.
Keep the Claude Code extension installed for more AI-assisted debugging.

Pause - I'll come back to this later

Stop the running process to free its local port. Your project files and Claude Code conversation stay available for later.

Press Ctrl+C in the Windows PowerShell terminal from earlier to stop the local Node.js server.
Close Visual Studio Code.

Delete - I don't want to use this again

Remove the resources added or started in this project. Your existing Developer Launchpad files stay on your computer because Part 1 created them.

Press Ctrl+C in the Windows PowerShell terminal from earlier to stop the local Node.js server.
Return to the extension panel in Visual Studio Code by pressing Ctrl+Shift+X.
Search for Claude Code in the extension panel.
Select Uninstall on the Claude Code extension.
Close Visual Studio Code.

That is the project-specific cleanup done. Your paid Claude plan remains active.

Nice Work!

You finished Part 2! Your Developer Launchpad works again after a controlled debugging workflow with Claude Code inside Visual Studio Code.

You've learned how to:

Set up an authenticated workspace for Claude Code. You confirmed that ANTHROPIC_API_KEY stayed unset. This kept usage on the paid subscription path.
Ground Claude Code in the relevant project files through explicit file references. Your prompt referenced public/index.html. It also referenced public/app.js. This produced an explanation based on the Launchpad's actual selectors.
Reproduce a selector mismatch in Microsoft Edge. Review a one-line Manual mode diff before acceptance. Confirm the repaired button through a fresh browser test.
Secret Mission: Used Plan mode to review a focused JavaScript enhancement. The Launchpad now shows the browser's local start time. Its existing selectors remain intact. Its original success wording remains intact.

Ready to quiz yourself?