Skip to content

Commit d50f5bf

Browse files
web-flowweb-flow
committed
chore: Improve debugging config for VSCode
1 parent c2ac9d1 commit d50f5bf

7 files changed

Lines changed: 406 additions & 20 deletions

File tree

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,3 +258,7 @@ node_modules
258258
/Rnwood.Smtp4dev.Desktop/server
259259
/Rnwood.Smtp4dev.Desktop/wwwroot/*
260260
published/
261+
262+
# VS Code debugging profiles
263+
.chrome-debug-profile*
264+
.edge-debug-profile*

‎.vscode/DEBUG.md‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
# VS Code Debugging Guide for smtp4dev
2+
3+
This document explains how to use the enhanced debugging setup for smtp4dev in VS Code.
4+
5+
## Architecture
6+
7+
The smtp4dev application uses an integrated development setup where:
8+
- **ASP.NET Core backend** runs on http://localhost:5000
9+
- **Vite dev server** is automatically launched by the .NET app on port 5173 (in development mode only)
10+
- **Vue CLI middleware** proxies frontend requests from :5000 to the Vite dev server
11+
- **All debugging happens through the single :5000 endpoint**
12+
13+
## Available Debug Configurations
14+
15+
### Individual Configurations
16+
17+
1. **`.NET Core Launch (web)`** - Debug the ASP.NET Core backend
18+
- Starts the server on http://localhost:5000
19+
- Automatically launches Vite dev server on port 5173 in development mode
20+
- Includes server-ready action to automatically open browser
21+
22+
2. **`Attach to .NET Core`** - Attach to a running .NET process
23+
- Useful when the server is already running
24+
25+
3. **`Chrome (Client Debug)`** - Debug client-side code in Chrome
26+
- Connects to http://localhost:5000 (which proxies to Vite)
27+
- Enables TypeScript/Vue.js debugging with source maps
28+
29+
4. **`Chrome (Full App)`** - Debug the production build in Chrome
30+
- Tests the production build with source maps
31+
32+
5. **`Edge (Client Debug)`** - Alternative browser for client debugging
33+
- Same as Chrome but uses Microsoft Edge
34+
35+
### Compound Configurations (Recommended)
36+
37+
1. **`Full Stack (Development)`** ⭐ **RECOMMENDED**
38+
- Starts .NET Core backend (which auto-starts Vite dev server)
39+
- Opens Chrome for both server and client debugging
40+
- Best for full-stack development with hot reload
41+
42+
2. **`Full Stack (Production Build)`**
43+
- Builds client assets and starts .NET Core backend
44+
- Tests the production build
45+
46+
3. **`Full Stack (Edge)`**
47+
- Same as development but uses Microsoft Edge
48+
49+
## How to Use
50+
51+
### For Full-Stack Development (Most Common)
52+
53+
1. Open VS Code in the smtp4dev repository root
54+
2. Press `F5` or go to Run and Debug → "Full Stack (Development)"
55+
3. Wait for the .NET server to start (it will auto-launch Vite)
56+
4. Chrome will open automatically at http://localhost:5000
57+
5. Set breakpoints in both C# (.cs files) and TypeScript/Vue (.ts/.vue files)
58+
59+
### Development Workflow
60+
61+
1. **Backend Changes**: Edit C# files → breakpoints work immediately
62+
2. **Frontend Changes**: Edit Vue/TS files → hot reload updates the browser automatically
63+
3. **API Testing**: All requests go through http://localhost:5000
64+
65+
### Port Configuration
66+
67+
- **Backend (.NET)**: http://localhost:5000 (main entry point)
68+
- **Frontend (Vite)**: http://127.0.0.1:5173 (auto-started, proxied by backend)
69+
- **Debugging**: Always use http://localhost:5000
70+
71+
### Debugging Features
72+
73+
- **Source Maps**: Both client and server debugging with full source map support
74+
- **Hot Reload**: Frontend changes update immediately without losing state via Vite integration
75+
- **Breakpoints**: Set breakpoints in TypeScript, Vue components, and C# code
76+
- **Multiple Browsers**: Separate debug profiles for Chrome and Edge
77+
- **Console Debugging**: Full access to browser and server console output
78+
- **Integrated Architecture**: Single entry point (localhost:5000) handles everything
79+
80+
## Troubleshooting
81+
82+
### Port Already in Use
83+
If you get port conflicts:
84+
- Stop other instances of the application
85+
- Check for running dotnet processes: `Get-Process dotnet` (PowerShell)
86+
- Port 5173 conflicts: The .NET app manages Vite, so stop the .NET process
87+
88+
### Windows-Specific Issues
89+
- The application automatically handles cross-platform Vite launching
90+
- No need to manually start Vite - it's integrated into the .NET startup process
91+
92+
### Source Maps Not Working
93+
- Ensure the .NET application is running (it manages the Vite dev server)
94+
- Check the browser's Developer Tools → Sources tab
95+
- Verify TypeScript compilation is successful
96+
97+
### Frontend Not Updating
98+
- Check that hot reload is working (should see updates automatically)
99+
- Ensure you're browsing to http://localhost:5000 (not 5173 directly)
100+
- The .NET app proxies requests to Vite automatically
101+
102+
### Backend API Not Responding
103+
- Ensure the .NET Core backend is running on port 5000
104+
- Check the Debug Console for any startup errors
105+
- Verify appsettings.json configuration
106+
107+
## Tips
108+
109+
1. **Use "Full Stack (Development)" for daily development** - it provides the best experience
110+
2. **Always browse to localhost:5000** - this is the integrated entry point
111+
3. **Set breakpoints before starting debugging** - they'll be hit as soon as the code runs
112+
4. **Use the integrated terminal** - you can see both .NET and Vite output
113+
5. **Browser DevTools** - Use alongside VS Code debugging for complete frontend inspection
114+
6. **Stop All** - Use Ctrl+Shift+F5 to stop all debug sessions at once
115+
7. **Don't manually start Vite** - let the .NET app handle it automatically
116+
117+
## File Structure for Debugging
118+
119+
```
120+
.vscode/
121+
├── launch.json # Debug configurations
122+
├── tasks.json # Build and preparation tasks
123+
├── settings.json # VS Code settings for better debugging
124+
└── DEBUG.md # This file
125+
126+
Rnwood.Smtp4dev/
127+
├── ClientApp/
128+
│ ├── vite.config.js # Updated with proxy and source map config
129+
│ └── src/ # Frontend source files
130+
└── *.cs # Backend source files
131+
```

‎.vscode/extensions.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"recommendations": [
3+
"ms-dotnettools.csharp",
4+
"ms-dotnettools.csdevkit",
5+
"ms-vscode.vscode-typescript-next",
6+
"vue.volar",
7+
"vue.vscode-typescript-vue-plugin",
8+
"ms-vscode.js-debug",
9+
"ms-vscode.js-debug-companion",
10+
"ms-edgedevtools.vscode-edge-devtools",
11+
"bradlc.vscode-tailwindcss",
12+
"esbenp.prettier-vscode",
13+
"dbaeumer.vscode-eslint",
14+
"ms-vscode.PowerShell",
15+
"ms-vscode-remote.remote-containers",
16+
"github.copilot",
17+
"ms-dotnettools.vscode-dotnet-runtime",
18+
"formulahendry.auto-rename-tag",
19+
"christian-kohler.path-intellisense",
20+
"visualstudioexptteam.vscodeintellicode"
21+
]
22+
}

‎.vscode/launch.json‎

Lines changed: 80 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,101 @@
33
// Use hover for the description of the existing attributes
44
// For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
55
"version": "0.2.0",
6-
"configurations": [{
6+
"configurations": [
7+
{
78
"name": ".NET Core Launch (web)",
89
"type": "coreclr",
910
"request": "launch",
1011
// If you have changed target frameworks, make sure to update the program path.
1112
"program": "${workspaceFolder}/Rnwood.Smtp4dev/bin/Debug/net8.0/Rnwood.Smtp4dev.dll",
1213
"cwd": "${workspaceFolder}/Rnwood.Smtp4dev",
13-
"args": "--recreatedb --urls http://localhost:5000",
14+
"args": ["--recreatedb", "--urls", "http://localhost:5000"],
1415
"stopAtEntry": false,
1516
"internalConsoleOptions": "openOnSessionStart",
16-
"preLaunchTask": "build Rnwood.Smtp4dev"
17-
17+
"preLaunchTask": "build Rnwood.Smtp4dev",
18+
"env": {
19+
"ASPNETCORE_ENVIRONMENT": "Development",
20+
"ASPNETCORE_URLS": "http://localhost:5000"
21+
}
22+
},
23+
{
24+
"name": "Attach to .NET Core",
25+
"type": "coreclr",
26+
"request": "attach",
27+
"processId": "${command:pickProcess}"
1828
},
1929
{
30+
"name": "Chrome (Client Debug)",
2031
"type": "chrome",
2132
"request": "launch",
22-
"name": "Chrome",
2333
"url": "http://localhost:5000",
2434
"webRoot": "${workspaceFolder}/Rnwood.Smtp4dev/ClientApp/src",
25-
"breakOnLoad": true,
2635
"sourceMapPathOverrides": {
27-
"webpack:///src/*": "${webRoot}/*"
28-
}
29-
36+
"../../ClientApp/src/*": "${webRoot}/*",
37+
"../ClientApp/src/*": "${webRoot}/*",
38+
"./ClientApp/src/*": "${webRoot}/*",
39+
"/ClientApp/src/*": "${webRoot}/*",
40+
"src/*": "${webRoot}/*"
41+
},
42+
"userDataDir": "${workspaceFolder}/.chrome-debug-profile"
43+
},
44+
{
45+
"name": "Chrome (Full App)",
46+
"type": "chrome",
47+
"request": "launch",
48+
"url": "http://localhost:5000",
49+
"webRoot": "${workspaceFolder}/Rnwood.Smtp4dev/wwwroot",
50+
"sourceMapPathOverrides": {
51+
"../../ClientApp/src/*": "${workspaceFolder}/Rnwood.Smtp4dev/ClientApp/src/*",
52+
"../ClientApp/src/*": "${workspaceFolder}/Rnwood.Smtp4dev/ClientApp/src/*",
53+
"./src/*": "${workspaceFolder}/Rnwood.Smtp4dev/ClientApp/src/*",
54+
"src/*": "${workspaceFolder}/Rnwood.Smtp4dev/ClientApp/src/*"
55+
},
56+
"userDataDir": "${workspaceFolder}/.chrome-debug-profile-prod"
57+
},
58+
{
59+
"name": "Edge (Client Debug)",
60+
"type": "msedge",
61+
"request": "launch",
62+
"url": "http://localhost:5000",
63+
"webRoot": "${workspaceFolder}/Rnwood.Smtp4dev/ClientApp/src",
64+
"sourceMapPathOverrides": {
65+
"../../ClientApp/src/*": "${webRoot}/*",
66+
"../ClientApp/src/*": "${webRoot}/*",
67+
"./ClientApp/src/*": "${webRoot}/*",
68+
"/ClientApp/src/*": "${webRoot}/*",
69+
"src/*": "${webRoot}/*"
70+
},
71+
"userDataDir": "${workspaceFolder}/.edge-debug-profile"
3072
}
3173
],
32-
"compounds": [{
33-
"name": "Full stack",
34-
"configurations": [
35-
".NET Core Launch (web)",
36-
"Chrome"
37-
],
38-
"preLaunchTask": "build Rnwood.Smtp4dev"
39-
}]
74+
"compounds": [
75+
{
76+
"name": "Full Stack (Development)",
77+
"configurations": [
78+
".NET Core Launch (web)",
79+
"Chrome (Client Debug)"
80+
],
81+
"preLaunchTask": "prepare-fullstack-debug",
82+
"stopAll": true
83+
},
84+
{
85+
"name": "Full Stack (Production Build)",
86+
"configurations": [
87+
".NET Core Launch (web)",
88+
"Chrome (Full App)"
89+
],
90+
"preLaunchTask": "build-all",
91+
"stopAll": true
92+
},
93+
{
94+
"name": "Full Stack (Edge)",
95+
"configurations": [
96+
".NET Core Launch (web)",
97+
"Edge (Client Debug)"
98+
],
99+
"preLaunchTask": "prepare-fullstack-debug",
100+
"stopAll": true
101+
}
102+
]
40103
}

‎.vscode/settings.json‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,32 @@
99
],
1010
"npm.includeDirectories": [
1111
"Rnwood.Smtp4dev/ClientApp"
12-
]
12+
],
13+
"debug.allowBreakpointsEverywhere": true,
14+
"debug.showSubSessionsInToolBar": true,
15+
"debug.toolBarLocation": "docked",
16+
"typescript.preferences.includePackageJsonAutoImports": "auto",
17+
"typescript.suggest.autoImports": true,
18+
"typescript.updateImportsOnFileMove.enabled": "always",
19+
"dotnet.defaultSolution": "./smtp4dev.sln",
20+
"dotnet.completion.showCompletionItemsFromUnimportedNamespaces": true,
21+
"dotnet.preferCSharpExtension": true,
22+
"omnisharp.enableEditorConfigSupport": true,
23+
"omnisharp.enableImportCompletion": true,
24+
"omnisharp.enableRoslynAnalyzers": true,
25+
"csharp.semanticHighlighting.enabled": true,
26+
"csharp.format.enable": true,
27+
"files.exclude": {
28+
"**/node_modules": true,
29+
"**/bin": true,
30+
"**/obj": true,
31+
"**/.chrome-debug-profile*": true,
32+
"**/.edge-debug-profile*": true
33+
},
34+
"search.exclude": {
35+
"**/node_modules": true,
36+
"**/bin": true,
37+
"**/obj": true,
38+
"**/wwwroot": true
39+
}
1340
}

0 commit comments

Comments
 (0)