When you open the Copilot chat window in VS Code, you'll notice a dropdown menu next to the language model selection. This is where the magic starts.
1. Chat Mode (Ask)
This is the default mode. Think of it as asking a knowledgeable friend for guidance:
-
Ask a question
-
Get feedback or suggestions
-
No automatic changes to your code
2. Edit Mode
This mode is more proactive. When activated:
-
Copilot directly edits your files
-
Changes appear in your editor, ready for review
-
Ideal for hands-on debugging or refactoring
3. Agent Mode
This is the advanced level:
-
Copilot scans your project
-
It makes multi-file edits
-
It can run terminal commands
-
It iterates on errors autonomously
Agent Mode is essentially turning Copilot into a coding co-pilot that can navigate the cockpit on its own.
Debugging in Chat Mode
Let’s start with a broken webpage.
We load our files: index.html
and script.js
, and run the page. The browser shows a “Welcome to the demo page” message and a button that’s supposed to update the title.
Problem: Clicking the button does nothing.
We inspect the console via Developer Tools (three-dot menu → More Tools → Developer Tools) and see an error.
Let’s ask Copilot:
My button updateTitle does not seem to be working. Help me debug.
Copilot spots two issues:
-
getElementById
is written with a lowercase "b" -
The
onclick
in HTML references a non-existent function
We apply the suggestions using the Apply to script.js button, accept the changes, and reload the page.
Result: It works! No more errors. The title updates correctly.
Using Edit Mode for Instant Fixes
Next, we switch to Edit Mode.
-
Start a new chat
-
Select Edit in the mode dropdown
-
Add both
index.html
andscript.js
to provide full context
Prompt:
The button updateTitle does not seem to be working. Help me debug.
Boom—within seconds, Copilot scans the files and updates them. No step-by-step approvals. Just precise, intelligent edits.
Lesson: Edit Mode is fast and incredibly effective for tasks like bug fixing or quick improvements.
Embracing the Power of Agent Mode
Now for the real powerhouse: Agent Mode.
When activated, Copilot warns you that switching modes ends the current session. Confirm to proceed.
Prompt:
My button updateTitle does not seem to be working. Help me debug.
Copilot:
-
Detects that the problem likely lies in
script.js
-
Fixes both the HTML and JavaScript
-
Applies the fixes across files
-
Gives feedback on what was changed
Test it: Refresh the page. It works. Again.
Copilot in Agent Mode can reason about what’s wrong. It looks at multiple files and even suggests terminal commands when needed. It’s like pairing with a very smart junior developer who doesn’t get tired.
Bonus Power: Auto-Generating Documentation
Agent Mode isn't just for fixing bugs—it can also create files.
Let’s go one step further.
-
Drag in your project folder, e.g.,
begin/
-
Prompt:
Write a README as instructions for a developer to find the errors in the code.
In seconds, Copilot scans the folder, identifies the objective, and creates a professional README file with clear instructions and expected behavior.
“Your task is to identify and fix the errors... When the button is clicked, the title should change…”
This isn’t just documentation—it’s smart, contextual documentation. Copilot understands the purpose and writes like a human mentor would.
Wrap-Up
In this chapter, you learned how to leverage Copilot’s chat modes for different tasks:
-
Chat Mode (ask): Great for asking questions and learning without altering code.
-
Edit Mode: Perfect for hands-on file edits and targeted debugging.
-
Agent Mode: A fully autonomous assistant that understands context, runs commands, edits code, and even writes docs.
Each mode has its strengths. As you become more comfortable, you'll know which one to reach for based on the task at hand.
In the next chapter, we’ll go beyond code and dive into how Copilot can help with styling, frameworks, and creating dynamic components. You're no longer just coding—you’re co-creating with AI.