Slow processing of variables on hitting a breakpoint
See original GitHub issueHello,
I’m a maintainer of React Native Tools VS Code extension. The extension is used for debugging React Native applications. Under the hood the extension uses vscode-js-debug
debugger to debug javascript apps.
Describe the bug
After the update of VS Code to the version 1.57.0 we detected that processing of variables on the first hitting of a breakpoint can take quite a long time. However further breakpoints hittings are handled fine. We found out that such behavior appeared after the implementation of Support for renamed identifiers in sourcemaps
feature in this PR. We looked through CDP logs and revealed that now js-debug
retrieves the whole bundled code of the application (via “Debugger.getScriptSource” method) and processes it. We assume that this could take a long time.
To Reproduce The issue can be reproduced using a node attach scenario, but it requires some preparations.
Steps to reproduce the behavior:
- Prepare development environment for Android React Native following this guide
- Create a React Native app using the command:
npx react-native init AwesomeProject
- We prepared a special version of RNT extension, in which we suppressed attachment to an application in debugging scenarios. You can download this VSIX and install it.
- Open your RN project in VS code and create
Debug Android
debugging configuration{ "name": "Debug Android", "cwd": "${workspaceFolder}", "type": "reactnative", "request": "launch", "platform": "android" }
- Open
App.js
file and set a breakpoint on the 62 line (return statement) - Run the
Debug Android
debugging scenario and wait until you see something like this in Debug console
The debugging scenario should launch the RN app on an Android emulator.Starting debugger app worker. Attaching to the application Launching the application Established a connection with the Proxy (Packager) to the React Native application Debugger worker loaded runtime on port 9468
- Enable debugging in the launched application following this guide. If after that an error is shown in the app, click
Reload
button. - Create the
Attach
debugging scenario
The port should be the same as a debugger worker has.{ "type": "pwa-node", "request": "attach", "name": "Attach", "port": 9468, "sourceMaps": true, "continueOnAttach": true, "resolveSourceMapLocations": [ "!**/debuggerWorker.js" ] }
- Run the
Attach
scenario - Continue on the first technical breakpoint (the debuggerWorker process is launched in
--inspect-brk
mode) - After that, your previously set breakpoint should be reached
Probable solution We are not sure about the solution, but it might make sense to add a special parameter to debugging configurations to enable/disable the “Support for renamed identifiers in sourcemaps” feature. So, users can configure it if they really need additional processing of variables while debugging.
Log File Js-debug logs: vscode-debugadapter-f39647b7.json.gz CDP logs: currentCDPlogs.txt previousCDPlogs_vs_code_1_56.txt
VS Code Version: 1.57.0
Issue Analytics
- State:
- Created 2 years ago
- Reactions:3
- Comments:5 (3 by maintainers)
Top GitHub Comments
You can now set
sourceMapRenames: false
in the launch config to disable this functionalityExperiencing the same issue. It takes about 2 minutes to be able to continue debugging. Version: 1.57.1 MacOS 11.5 Beta (20G5042c)