I can't add breakpoint when debug

[nodew]

I cloned the project, and didn't change any code. When I debug in my vscode on mac, it works(open a new chrome window and can be interrupted) but I can't add breakpoint to it and it doesn't generate the ".vscode/chrome" folder. how could I solve the problem?

[skolmer]

If chrome starts when you hit F5 to debug and there is no chrome user directory in .vscode this could be a user rights issue. do you get any errors in the debugger console?

You can activate diagnosticLogging for chrome debugger to get detailed info when your breakpoints fail: https://github.com/Microsoft/vscode-chrome-debug#other-optional-launch-config-fields

[nodew]

sorry, I found user directory existed in .vscode, but be excluded in setting.json.

[skolmer]

Ok, that is intended because the size of this directory would slow vscode down. Let me know if you find anything helpful in chrome debugger diagnostic log.

[nodew]

the log is too long for copy and paste, and no error occurred, will these two be helpful?

1. Paths.scriptParsed: could not resolve http://localhost:3000/bundle.js to a file under webRoot: /Users/sirqiao/development/react-hot-boilerplate-vscode. It may be external or served directly from the server's memory (and that's OK).
2. Warning: SourceMap sources are inlined. This extension ignores inlined sources. If the paths are not correct, sourcemap support won't work.

[skolmer]

You could attach the file by dragging it into your comment.
If you add a breakpoint to a file you should find a line in diagnostic log like From client: setBreakpoints({"source":{"path":"...

[nodew]

when I set breakpoint, I got log like this:

  ›SourceMaps.setBP: Mapped /Users/sirqiao/development/react-hot-boilerplate-vscode/src/Counter.js to debugadapter://446
  ›SourceMaps.setBP: Mapped /Users/sirqiao/development/react-hot-boilerplate-vscode/src/Counter.js:12:1 to debugadapter://446:5:1
  ›Paths.setBP: debugadapter://446 is already a URL
  ›SourceMaps.setBP: Mapped debugadapter://446:9:6 to /Users/sirqiao/development/react-hot-boilerplate-vscode:9

[skolmer]

This is strange. I have set a breakpoint to the same line and it got hit. The log looks like this:

  ›SourceMaps.setBP: Mapped d:\Github\react-hot-boilerplate-vscode\src\Counter.js to debugadapter://485
  ›SourceMaps.setBP: Mapped d:\Github\react-hot-boilerplate-vscode\src\Counter.js:12:1 to debugadapter://485:12:1
  ›Paths.setBP: debugadapter://485 is already a URL
  ›SourceMaps.setBP: Mapped debugadapter://485:12:13 to d:\Github\react-hot-boilerplate-vscode\src\Counter.js:12

you can see in the last line that it maps to \Counter.js:12 but in your case it maps to /react-hot-boilerplate-vscode:9 which is obviously wrong.
This seems to be an issue with chrome debugger on mac. You could try to get some help here: https://github.com/Microsoft/vscode-chrome-debug/issues

[VolkerFried]

Hello skolmer,

i cloned the projekt this morning and have the same problems like sirqiao. Chrome opens fine. But no breakpoints.

I run Visual Studio Code on Windows.

Log shows also:

›SourceMaps.setBP: Mapped debugadapter://443:9:6 to c:\Projekte\Github\react-hot-boilerplate-vscode:9

Thanks for help

[skolmer]

That's interesting I'm on windows too and it's working.
What's your debugger version?
I'm using Debugger for Chrome 0.5.2 and vscode 1.5.0-insider.

[VolkerFried]

vscode: 1.4.0
Debugger for Chrome: 0.5.2

Should i update vscode?

[skolmer]

I checked with vscode 1.4.0 and can't reproduce the error.
I will retry later today with a fresh clone of the project and let you know if I can reproduce the error.

[skolmer]

@sirqiao @VolkerFried I have just realized that chrome debugger is warning about inline sourcemaps.
To change this behavior you can change the devtool in webpack.config.dev.js to #cheap-module-source-map

The debug output will look like this

  ›SourceMaps.setBP: Mapped d:\Github\react-hot-boilerplate-vscode\src\Counter.js to http://localhost:3000/bundle.js
  ›SourceMaps.setBP: Mapped d:\Github\react-hot-boilerplate-vscode\src\Counter.js:12:1 to http://localhost:3000/bundle.js:34886:1
  ›Paths.setBP: http://localhost:3000/bundle.js is already a URL
  ›SourceMaps.setBP: Mapped http://localhost:3000/bundle.js:34886:14 to d:\Github\react-hot-boilerplate-vscode\src\Counter.js:12

Please let me know if this works for you.

[VolkerFried]

I' m finding this lines in the log:

SourceMaps.getMapForGeneratedPath: Using inlined sourcemap in debugadapter://447
SourceMap: creating for debugadapter://447
SourceMap: sourceRoot:
SourceMap: sources: ["webpack:///src/Counter.js?08a5","webpack:///?d41d"]
Warning: SourceMap sources are inlined. This extension ignores inlined sources. If the paths are not correct, sourcemap support won't work.
SourceMap: webRoot: c:\Projekte\Github\react-hot-boilerplate-vscode
SourceMap: no sourceRoot specified, using webRoot + script path dirname: c:\Projekte\Github\react-hot-boilerplate-vscode
SourceMap: mapping webpack:///src/Counter.js?08a5 => c:\Projekte\Github\react-hot-boilerplate-vscode\src\Counter.js?08a5, via sourceMapPathOverrides entry - "webpack:///": "c:\Projekte\Github\react-hot-boilerplate-vscode/"
SourceMap: mapping webpack:///?d41d => c:\Projekte\Github\react-hot-boilerplate-vscode?d41d, via sourceMapPathOverrides entry - "webpack:///": "c:\Projekte\Github\react-hot-boilerplate-vscode/"
SourceMaps.scriptParsed: debugadapter://447 was just loaded and has mapped sources: ["c:\Projekte\Github\react-hot-boilerplate-vscode\src\Counter.js","c:\Projekte\Github\react-hot-boilerplate-vscode"]
SourceMaps.scriptParsed: Resolving pending breakpoints for c:\Projekte\Github\react-hot-boilerplate-vscode\src\Counter.js
SourceMaps.setBP: Mapped c:\Projekte\Github\react-hot-boilerplate-vscode\src\Counter.js to debugadapter://447
SourceMaps.setBP: Mapped c:\Projekte\Github\react-hot-boilerplate-vscode\src\Counter.js:12:1 to debugadapter://447:5:1
Paths.setBP: debugadapter://447 is already a URL
To target: {"id":3,"method":"Debugger.setBreakpoint","params":{"location":{"scriptId":"447","lineNumber":4,"columnNumber":0}}} ...

I'm missing this Line:

SourceMaps.setBP: Mapped http://localhost:3000/bundle.js:34886:14 to d:\Github\react-hot-boilerplate-vscode\src\Counter.js:12

Any Ideas? Thanks for your help

[nodew]

I set "devtool" to "#cheap-eval-source-map", and it work for me on my surface pro 4
vscode: 1.4
›OS: win32 ia32
›Node: v5.10.0
›vscode-chrome-debug-core: 0.1.19
›debugger-for-chrome: 0.5.2

[skolmer]

@VolkerFried It looks like your dev server is still running with the old configuration. Please try to terminate the task via vscode or try to cancel the node process via task manager and restart the debugger/devserver

[skolmer]

@sirqiao does "#cheap-module-source-map" work on your mac?

[nodew]

My mac isn't with me, I will try it tomorrow, and give the result.

[nodew]

"#cheap-module-source-map" doesn't work on my mac either. But "#cheap-eval-source-map" work well.

[skolmer]

Thanks for testing!
cheap-eval-source-map is the last option I expected to work. With this option you would have inline source maps and the line number would match the transpiled file's line number instead of the original.
Here is a good explanation of the different devtool settings: http://cheng.logdown.com/posts/2016/03/25/679045

I will try to get some help from the vscode-chrome-debug team to investigate this issue

[VolkerFried]

@skolmer
Yes there was an old running node.exe Task. Stop debugging button don't stop the server process.

Stopping the old Task and set devtool to "#cheap-eval-source-map" in webpack.config.dev.js worked also fine for me:)

Thanks for your fast help

[skolmer]

webpack/webpack#2145
facebook/create-react-app#139 (comment)
webpack/webpack#2846

[skolmer]

I will keep this open until it's clear what is causing this issue

[skolmer]

After a fresh clone of the project I was able to reproduce the error with #cheap-module-eval-source-map. I changed the devtool config of the project to #cheap-eval-source-map.

[skolmer]

microsoft/vscode-chrome-debug-core#83