VSCode: Debug client code with Meteor (using chrome-debug extension)

help
1

Hi all, I got a working launch.json going for client side debugging. Instead of resurrecting an old thread, I thought I would add this config here in case it helps: Key is setting the runtime args for chrome to open a remote debugging port for you. Server debugging is straightforward, just run meteor debug and attach to the node process.

If you are on windows, or do not use Chrome Canary as installed by default on Mac OS X, you will need to modify the runtime executable path

To debug client code using this config:

  • be sure to modify the url key in this config to work with your running meteor instance on localhost
  • set a breakpoint somewhere
  • start your app normally
  • select “Launch Chrome against localhost, with sourcemaps” in the debugger pane of VSCode.

If you get an error like ‘page not available’

  • Are you using a root redirector for unauthenticated users? It may be taking them to the login page.
    (Initially I tried using http://localhost:3000/, but it would not attach because of a redirect)
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome against localhost, with sourcemaps",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000/login",
      "port": 9222,
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}",
      "userDataDir": "${workspaceRoot}/.vscode/out/chrome",
      "runtimeExecutable": "/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary",
      "runtimeArgs": [
        "--remote-debugging-port=9222"
      ]
    },
    {
      "name": "Attach",
      "type": "node",
      "request": "attach",
      "port": 5858,
      "address": "localhost",
      "restart": false,
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.meteor/local/build/programs/server",
      "localRoot": "${workspaceRoot}",
      "remoteRoot": null
    }
  ]
}