Zenn
✨

React+typescript+vscodeでブレークポイントを使うには

に公開
React
TypeScript
VS Code
デバッグ
ブレークポイント
tech

はじめに

みなさん、こんにんちは。
皆さんはReact+ts環境のデバッグはどのように行っていますか？
console.log連打ですか？
Chromeのデバッグツールですか？
ReactDevツールですか？
それもいいですか、vscodeでブレークポイントが使えたら幸せだと思いませんか？

その願い・・・なんと叶います！！
というわけでやり方を伝授いたします。

やり方

準備

起動構成を作ります。
以下のソースコードをコピペしたあと、urlとwebRootを書き換えてください。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "React Debug Chrome",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/frontend/src/",
      "runtimeArgs": [
        "--disable-blink-features=AutomationControlled"
      ]
    }
  ]
}

url

npm run devで立ち上げたときにアクセスするURLをポート番号込みで記入します。
ポートはreactだと3000か5173が多いと思いますが、各自確認してください。

webRoot

パスマッピングです。
これが一番ややこしくて人によって変わるところです。
tsxのプロジェクトルートを指定することになります。
workspacefolderには現在vscodeを開いているフォルダが代入されるので、そこからtsのルートまで記入します。
一度マッピングが合えばそのフォルダ以下の全てのソースコードでブレイクできるようになります。

上記の設定ファイルは以下のスクショの構成で動くものです。
backendにはpythonのコードが入っていて、frontendにreactのFSDテンプレートが入っています。
これを参考に自身の環境にパスを合わせてください。

runtimeArgs

プログラム内で、外部連携APIを使用していなければ不要かもしれません。
googleOAuth2を使ったアプリケーションのデバッグをしようとしたときに、これがないと認証を弾かれました。

実行

まず、いつもどおり普通にアクセスできる状態にします。

例えば以下のように。
（アプリケーションによってコマンドが違う場合があります。package.jsonをご確認ください。）

npm run dev

アプリケーションが立ち上がってブラウザでアクセスできる状態になったら、デバッグセッションを起動します。
vscodeの左メニューにある虫と再生ボタンみたいなアイコンをクリックします。

ブレイクしたいソースコードの行番号の左の空白あたりをクリックして赤丸じるしをつけます。

その状態でブラウザを操作して、そのコードの行を通る操作をします。

そうすると、こんな感じでブレイクして中身が見えるようになります。

おわりに

いかがでしたか？上手くできましたか？
ブレイクポイントが使えると変数やオブジェクトの中身が全て視認できるようになり、console.logの連打から開放されます。
拡張ライブラリなども必要ないため、業務でも導入しやすいかと思います。

株式会社ONE WEDGE

【Serverlessで世の中をもっと楽しく】 ONE WEDGEはServerlessシステム開発を中核技術としてWeb系システム開発、AWS/GCPを利用した業務システム・サービス開発、PWAを用いたモバイル開発、Alexaスキル開発など、元気と技術力を武器にお客様に真摯に向き合う価値創造企業です。
https://onewedge.co.jp

Discussion