Ncc: Supporting debugger with ncc run

[benseitz]

Running ncc with the node --inspect flag like so

node --inspect ./node_modules/@zeit/ncc/dist/ncc/cli.js run input.js

returns following error:

Starting inspector on 127.0.0.1:9229 failed: address already in use

This seems to be related to nodejs/node#9435.

If I first build and debug the builded output (with source maps) it kind of works, but the debugger shows me the index.js (nicely formatted) and not the original files.

Does anyone have a successful debugging setup and care to share their experiences? (I'm using VS Code)

[guybedford]

This is likely due to ncc using the v8 cache through VM.

Perhaps try:

node --inspect ./node_modules/@zeit/ncc/dist/ncc/cli.js.cache.js run input.js

[guybedford]

Although that will just allow you to debug ncc itself I guess, the run process is still being forked so the inspect flag won't be supported.

I don't think this is actually possible any other way though due to the child process mechanics of run.

[benseitz]

Can someone point me in the direction how to debug an app, that uses imports and needs compilation because of that?

[styfle]

Related to #316

@benseitz I was going to suggest using either ncc build index.ts --source-map --no-source-map-register or ncc build index.ts --source-map but after trying both, neither one seemed to work with the node --inspect-brk dist/index.js flag.

@guybedford Can you confirm if this is a bug:

git clone https://github.com/styfle/ncc-bug-sourcemap
cd ncc-bug-sourcemap
yarn

yarn build                       # builds with tsc proper
node --inspect-brk dist/index.js # attaches and breakpoints work in .ts

rm -rf dist

ncc build index.ts --source-map --no-source-map-register
node --inspect-brk dist/index.js # attaches but no breakpoints in .ts

That repo has a VS Code "attach" task you can use to compare the two source maps.

[guybedford]

@styfle great points... yes we should support this workflow somehow!

So the reason we don't get the breakpoints is because the source map by default emits paths like /test.ts, whereas tsc emits paths like ../test.ts relating everything back to the source file relative to the current folder.

In fact by default webpack emits webpack:///test.ts in the output, so we've already modified the output here.

It should be possible to output properly relative source maps paths though. I've created https://github.com/zeit/ncc/issues/319 to track this further.