- Microsoft Edge DevTools documentation overview
- Can I use? browser compatibility and support charts
- DevTools inspect tool
- DevTools Elements Tool
- DevTools CSS Grid Inspection
- DevTools Font Editor
- DevTools Issues tool
- Filtering Issue Reports
- Filtering Console Messages
- Device Emulation
- Mode Emulation
- Visual Deficiencies Emulation
- Opening files from DevTools in VS Code
- Edge DevTools for VS Code Extension
- Edge DevTools for VS Code GitHub Repository
- Edge DevTools GitHub Repository
- Visual Studio Code for the web
- GitHub CoPilot
- Blog Post: Automatically starting a server when starting a debug session
- YouTube Video
- Demo Code To Do App
Demo code launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-msedge",
"request": "launch",
"name": "webdebug",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"runtimeExecutable": "canary",
"runtimeArgs": ["--headless"],
"preLaunchTask": "start server",
"postDebugTask": "stop server"
},
]
}Demo code tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"label": "start server",
"type": "shell",
"isBackground": true,
"command": "http-server",
"presentation": { "reveal": "silent" },
"problemMatcher": [{
"pattern": [{
"regexp": ".",
"file": 1,"line": 1,
"column": 1,"message": 1
}],
"background": {
"activeOnStart": true,
"beginsPattern": { "regexp": "." },
"endsPattern": { "regexp": "." }
},
}]
},
{
"label": "stop server",
"command": "echo ${input:terminate}",
"type": "shell"
},
],
"inputs": [{
"id": "terminate",
"type": "command",
"command": "workbench.action.tasks.terminate",
"args": "terminateAll"
}]
}