Awesome Debugging Tools

Or, how to avoid using console.log.

Visual Studio Code

Run the Chromium-based version of Edge with msedge.exe --remote-debugging-port=9999.

Update the .vscode\launch.json file to allow attaching to your development website, as follows:

{
  "configurations": [{
    "type": "pwa-msedge",
    "request": "attach",
    "port": 9996,
    "name": "Edge Canary (attach)",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceFolder}",
    "sourceMaps": true
  }, {
    "type": "pwa-msedge",
    "request": "attach",
    "port": 9999,
    "name": "Edge Stable (attach)",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceFolder}",
    "sourceMaps": true
  }],
  "version": "0.2.0"
}

The same works for Chrome too. Just replace msedge.exe with chrome.exe and "type": "pwa-msedge" with "type": "pwa-chrome".

If Edge or Chrome hangs when trying to debug, run netstat -aon | findstr 9999 which will list the processes that are listening on the debug port. When the process ID (PID) is 0 it means the port has been released but Windows hangs on to it for another 2 minutes. So, instead of restarting your computer, just wait two minutes and then launch Edge and VS Code again; debugging should work fine now.