フロントエンドの開発中、原因不明のバグに時間を費やした経験は誰しもあるのではないでしょうか。
console.log を仕込んでは確認し、また仕込んでは確認し……そんなループを繰り返していると、気づけばコードがデバッグ用のログだらけになってしまうことがあります。
ブラウザのDevToolsには、そういった作業を効率化する機能が数多く揃っています。
コードを一切書き換えずにログを仕込んだり、DOMの変更をリアルタイムで検知したり、変数の状態をまとめて監視したりと、使いこなすほどデバッグのスピードが上がります。
この記事では、個人的に便利だと思う機能を中心に紹介していきます。
そもそもDevToolsとは
今回紹介するChrome DevToolsはGoogle Chromeに標準で搭載されている開発者向けのツールです。
F12 キー、または右クリック →「検証」をクリックすることで開くことができます。
要素・コンソール・ソース・ネットワークなど複数のパネルで構成されており、HTMLの確認、JavaScriptのデバッグ、ネットワーク通信の調査など、フロントエンド開発に必要な調査がブラウザ上でほぼすべて完結します。
「なんとなく開いてコンソールだけ確認する」という使い方でも十分便利ですが、各パネルの機能を少し掘り下げるだけで、調査の幅が一気に広がります。
条件付きのconsole.log・ブレークポイント
デバッグをするときによく使う console.log ですが、ループの中や頻繁に呼ばれる関数に仕込むと、ログで埋め尽くされて逆に見づらくなることがあります。
1000 件のリストを処理する関数なら、1000 行ものログが流れてくることになります。 そこで活用したいのが、条件を絞って出力する方法です。
条件付きブレークポイント
通常のブレークポイントは設定した行を通るたびに処理を止めますが、条件付きブレークポイントは指定した式がtrueのときだけ停止します。
ソースパネルで行番号を右クリックし「条件付きブレークポイントを追加」を選ぶと、
入力欄に任意のJavaScriptの式を書けます。
コードを一切書き換えなくてよいのが最大のメリットで、コードに手を加えずにデバッグしたい場面でも安心して使えます。
ログポイント
ログポイントはコードを変更せずに任意の式を評価し、その結果をコンソールに表示できる機能です。
条件付きブレークポイントと同じく行番号の右クリックから設定でき、
「ログポイントを追加」を選んで {変数名} や {式} を入力するだけで使えます。
処理を止めたくないけど値だけ確認したいとき、あるいはソースコードを直接編集できない環境でのデバッグに特に有効です。 追加したログポイントはソースパネルのブレークポイント一覧から管理・削除できます。
DOMの変更を検知する
「さっきまで表示されていた要素がいつの間にか消えている」
「スタイルが変わっているが、どのコードが変更しているのかわからない」
複数のライブラリや非同期処理が絡み合う現代のフロントエンドでは、DOMの変更を引き起こしたコードを探すのが難しくなることがあります。
そのような場合に役立つのが、DevToolsのDOMブレークポイントです。
要素パネルで監視したい要素を右クリックすると「ブレークポイントの位置」というメニューが現れます。
ここから設定できるDOMブレークポイントには 3 種類あります。
サブツリーの変更
「サブツリーの変更」は、対象要素の子孫が追加・削除・移動されたときに処理を止めます。 動的にリストアイテムが挿入されるコンポーネントのデバッグなどに使います。
属性の変更
「属性の変更」は、対象要素の class や style、data-* などの属性が書き換えられた瞬間に停止します。
「なぜかクラスが勝手に変わる」という場面でどのコードが変更しているかを一発で突き止めることができます。
ノードの削除
「ノードの削除」は、要素がDOMツリーから取り除かれたときに停止します。
意図せず要素が消えてしまうバグの原因箇所を探すのに効果的です。
いずれもコードを一切変更せずに設定でき、停止したあとは通常のブレークポイントと同様にコールスタックやスコープを使って原因を追跡できます。
変数の監視
ブレークポイントで処理を止めたあと、「次に何を見ればいいか」迷うことがあります。
ソースパネルの右サイドバーには様々な項目があり、それぞれ役割が異なります。個人的によく使うものを抜粋して紹介します。
スマートウォッチ
同じ変数や式を何度も確認する場合はスマートウォッチに登録しておくと便利です。
+ ボタンから任意の式を追加でき、ブレークポイントで停止するたびに自動で評価されます。
user.name のようなプロパティアクセスはもちろん、計算式やメソッドチェーンも登録できます。
スコープを跨いで何度も確認したいものをまとめておくのに向いています。
スコープ
停止した時点でアクセスできる変数をLocal・Closure・Globalの階層で一覧表示します。
まずスコープで「この変数は今どんな値か」を把握するのが基本の流れです。
変数をダブルクリックすると値を直接書き換えることもでき、特定の値にしたときの動作を手軽に試したい場面にも役立ちます。
コールスタック
「この関数はどこから呼ばれたか」を追いたいときはコールスタックを見ます。
現在の実行位置に至るまでの関数呼び出し履歴が積み上がって表示され、クリックするとその時点のコードに直接ジャンプできます。
非同期処理の場合は「Async」区切りが入り、前後の処理を跨いで追跡することも可能です。
「なぜこの関数が呼ばれているのかわからない」というときに真っ先に開くべき項目です。
まとめ
DevToolsは不具合調査や挙動の確認において非常に有用なツールです。
慣れてくると「どこを見ればいいか」が分かり、調査スピードや効率も大きく変わってきます。
私も最初はコンソールを見るくらいしか使えていませんでしたが、少しずつ試していくうちに「こういうときはここを見ればよさそう」という感覚が掴めるようになってきました。
また最近では、Chrome DevToolsの機能を AI から直接操作できる「Chrome DevTools MCP」といった仕組みも登場しています。
私もまだ試せていないのですが、興味があれば試してみるのもよさそうです。
おわりに
KENTEMでは、様々な拠点でエンジニアを大募集しています！ 建設×ITにご興味頂いた方は、是非下記のリンクからご応募ください。 recruit.kentem.jp career.kentem.jp
