Skip to content

Commit 6ae60e5

Browse files
pamelafoxpamelafox
authored
Adding custom debug chat mode for GitHub Copilot Agent mode development (#2672)
* Add chat modes and prompts * Fix tasks to work with chat mode * Remove unrelated changes * Update docs about local dev * Add Windows command
1 parent 3da5ea8 commit 6ae60e5

File tree

3 files changed

+156
-0
lines changed

3 files changed

+156
-0
lines changed

‎.github/chatmodes/debug.chatmode.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
description: 'Debug application to find and fix a bug'
3+
model: GPT-5 (Preview)
4+
tools: ['extensions', 'codebase', 'usages', 'vscodeAPI', 'problems', 'changes', 'testFailure', 'terminalSelection', 'terminalLastCommand', 'fetch', 'findTestFiles', 'searchResults', 'githubRepo', 'todos', 'runTests', 'runCommands', 'runTasks', 'editFiles', 'runNotebooks', 'search', 'new', 'Microsoft Docs', 'get_issue', 'get_issue_comments', 'get-library-docs', 'playwright', 'pylance mcp server']
5+
---
6+
7+
# Debug Mode Instructions
8+
9+
You are in debug mode. Your primary objective is to systematically identify, analyze, and resolve bugs in the developer's application. Follow this structured debugging process:
10+
11+
## Debugging process
12+
13+
• **Gather context**: Read error messages/stack traces, examine recent changes, identify expected vs actual behavior. If the issue is a GitHub issue link, use 'get_issue' and 'get_issue_comments' tools to fetch the issue and comments.
14+
• **Root cause analysis**: Trace execution path, check for common issues, use search tools to understand component interactions
15+
• **Targeted fix**: Make minimal changes addressing root cause, follow existing patterns, consider edge cases
16+
• **Verify thoroughly**: Run tests to confirm fix, check for regressions, test edge cases
17+
• **Document**: Summarize what was fixed, explain root cause, suggest preventive measures. Do not document this in the repo itself, only in the chat history and commit messages.
18+
19+
## Local server setup
20+
21+
You MUST check task output readiness before debugging, testing, or declaring work complete.
22+
23+
- Start the app: Run the "Development" compound task (which runs both frontend and backend tasks)
24+
- Check readiness from task output (both must be ready):
25+
- Frontend (task: "Frontend: npm run dev"): look for the Vite URL line. Either of these indicates ready:
26+
- "Local: http://127.0.0.1:..." or "➜ Local: http://127.0.0.1:..."
27+
- Backend (task: "Backend: quart run"): wait for Hypercorn to bind. Ready when you see:
28+
- "INFO:hypercorn.error:Running on http://127.0.0.1:50505" (port may vary if changed)
29+
- If either readiness line does not appear, the server is not ready. Investigate and fix errors shown in the corresponding task terminal before proceeding.
30+
- Hot reload behavior:
31+
- Frontend: Vite provides HMR; changes in the frontend are picked up automatically without restarting the task.
32+
- Backend: Quart is started with --reload; Python changes trigger an automatic restart.
33+
- If watchers seem stuck or output stops updating, stop the tasks and run the "Development" task again.
34+
- To interact with the application, use the Playwright MCP server
35+
- To run the Python backend pytest tests, use the "run tests" tool
36+
- To run the Playwright E2E tests of the whole app (with a mocked backend), run `pytest tests/e2e.py --tracing=retain-on-failure`.

‎.vscode/tasks.json

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,74 @@
1515
"cwd": "${workspaceFolder}/app"
1616
},
1717
"problemMatcher": []
18+
},
19+
{
20+
"label": "Development",
21+
"dependsOn": [
22+
"Frontend: npm run dev",
23+
"Backend: quart run"
24+
],
25+
"group": {
26+
"kind": "build",
27+
"isDefault": true
28+
}
29+
},
30+
{
31+
"label": "Frontend: npm run dev",
32+
"type": "npm",
33+
"script": "dev",
34+
"isBackground": true,
35+
"options": {
36+
"cwd": "${workspaceFolder}/app/frontend"
37+
},
38+
"presentation": {
39+
"reveal": "always",
40+
"group": "buildWatchers",
41+
"panel": "dedicated",
42+
"clear": false
43+
},
44+
"problemMatcher": {
45+
"pattern": {
46+
"regexp": ""
47+
},
48+
"background": {
49+
"activeOnStart": true,
50+
"beginsPattern": ".*VITE v.*",
51+
"endsPattern": ".*(?:➜\\s*)?Local:\\s+https?://.*"
52+
}
53+
}
54+
},
55+
{
56+
"label": "Backend: quart run",
57+
"type": "shell",
58+
"command": "${workspaceFolder}/.venv/bin/python",
59+
"windows": {
60+
"command": "${workspaceFolder}\\.venv\\Scripts\\python.exe"
61+
},
62+
"args": ["-m", "quart", "run", "--reload", "-p", "50505"],
63+
"options": {
64+
"cwd": "${workspaceFolder}/app/backend",
65+
"env": {
66+
"QUART_APP": "main:app",
67+
"QUART_ENV": "development",
68+
"QUART_DEBUG": "0",
69+
"LOADING_MODE_FOR_AZD_ENV_VARS": "override"
70+
}
71+
},
72+
"isBackground": true,
73+
"presentation": {
74+
"reveal": "always",
75+
"group": "buildWatchers",
76+
"panel": "dedicated"
77+
},
78+
"problemMatcher": {
79+
"pattern": { "regexp": "" },
80+
"background": {
81+
"activeOnStart": true,
82+
"beginsPattern": ".*Serving Quart app.*",
83+
"endsPattern": ".*hypercorn.*Running on http://.*"
84+
}
85+
}
1886
}
1987
]
2088
}

‎docs/localdev.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ After deploying the app to Azure, you may want to continue development locally.
44

55
* [Running development server from the command line](#running-development-server-from-the-command-line)
66
* [Hot reloading frontend and backend files](#hot-reloading-frontend-and-backend-files)
7+
* [Using VS Code "Development" task](#using-vs-code-development-task)
8+
* [Using Copilot Chat Debug Mode](#using-copilot-chat-debug-mode)
79
* [Using VS Code "Run and Debug"](#using-vs-code-run-and-debug)
810
* [Using a local OpenAI-compatible API](#using-a-local-openai-compatible-api)
911
* [Using Ollama server](#using-ollama-server)
@@ -64,6 +66,56 @@ Navigate to the URL shown in the terminal (in this case, `http://localhost:5173/
6466

6567
Then, whenever you make changes to frontend files, the changes will be automatically reloaded, without any browser refresh needed.
6668

69+
Alternatively, you can start both servers with hot reloading by using the VS Code "Development" task. See [Using VS Code "Development" task](#using-vs-code-development-task).
70+
71+
## Using VS Code "Development" task
72+
73+
If you prefer VS Code tasks for hot reloading both servers at once, use the "Development" task defined in `.vscode/tasks.json`.
74+
75+
How to run it:
76+
77+
* Run Build Task (Shift+Cmd+B) to start the default build task, which is "Development".
78+
* Or open the Command Palette (Shift+Cmd+P) and run: "Tasks: Run Task" -> "Development".
79+
80+
What it does:
81+
82+
* Starts two background tasks in dedicated panels:
83+
* "Frontend: npm run dev" from `app/frontend` (Vite HMR for instant frontend updates)
84+
* "Backend: quart run" from `app/backend` (Quart with `--reload` for backend auto-restarts)
85+
86+
Readiness indicators:
87+
88+
* Frontend is ready when Vite prints a Local URL, for example: `Local: http://localhost:5173/`.
89+
* Backend is ready when Hypercorn reports: `Running on http://127.0.0.1:50505` (port may vary).
90+
91+
Tips:
92+
93+
* To stop both, run: "Tasks: Terminate Task" and pick the running tasks.
94+
* If watchers stall, terminate and run "Development" again.
95+
* Frontend changes apply via HMR; backend Python changes auto-reload. No manual restart needed.
96+
97+
## Using Copilot Chat Debug Mode
98+
99+
You can use GitHub Copilot Chat with a custom "debug" mode to streamline troubleshooting in this repo.
100+
101+
Prerequisites:
102+
103+
* VS Code 1.101+ (custom chat modes are in preview)
104+
* Access to GitHub Copilot and Copilot Chat
105+
* Playwright MCP server and GitHub MCP server (optional)
106+
107+
To learn more about the chat modes feature, read [VS Code docs for Chat modes](https://code.visualstudio.com/docs/copilot/chat/chat-modes).
108+
109+
To use the debug mode:
110+
111+
* Open the Chat view.
112+
* Use the chat mode dropdown at the top of the Chat view to select the "debug" mode.
113+
* Start chatting in that mode; the instructions and tools from the repo file will be applied automatically.
114+
* The mode will use the tasks from .vscode/tasks.json to run the frontend and backend server, and should be able to read any errors in the output.
115+
* The mode may also use tools from the Playwright MCP server and GitHub MCP server, if those servers are installed in your VS Code.
116+
117+
Notably, this mode will not actually use a breakpoint-based debugger. Read on to learn how to use breakpoints while debugging the Python code.
118+
67119
## Using VS Code "Run and Debug"
68120

69121
This project includes configurations defined in `.vscode/launch.json` that allow you to run and debug the app directly from VS Code:

0 commit comments

Comments
 (0)