Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Debugging in VS Code highlights wrong code line

See original GitHub issue

Is this a bug report?


Did you try recovering your dependencies?


Which terms did you search for in User Guide?

VS Code debugging


    OS: macOS 10.14.2
    CPU: x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
    Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
    npm: 6.4.1 - ~/.nvm/versions/node/v10.13.0/bin/npm
    Chrome: 71.0.3578.98
    Firefox: 63.0.1
    Safari: 12.0.2
    react: ^16.6.3 => 16.6.3 
    react-dom: ^16.6.3 => 16.6.3 
    react-scripts: 2.1.1 => 2.1.1 
    create-react-app: Not Found

Steps to Reproduce

TL;DR: Debug a CRA app in the VS Code debugger and break on a breakpoint or debugger; statement. When clicking on a stack frame in the call stack that’s inside react-dom.development.js, the highlighted line of code is wrong.

  1. Install VS Code 1.30.0 or 1.31.0-insider and the Debugger for Chrome extension version 4.11.1.
  2. npx create-react-app debugging-test
  3. Copy the suggested launch.json file from CRA documentation into a newly created .vscode directory inside the project.
  4. Add debugger; to the beginning of the render() method in App.js.
  5. npm start
  6. Hit <kbd>F5</kbd> in VS Code to launch Chrome and start debugging.
  7. After the debugger pauses, select the second-topmost stack frame (finishClassComponent in react-dom.development.js). Observe the highlighted line of code.

Expected Behavior

The correct line of code inside the finishClassComponent function is highlighted, like in Chrome Dev Tools:

screen shot 2018-12-15 at 4 12 30 am

Actual Behavior

An incorrect line of code is highlighted.

screen shot 2018-12-15 at 4 13 07 am

This issue is related to source mapping.

The number of the highlighted line is the same in Chrome Dev Tools and VS Code, but the source code displayed in Chrome Dev Tools, which is derived from source maps, is different. react-dom.development.js has 20,749 lines of code in Chrome, but the actual file shown in VS Code has 19,727 lines.

The extent to which this issue duplicates #5319 is unclear to me. It’s not about testing, and doesn’t seem to relate to breakpoint location. Rather it’s about the code reconstructed from the source maps being different from the actual source and the VS Code debugger being tripped by this. The problem can also be reproduced by calling some code in react-dom and manually stepping into it.

For what it’s worth, I tried adding the "disableOptimisticBPs": true option suggested in #5319 to launch.json, but it doesn’t seem to be a valid option when "type" is "chrome".

Reproducible Demo

Repro repo

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:11
  • Comments:21 (7 by maintainers)

github_iconTop GitHub Comments

justingrantcommented, May 9, 2019

Hey! I figured out the cause of this problem and built a PR to fix it. Full details about the problem and the solution are in #7022, but here’s a quick TL;DR:

  • The cause was CRA configuring Babel with sourceMaps: false. This setting apparently causes Babel not to omit sourcemaps but instead to emit bad sourcemaps where sourcesContent (the inline code inside the sourcemap file) and the row/col mappings don’t match the original source code.
  • Changing it to sourceMaps: true (and adding inputSourceMaps: true too) fixes the problem so that sourcesContent and row/col mappings will match the original source.
  • The problem was only showing up in VSCode (and not in Chrome debugger) because Chrome only uses sourcesContent which was matching the sourcemap’s row/col mappings. VSCode (which uses the original source files if they’re pointed to by the sources array in the sourcemap) was hosed because the original source didn’t match the sourcemap. FYI @roblourens. I wonder if VSCode should compare the source file to the sourcesContent content, and if they don’t match, should show sourcesContent instead, so that even if Babel or webpack is misconfigured, the user will at least see valid code?
  • If you don’t want to wait until the PR is merged and the next CRA release is cut, you can just edit node_modules/react-scripts/config/webpack.config.js yourself-- it’s an easy change. Replace this code: with this code:
                // Babel sourcemaps are needed for debugging into node_modules
                // code.  Without the options below, debuggers like VSCode
                // show incorrect code and set breakpoints on the wrong lines.
                sourceMaps: shouldUseSourceMap,
                inputSourceMap: shouldUseSourceMap,
bfloratcommented, Mar 25, 2019

same here !

Read more comments on GitHub >

github_iconTop Results From Across the Web

Debugger highlights the wrong line when stopping if word ...
The problem is that VSCode does not highlight the correct line, and does not show the variables values on the debug panel. I...
Read more >
Debugger highlights wrong line, steps over code without ...
In my test case, the debugger will properly skip the if block and correctly highlight the "x--" line as it should, but hitting...
Read more >
Visual Studio Code breakpoint appearing in wrong place
In my Vue+Vuex project, I am trying to debug using Visual Studio Code. I have the debugger launching ...
Read more >
Debugging in Visual Studio Code
To run or debug a simple app in VS Code, select Run and Debug on the Debug start view or press F5 and...
Read more >
How To Highlight Errors And Warnings In VS Code - YouTube
How to set up Visual Studio Code for Executing and Debugging C Programs | Tutorial · Capture Screenshot Using #python | #shorts #tipsandtricks....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found