はじめに

業務でJavascript/TypeScriptを用いて開発をしていて、
毎日のようにデバッグするのですが
そんな中でChrome Dev Tools(DevTools)を使用したお気に入りのデバッグ方法があり、まとめてみました。

以前React Dev ToolsでのReactのデバッグ方法も紹介していますので、興味があれば読んでください。
React Developer Toolsのすすめ

既にご存知の方には当たり前の方法で
記事にするほどのことでもない！と思われるかと思いますが、
知らなかった方が効率よくデバッグできるようになれば幸いです。

対象読者

• Javascript/TypeScriptで開発しているが、デバッグ方法がいまいち分からない方
• console.logを多用してデバッグをしている方
• デバッグを効率化したい方

JavaScript/TypeScripのデバッグ

console.logでのデバッグ
多くの方が行うJavaScript/TypeScripのデバッグとして、
console.logを随所に記述してDevToolsのconsoleから値を見たり、どの処理を通っているかを確認する方法があります。
私自身もよく使いますが、console.logを記述して削除するのが手間だったり、消し忘れでレビューで指摘されたり、コードを汚してしまうことがあるので、面倒だなと感じる部分がありました。

ReactでのJSのコードの抜粋ですが、API通信時の挙動を見たい時など、こんな感じでconsole.logを使いますよね。

...

const countriesApi = "https://restcountries.eu/rest/v2/all";
  useEffect(() => {
    console.log('useEffect');
    const getData = async () => {
      setIsLoading(true);
      const response = await axios.get(countriesApi);
      console.log(`response:${response}`);
      setAllCountries(response.data);
      console.log(`data:${response.data}`);
      setIsLoading(false);
    };
    getData();
  },[]);

...

そしてDevToolsのconsoleで確認。
デバッグ対象のアプリをChromeで開いて、
DevToolsを開いて（Macはcommand + option + iでショートカット）、Consoleのタブに移動します。
少し分かりにくいし、見にくいです。たくさんconsole.logするとどれか分かるように記述しないと読み取りにくい...。

このようなデバッグをDevToolsのSourceを使用することで、
より便利に効率的にデバッグが可能になります！

Chrome Dev ToolsのSourceを利用したデバッグ

まず、デバッグ対象のアプリをChromeで開きます。
DevToolsを開きます（Macはcommand + option + iでショートカット）。
Sourceのタブに移動します。

左側のディレクトリツリーからデバッグしたい対象のファイルを選択します。
そうするとソースコードがDevTools上に表示されます。

デバッグしたい箇所を選択します。
コード表示の行数の左をクリックすることで緑色になり、ブレークポイントを貼ることができます。
これがconsole.logと同じような役割となります。

この状態でアプリを動かします。
今回は簡易的な電話帳アプリを動かします。
人名検索が可能なので、テキストボックスに文字を入力します。

文字を入力した瞬間に、ブレークポイントを貼った人名をフィルターする処理で止まってデバッガが動作しました！！

アプリ側に「Paused in debugger」が出てくるので、それの赤枠の右三角を押します。
次のブレークポイントの処理まで実行させることができます。

デバッガを進めていくと、右側に実行結果などのログが出ます。
見たい値や変数のところにマウスオーバーすると、パラメータが見れます。
この方法だとコードにconsole.logを記述する必要がありません。
見れるパラメータもより詳細です。
実際に動かしながら確認するので、直感的にデバッグが可能です。

確認したいパラメータもマウスオーバーすることで簡単に、詳細な情報が得られます。
personsの中身

console.logだと指定した情報しか表示できませんが、
この方法だとブレークポイントを貼った以外の部分の実行された処理のパラメータの確認ができます。
ブレークポイントを貼っていないhandleFilterChangeのeventのパラメータ。

下記のマークを押していくことで、コードを１行ずつステップ実行することも可能です。
別の関数にジャンプしたり、処理を１つずつ実行してくれます。
(フレームワーク使用していると、フレームワーク自体の処理に入り込んでしまうことが多いので、コードのデバッグだと向いてないかもしれません。)

まとめ

Chrome Dev ToolsのSourceのデバッガを使うことで、

• console.logを記述しなくて済む
• 動作した処理全てのパラメータを簡単に確認できる
• アプリを動かしながら直感的にデバッグができる

といった効率的なデバッグをすることが可能となります。

私もこの方法でデバッグを始めてから、作業が格段に速くなりました。
undefinedで値が取れていない部分も、どこで処理が失敗しているのかも、すぐに見つけることができます。
かつ、コードがどのように動いているのかを把握できるようになったので言語やフレームワークの理解が深まりました。

知らなかった！という方は是非試してみてください。
どなたかの参考になれば幸いです。

最後まで読んで頂き、ありがとうございました。