Breakpoints do not work with a react native setup in Visual Studio Code
See original GitHub issue- Issue
Breakpoints don’t work in VSCode. If you use a debugger
statement, it will break at the correct place, and show the correct sources, so the sourcemaps are being loaded and parsed.
On every breakpoint VSCode reports:
breakpoint not ignored because generated code not found (source map problem?)
This issue is related to #209 - it is the same setup that works in webstorm. Here are my config files.
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug Jest",
"program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
"args": ["--runInBand", "--no-cache"],
"cwd": "${workspaceRoot}",
"console": "integratedTerminal",
"sourceMaps": true,
}
]
}
Tsconfig:
{
"compilerOptions": {
"jsx": "react",
"allowSyntheticDefaultImports": true,
"target": "es2015",
"moduleResolution": "node",
"inlineSourceMap": true
},
"exclude": [
"node_modules"
]
}
package.json>jest
"jest": {
"preset": "react-native",
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$",
"mapCoverage": true,
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"json"
],
"globals": {
"__DEV__": true
}
}
.babelrc
{
"presets": [
"react-native"
],
"sourceMaps": "inline"
}
- Expected behavior
I expect it to break at the correct places.
- Link to a minimal repo that reproduces this issue
https://github.com/GeeWee/rn-typescript-example/tree/ts-loader-bug Here, simply run the debug configuration. It will stop at the debugger; statement but will ignore any breakpoints.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:5
- Comments:6 (4 by maintainers)
Top Results From Across the Web
Breakpoints do not get hit work with while debugging react ...
Windows 10 and Windows 7 ( I have tried one 2 machines); React-Native VS Code extension version: VSCode version: 1.31.1, 1.32.1, 1.32.3 ...
Read more >Debugging React Native with VS Code
If you are using Expo, nothing will work yet, and npx react-native doctor won't help you find the issue. To fix this, choose...
Read more >Breakpoints not working debugging React app in Chrome ...
Visual Studio Code is the latest 1.45.1 stable release and includes the WSL remote development extension (0.44.2) on Windows 10. VSCode is ......
Read more >Debugging in Visual Studio Code
In order to start a debug session, first select the configuration named Launch Program using the Configuration dropdown in the Run and Debug...
Read more >React JavaScript Tutorial in Visual Studio Code
To set a breakpoint in index.js , click on the gutter to the left of the line numbers. This will set a breakpoint...
Read more >Top Related Medium Post
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@GeeWee Every issue will be solved by itself… It’s just the matter of time.
That should be simple - just gotta take one section out 😃