Enable debugging in Chrome and VS Code - fixes #435

[nsivertsen]

This PR makes it possible to start and connect to a debugging session inside the dev server of a Sapper app from Chrome and VS Code. Previously this only worked from ndb.

See #435

Chrome:

1. $ cd my_sapper_project
2. $ node --inspect node_modules/sapper/dist/cli.js dev
3. visit chrome://inspect in Chrome
4. click on "Open dedicated DevTools for Node"
5. (you might have to add the folder of your Sapper project to the workspace)

VS Code:

1. Debug > Add Configuration...
2. Use the following launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "dev",
      "program": "${workspaceFolder}/node_modules/sapper/dist/cli.js",
      "args": [
        "dev"
      ],
      "autoAttachChildProcesses": true
    }
  ]
}

3. Debug > Start Debugging

I've found the experience of coding in VS Code with a dev server + debug session running in the background quite pleasurable: Make some changes, hit save, the app is rebuilt, all while your breakpoints and watch expressions stay in place.

I've tried this in Webstorm, and it works there as well, until you change a file and hit save. Webstorm tries to hold onto the previous server process (which has been killed) and gets confused when you try to carry on stepping through your code. I assume this is a bug in Webstorm, and not a Sapper problem.

Fixes #435

[nsivertsen]

I've added this here with an eye towards making the DevTools port a command-line switch in the future.

[Rich-Harris]

Oh wow, this is awesome! Thank you

[quantuminformation]

@nsivertsen can you share your exact settings and steps to debug this in webstorm please?

I tried

Do you debug the generated server folder file or the src?

[nsivertsen]

Hi @quantuminformation, I unfortunately don't current have access to the computer I tried this on with Webstorm, but your config seems right, apart from the working directory (I would set that one level higher up), and you need to pass the dev flag to cli.js. I would turn on source maps and debug the source.

[quantuminformation]

Great, that seems to have worked now, will play around.

[quantuminformation]

For posterity: ndb is https://github.com/GoogleChromeLabs/ndb

[quantuminformation]

I made a video to show this debugging in action:

https://www.youtube.com/watch?v=x155wGkbKm8

Any ideas on how to debug a sapper app running on cloud run?