VisualStudio CodeでReactのデバッグする時の手順

3回ググるハメになったのでもう記事にしちゃいます

完全にこれに習ってるだけ

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

create-react-appは済んでる前提です。

VisualStudio Codeの拡張機能「Debbger for Chrome」をインストール

デバッガーのアイコンを押して

「デバッグ▶」って書いてるとこの近くのアイコン(歯車マーク)を押したらlaunch.jsonが開く

launch.jsonの中をまるっと下に置き換えて

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

npm startでかってに画面が立ち上がる

あとはお好みでコードにブレークポイント置いて開発しましょ！