Chrome Dev ToolsでJavaScript/TypeScriptデバッグ ~さようならconsole.log~

Last updated at 2020-03-31Posted at 2020-03-28

#はじめに

業務で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を記述する必要がありません。
見れるパラメータもより詳細です。
実際に動かしながら確認するので、直感的にデバッグが可能です。