React デバッグ方法

Debugger for Chrome

設定方法・手順

launch.json

• VSCodeにてlaunch.jsonを編集
• create-react-appで開発する場合
• https://create-react-app.dev/docs/setting-up-your-editor/#visual-studio-code

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

ソースコードにブレークポイントを指定

yarn startにてローカル環境を起動

デバッグツールを起動

React Developer Tools

• componentタブでstateとpropsが確認できる

＊参考
https://qiita.com/sh-suzuki0301/items/9c2af4b28ba665cc0744

Redux DevTools

• Redux-sagaだとデバックが可能(redux-thunkだと動かない)

• top層のindex.tsxに以下の内容を記載 (src/index.tsx(index.jsx))

  • これを記載しないとRedux DevToolsが動かない

import { applyMiddleware, compose, createStore } from 'redux';

/* eslint-disable no-underscore-dangle, @typescript-eslint/no-explicit-any */
const composeEnhancers =
  process.env.NODE_ENV === 'development' &&
  typeof window === 'object' &&
  (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
    : compose;
/* eslint-enable */

const enhancer = composeEnhancers(applyMiddleware(sagaMiddleWare));
const store = createStore(reducer, enhancer);