メインコンテンツまでスキップ

ブラウザの開発者ツール

開発者ツールを起動する​

Google Chrome などのブラウザに搭載されている開発者ツールには、ウェブ開発をサポートする様々な機能が提供されています。

Google Chrome 以外の開発者ツール

Google Chrome 以外のブラウザにも開発者ツールは搭載されています。ほとんど同等の機能が提供されているので、基本的にはどれを使っても構いません。しかしながら、Google Chrome のものが最も多く使用されており、本カリキュラムでも基本的には Google Chrome を用いるものとします。

開発者ツールは、command + option + I (macOS) / Ctrl + Shift + I (Windows) キーを押すことにより起動できます。

開発者ツールを起動した様子

HTML や CSS の構造の確認​

Elements タブを用いると、ウェブサイト上に現在表示されている HTML の構造や、各 HTML 要素に適用されている CSS の状態を確認したり、その場で値を書き換えて、表示が変化する様子を確認したりすることができます。

また、表示中の HTML 要素を右クリックして 検証 メニューをクリックするか、開発者ツールの中のインスペクトボタン () をクリックすることにより、要素を直接選択することができます。この方法を用いることで、HTML の木構造を根から辿る必要がなくなります。

確認問題​

あなたのお気に入りのニュースサイトの記事をひとつ選び、その中に現れる人物名を、 Elements タブの機能を用いて自分の名前に変えてみましょう。悪用厳禁です！

デバッガ​

デバッガ は、プログラムのバグを探し、解決するために役立つソフトウェアです。ブラウザの開発者ツールには、通常 JavaScript のデバッガが搭載されています。

備考

デバッガを使うために知っておくべきことは以下の 4 つです。

  • ブレークポイント
    設置した行でプログラムの実行が一時停止するもので、Google Chrome の開発者ツールでは Sources タブからファイルを開くと表示される行番号をクリックすると設置できます。

  • ステップオーバーボタン ()
    現在の行を実行し、次の行に進む操作です。現在止まっている行で関数が呼び出される場合は、その関数内の処理を全て実行して次の行で止まるものです。

  • ステップインボタン ()
    現在の行が関数呼び出しだった場合、実行が関数の中に移ります。処理の流れを 1 個ずつ確認できます。

  • ステップアウトボタン ()
    関数内で処理が止まっている場合、その関数内の残りの処理を全て実行し、関数を呼び出している行の次の行へ移動します。

デバッガを用いることで、プログラムが実行される様子を細かく観測することができます。次のプログラムで試してみましょう。

index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="result"></div>
    <script src="./script.js"></script>
  </body>
</html>
script.js
function add(a, b) {
  return a + b;
}

const resultElement = document.getElementById("result");
const sum = add(3, 4);
resultElement.textContent = sum;

JavaScript のデバッガは主に Sources タブから用います。まずはこのタブを開き、サイドパネルに表示された script.js を開きましょう。

デバッガでファイルを開く

続いて、5 行目の行番号が表示されている部分をクリックしてブレークポイントを設置します。この状態でブラウザを更新してみてください。

JavaScript の実行がブレークポイントを設定した地点に差し掛かると、プログラムの実行がデバッガにより一時停止されます。

備考

上記のプログラムにおいて、ページの読み込みの完了時にはすでに JavaScript の実行が終わっています。このため、ブレークポイントを設置した行のプログラムは、ページを更新するまで再度実行されません。

警告

下の画像の中の、オレンジ色の線で強調されている部分は、これから実行されようとしている行を表します。つまり、5 行目のプログラムは、この時点ではまだ実行されていません。

ブレークポイントの設置

続いて、ステップ オーバーボタンを押します。これにより、オレンジ色の線で強調された部分が 6 行目に移ります。

ステップ オーバー

この状態で、resultElement の部分にマウスカーソルを乗せてみましょう。resultElement 変数の中身が表示されます。変数の値がオブジェクトの場合は、その内部を見ることもできます。下にスクロールするとおなじみの textContent プロパティなども存在していることが分かりますね。

オブジェクトの中身を見る

今度はブレークポイントを 6 行目に設置してみましょう。ページを更新して、次は、ステップ インボタンを押してみましょう。実行が add 関数の中に移ります。

ステップ イン

右側のパネルの Call Stack (コール スタック) 部分を見てみてください。ここには、現在実行されている関数が、どの順番で実行されているのかが表示されています。この場合は、script.js というファイルの 6 行目から add 関数が呼び出されていることが分かります。

コール スタック

次に、ステップ アウトボタンを押しましょう。このボタンにより、現在実行されている関数が最後まで実行され、実行が add 関数の外に出て、7 行目の先頭で処理が止まっているのが分かると思います。

ステップ アウト

console.log 関数

console.log 関数は、メッセージをブラウザの開発者ツールの Console に出力します。console.log 関数を使ってプログラムの実行中に値の変化を確認したり、問題が発生した時に原因を特定したりすることができます。

script.js
const x = 5;
const y = 10;
const sum = x + y;
console.log("x + y は、", sum);

確認問題​

次のプログラムの 5 行目では、add 関数は 3 回実行されます。どのような順番で関数が呼び出されているか、デバッガを用いて確認してみてください。

script.js
function add(a, b) {
  return a + b;
}

const result = add(add(1, 2), add(3, 4));
document.write(result);