Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

Debugging in VS Code highlights wrong code line

Created by: raiskila

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

VS Code debugging

Environment

  System:
    OS: macOS 10.14.2
    CPU: x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
  Binaries:
    Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
    npm: 6.4.1 - ~/.nvm/versions/node/v10.13.0/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 63.0.1
    Safari: 12.0.2
  npmPackages:
    react: ^16.6.3 => 16.6.3 
    react-dom: ^16.6.3 => 16.6.3 
    react-scripts: 2.1.1 => 2.1.1 
  npmGlobalPackages:
    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 F5 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 (closed) 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 (closed) to launch.json, but it doesn't seem to be a valid option when "type" is "chrome".

Reproducible Demo

Repro repo