react debug from VS Code —— Live edit and debug your React apps directly from VS Code — without leaving the editor

原文：https://medium.com/@auchenberg/live-edit-and-debug-your-react-apps-directly-from-vs-code-without-leaving-the-editor-3da489ed905f

 

Supercharge your React debugging workflow with VS Code and Chrome debugging

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.

 

 

 You can now write code, set a breakpoints, make a changes to the code, and debug your newly modified code — all from your editor

 

1. Chrome debugger
2. create-react-app
3. .vscode in your root folder.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceRoot}/src"
        }
    ]
}

　　

npm start in your favorite terminal

F5or by clicking the green debug icon

Happy debugging!

 

Details

Webpack’s Hot Module Replacement mechanism, which pushes module changes to the browser by running a local file watcher.

without adding a need for more file watches or background tools