Learning modes: chat, edit and agent mode

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.

  1. Start a new chat

  2. Select Edit in the mode dropdown

  3. Add both index.html and script.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.

  1. Drag in your project folder, e.g., begin/

  2. 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.