Debugging with Chrome as described in Documentation does not work

[codepunkt]

Is this a bug report?

Yes.

Can you also reproduce the problem with npm 4.x?

Yes.

Which terms did you search for in User Guide?

Debugging in the Editor

Environment

node@8.6.0
npm@5.5.0
react-scripts@1.0.14
windows 10
vscode@1.17.1
chrome@61.0.3163.100

Steps to Reproduce

1. create-react-app chromeDebuggingTest
2. cd chromeDebuggingTest
3. npm i
4. npm run start
5. open Visual Studio Code
6. add a .vscode folder with a launch.json according to the a
7. set a breakpoint in Visual Studio Code (red dot on the left of a line of source code)
8. select the debugging Panel in Visual Studio Code, press the play/start button labeled "Chrome"
9. see the breakpoint not being hit when the app is executed in Chrome

Expected Behavior

Breakpoint being hit in Chrome

Actual Behavior

• breakpoint is not hit
• breakpoint color turns grey in Visual Studio Code
• it has something to do with sourcemaps not matching

[marcelorl]

@codepunkt I might be looking for something like this:

https://developers.google.com/web/tools/chrome-devtools/javascript/

You must use sources tab from devtools, once in there, you can find for files (cmd + p) to debug and set breakpoints.

[codepunkt]

@marcelorl Thanks for the advice! There's quite a few ways to debug my application - the one outlined in your answer is one of them. My problem is not debugging in general, but explicitly debugging in VSCode using the VSCode Chrome Debugger extension as described in the User Guide.

[auchenberg]

@codepunkt I just followed your instructions and set a breakpoint in App.js on line 9 and my breakpoint is hit using Chrome 62. You need to refresh the page in Chrome to get have your breakpoint hit in your React render code, as it's being executed before VS Code is able to attach to Chrome. Similar to how you sometimes need to refresh after Chrome DevTools has opened.

I know this can be confusing, but it's a simple timing problem, as our debugger attaches after Chrome has executed the code. We are working on enabling "break-on-load" breakpoints in https://github.com/Microsoft/vscode-chrome-debug/issues/445, which will make this timing issue transparent.

(cc @gaearon)

[gaearon]

I know this can be confusing, but it's a simple timing problem, as our debugger attaches after Chrome has executed the code. We are working on enabling "break-on-load" breakpoints in Microsoft/vscode-chrome-debug#445, which will make this timing issue transparent.

Can we also add a sentence to our docs about this?

[auchenberg]

I've added a section about this in our README, and I don't want to replicate general FAQs into framework specific docs, but we could update the react docs to have a pointer?

[auchenberg]

Opened here #3399