You can super charge your React debugging workflow with VS Code and Chrome debugging by using this launch.json
config:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}/app",
"sourceMapPathOverrides": {
"webpack:///./app/*": "${webRoot}/*",
"webpack:///app/*": "${webRoot}/*"
}
}
]
}
You can read more in Live edit and debug your React apps directly from VS Code — without leaving the editor 🔥 🎉🎈
Note: There’s currently a known problem with source maps and VS Code. You can change your webpack config to use inline-source-map
and the issue should be resolved.
WebStorm is a powerful IDE, and why not also use it as debugger tool? Here is the steps
source-map
(This line)npm run start
)JavaScript Debug
root
directory with webpack://.
(please note the last dot)
* Map your build
directory with your root path (e.g. http://localhost:3000
).
(dot) in webpack://.
ESLint help making all developer follow the same coding format. Please also setting up in your IDE, otherwise, you will fail ESLint test.
ESLint
Enable
Submit an issue, hop onto the Gitter channel or contact Max direct on twitter!