この記事では、Chrome DevToolsの使い方を解説しています。
Chrome DevToolsは、コードのどこでエラーが発生したか、確かめるために利用するものです。
consoleだけでなく、Chrome DevToolsを活用することでコード作成、修正のスキルを向上させることにつながります。
Chrome DevToolsソースパネル 検証機能の使い方
デバッガツールを開き、File Navigator pane(以降Page pane)を見ると、ページがロードした全てのリソースファイルを確認することができます。
Page paneでファイルをクリックすると右側のEditor paneで具体的なコードを確認することができます。
その横にあるのがJavaScript debugging paneです。
ここで、マウスをクリックした場合に、コードを一時的に停止させて、その動きが正しいか検証にかけることができます。
今回のエラーとして、１+２を実行したところ、本来は３となるべきところが１２と表示されたとします。
エラーの原因として、１と２を入力して、両者を加えるボタンをクリックした時にエラーが発生したと考えるのが自然です。
ここでJavaScriptを復習します。
JavaScriptでは、ボタンをクリックした時にある動作を実行させるためには、イベントリスナーを登録していました。
従って、Event Listenr Breakpointsを展開し、不具合をチェックします。
展開した中にあるMouseというカテゴリーがあります。
その中のclickにチェックをつけます。
これでDevToolsは、実行されるクリックイベントリスナーの最初の行で一時停止するようになります。
つまり、１と２を加えるボタンをクリックしたところで、コードを一時停止させることができるようになります。
停止したコードを再開するには、「Resume script execution」をクリックします。
実際にマウスをクリックした時のイベントリスナーで一時停止させるために、「Step into next function call」を実行します。
更にクリックすると、次の関数で一時停止します。
一時停止した関数は、緑のハイライトで表示されます。
その一つ左隣にある回転矢印マーク（モーメントマーク）、「Step Over Next Function Call」をクリックすると
その関数は実行されて完了し、戻り値を返すコードで一時停止します。
最後に現在の関数を抜け出すには、Step out of current functionをクリックします。
指定した行までスクリプトを実行させたい場合は、まず行Noをクリックし、クリックした行Noをブルーのハイライト表示にします。
次に、Resume script executionをクリックします。
以上の操作で指定した行までの全てのスクリプトを実行し、その行が実行される直前で停止させることができます。
これは、動画で見たい所で一時停止させることと似たような感覚です。
DeveToolsでは、Call Stackを展開することで、一時停止した所までのコードで不具合があったかをチェックすることができます。
また、Watchを展開することで更にエラーの詳細を確認することができます。
ここでは、bugが見つかったエラーの関数を自分で入力してみると、想像した通り誤った戻り値が返ってくるため、エラーがここで発生したという確信に触れることができます。
最後にコンソールを利用してbugのテストをしてみます。
エラーを修正するためには、DevToolsから直接編集をかけることができます。
手順としては、まずResume script executionでスクリプトを再開し、その後にscope内のコードを編集、保存します。
保存は、Macではcommand-s、Windowsではcontrol-sで行います。
最後にDeactivate breakpointsをクリックし、一通りの動作を確認することができます。
【IT業界(市場規模約16兆円)に特化した求人サイト】
・登録により求人情報を閲覧可能。
・新卒者の求人サイト。
未経験者向けには、「IT求人ナビ 未経験」が窓口です。
今の働き方を踏まえて相談に応じてもらえます。
