mirror of
https://github.com/zhigang1992/create-react-app.git
synced 2026-04-23 12:48:00 +08:00
51 lines
2.6 KiB
Markdown
51 lines
2.6 KiB
Markdown
---
|
||
id: debugging-in-the-editor
|
||
title: Debugging in the Editor
|
||
---
|
||
|
||
**This feature is currently only supported by [Visual Studio Code](https://code.visualstudio.com) and [WebStorm](https://www.jetbrains.com/webstorm/).**
|
||
|
||
Visual Studio Code and WebStorm support debugging out of the box with Create React App. This enables you as a developer to write and debug your React code without leaving the editor, and most importantly it enables you to have a continuous development workflow, where context switching is minimal, as you don’t have to switch between tools.
|
||
|
||
### Visual Studio Code
|
||
|
||
You would need to have the latest version of [VS Code](https://code.visualstudio.com) and VS Code [Chrome Debugger Extension](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) installed.
|
||
|
||
Then add the block below to your `launch.json` file and put it inside the `.vscode` folder in your app’s root directory.
|
||
|
||
```json
|
||
{
|
||
"version": "0.2.0",
|
||
"configurations": [
|
||
{
|
||
"name": "Chrome",
|
||
"type": "chrome",
|
||
"request": "launch",
|
||
"url": "http://localhost:3000",
|
||
"webRoot": "${workspaceRoot}/src",
|
||
"sourceMapPathOverrides": {
|
||
"webpack:///src/*": "${webRoot}/*"
|
||
}
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
> Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](#advanced-configuration).
|
||
|
||
Start your app by running `npm start`, and start debugging in VS Code by pressing `F5` or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor.
|
||
|
||
Having problems with VS Code Debugging? Please see their [troubleshooting guide](https://github.com/Microsoft/vscode-chrome-debug/blob/master/README.md#troubleshooting).
|
||
|
||
### WebStorm
|
||
|
||
You would need to have [WebStorm](https://www.jetbrains.com/webstorm/) and [JetBrains IDE Support](https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji) Chrome extension installed.
|
||
|
||
In the WebStorm menu `Run` select `Edit Configurations...`. Then click `+` and select `JavaScript Debug`. Paste `http://localhost:3000` into the URL field and save the configuration.
|
||
|
||
> Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](#advanced-configuration).
|
||
|
||
Start your app by running `npm start`, then press `^D` on macOS or `F9` on Windows and Linux or click the green debug icon to start debugging in WebStorm.
|
||
|
||
The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine.
|