Comments (10)
I just figured this out. In your launch.json, change "webpack:///src/*"
to "webpack:///./src/*"
.
from create-react-app-typescript.
Thanks to the tip from @eyelidlessness, I used the configuration below in launch.json
and breakpoints are now working when launching Chrome via VS Code:
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}/src",
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
} ,
"runtimeArgs": [
"--disable-session-crashed-bubble",
"--disable-infobars"
]
}
I also added to .gitignore
:
/.vscode/chrome
from create-react-app-typescript.
Sorry to hit the closed issue, but looks like some progress has been made in this area, see this CRA issue.
Matt Morgis came up with this configuration that is working for me nicely within VS Code 1.17.0 with Node v8.4.0 and react-scripts-ts 2.7.0 I am finally able to run and debug tests directly in vscode.
Here is the vscode launch command that is working, the only change from original posted is changing reference from react-scripts to react-scripts-ts:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug CRA Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts-ts",
"runtimeArgs": [
"--inspect-brk",
"test"
],
"args": [
"--runInBand",
"--no-cache",
"--env=jsdom"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
from create-react-app-typescript.
Has anyone managed to get debugging of Jest unit tests working in vscode?
from create-react-app-typescript.
Trick for young players attempting to debug in chrome using the above launch.json
. It will open a seperate chrome window which is the only window which the debugger is attached to. You have to perform your testing in that window.
from create-react-app-typescript.
Typescript is trickier to get to work in the debugger. I think it has something to do with with the launch.json paths we're using (I don't think they're the ones the default readme shows) I haven't spent a bunch of time trying to get it to work (yet), but if/when someone does I feel like we should document that somewhere around here :).
Would love to have this work.
from create-react-app-typescript.
Closing as this hasn't been updated in a while.
from create-react-app-typescript.
@mindjuice did you have any luck debugging Jest unit tests? I'm having no luck with Webstorm, but it works find in CRA-js
from create-react-app-typescript.
I tried using vscode on CentOS 7 with vscode (1.19.1), react-scripts (v2.15.1) and chromium-browser (v61.0) but got the error that type="chrome" was not supported.
Next, I I edited the file in my node_modules directory (a hack but worth trying). I changed node_modules/react-scripts-ts/config/webpack.config.dev.js
devtool: "inline-source-map"
and the location of my files are now in webpack-internal://, but I was able to view my code (in chromium-browser and set a breakpoint in it (in Chrome devtools, F12 on browser). Thanks @cesarvarela for pointing out the file that needs to be changed. NOTE: I picked inline-source-map because I think that is what the Angular CLI tools use (based on grepping for devtool:).
This doesn't fix vscode debugging but at least I've got something (other than console.log).
from create-react-app-typescript.
This is still happening to me :/
from create-react-app-typescript.
Related Issues (20)
- Browserlist error
- CRA 2.0 HOT 31
- Include nodejs v8 for for Travis CI build
- Remove dependency on babel HOT 2
- Using jest-extended? HOT 1
- Husky hooks not working HOT 1
- Update webpack-dev-server HOT 10
- Add documentation detailing differences between CRA 2.0 and CRA-TS HOT 10
- Source Maps don't work for `js` or `jsx` files in live dev mode.
- Version 4.0.8: Internet Explorer no working anymore HOT 2
- Build process is almost 20 minutes long HOT 1
- postcss support? HOT 1
- Why is Jest's version hard coded to "20.0.4"? HOT 1
- Jest doesn't work when I add lint-staged
- Maintenance
- Tslint rules are barriers to entry HOT 2
- [Help] Compatibility IE + Firefox old versions problems
- Are 4.X.X versions are legit? HOT 1
- Jest doesn't resolve absolute paths from tsconfig HOT 1
- npm start dont work on freeBSD
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from create-react-app-typescript.