Google Developer Toolsの使い方（JavaScript編）

2024年7月24日 最終更新日時 : 2024年7月24日 山崎講師山崎講師

Google Developer Tools（通称DevTools）は、ウェブ開発者にとって非常に強力なツールセットです。

コンソールの使い方

以下に、コンソールでできることの主な例を紹介します。

なお、コンソールで入力した内容は履歴が残りますのでキーボードの「↑↓矢印」で目的の履歴を探して再実行することができます。

1. JavaScriptの実行

コンソールはJavaScriptのコードを直接実行するための環境を提供します。変数の宣言や関数の実行、オブジェクトの操作などが可能です。

let greeting = 'Hello, World!';
console.log(greeting);

2. デバッグ

コンソールを使用して、コードのデバッグができます。console.log(), console.error(), console.warn(), console.info()などの関数を使って、デバッグ情報を出力することができます。

console.log('This is a log message.');
console.error('This is an error message.');
console.warn('This is a warning message.');
console.info('This is an info message.');

3. DOMの操作

コンソールを使って、ウェブページのDOM（Document Object Model）を操作することができます。要素の取得、追加、削除、属性の変更などが可能です。

document.querySelector('h1').textContent = 'Changed Title';

4. パフォーマンスの計測

コンソールを使用してコードのパフォーマンスを計測することができます。console.time()とconsole.timeEnd()を使って、特定のコードブロックがどれだけの時間を要するかを測定できます。

console.time('MyTimer');
for (let i = 0; i < 1000000; i++) {
    // Some complex logic
}
console.timeEnd('MyTimer');

5. 式の評価

コンソールは、式を評価してその結果を表示するためにも使用できます。変数や関数の結果をすぐに確認できます。

2 + 2 // Enterキーを押すと、4が表示されます。

6. カスタムオブジェクトの表示

console.table()を使って、オブジェクトや配列を表形式で表示することができます。これにより、データの構造を視覚的に確認しやすくなります。

let people = [
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 },
    { name: 'Jim', age: 35 }
];
console.table(people);

7. デバッガの利用

debuggerステートメントを使ってコードの実行を中断し、デバッグセッションを開始できます。これにより、変数の値を確認したり、ステップ実行でコードの動作を詳しく調査することができます。デバッガについては章を改めて詳述します。

function myFunction() {
    debugger;
    // Your code here
}

デバッガの使い方

Google Developer ToolsのSourcesタブは、ウェブ開発者がウェブページのコードを調査し、デバッグするためのツールです。

Sourcesタブの基本的な使い方を以下に説明します。

1. Sourcesタブの表示方法

  1. Chromeブラウザを開き、調査したいウェブページに移動します。
  2. キーボードショートカット（F12）でDevToolsを開きます。
  3. DevToolsが開いたら、上部のタブから「Sources」を選択します。

2. ファイルの表示とナビゲーション

  • 左側のペインには、ウェブページにロードされているすべてのファイル（HTML、CSS、JavaScript、画像など）が表示されます。
  • ファイルを展開するには、フォルダをクリックします。特定のファイルをクリックすると、その内容が中央のエディターペインに表示されます。

3. ブレークポイントの設定

ブレークポイントを設定することで、特定の行でコードの実行を一時停止し、コードの状態を詳細に調査できます。

  1. エディターペインで、ブレークポイントを設定したい行番号をクリックします。青いマーカーが表示され、その行がブレークポイントとして設定されます。
  2. ブレークポイントを削除するには、もう一度行番号をクリックします。

4. ステップ実行

コードの実行を一時停止した後、以下のボタンを使用してコードをステップ実行できます：

  • Continue (再開): コードの実行を再開します。
  • Step Over (次の行へ進む): 現在の行を実行し、次の行に進みます。
  • Step Into (関数内に入る): 関数の呼び出しに入って詳細を調査します。
  • Step Out (関数から出る): 現在の関数の実行を終了し、呼び出し元に戻ります。

5. ウォッチ式の使用

変数の値を監視するためにウォッチ式を設定できます。

  1. 右側のペインで「Watch」セクションを見つけます。
  2. 「Add watch expression」をクリックし、監視したい変数名や式を入力します。
  3. Enterキーを押すと、現在の値が表示されます。

6. Call StackとScopeの調査

  • Call Stack: 現在の呼び出しスタックを表示し、どの関数がどの順番で呼び出されたかを確認できます。
  • Scope: 現在のスコープ内で定義されている変数とその値を表示します。

以下に、問題演習のためのHTMLファイルとそのファイルに基づいた出題を作成します。このHTMLファイルには基本的なHTML、CSS、およびJavaScriptのコードが含まれています。

問題演習

以下のファイルを作成して実行して下さい。

HTMLファイル: index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>デバッグ演習</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .hidden {
            display: none;
        }
    </style>
    <script>
        function showMessage() {
            const message = document.querySelector('#message');
            message.textContent = 'こんにちは、世界！';
            message.classList.remove('hidden');
        }

        function calculateSum() {
            const num1 = parseInt(document.querySelector('#num1').value, 10);
            const num2 = parseInt(document.querySelector('#num2').value, 10);
            const sum = num1 + num2;
            document.querySelector('#result').textContent = '合計: ' + sum;
        }

        function changeColor() {
            const color = document.querySelector('#color').value;
            document.body.style.backgroundColor = color;
        }
    </script>
</head>
<body>
    <h1>デバッグ演習</h1>
    <button onclick="showMessage()">メッセージを表示</button>
    <p id="message" class="hidden"></p>

    <h2>計算機</h2>
    <input type="number" id="num1" placeholder="数字1">
    <input type="number" id="num2" placeholder="数字2">
    <button onclick="calculateSum()">計算する</button>
    <p id="result"></p>

    <h2>背景色変更</h2>
    <input type="color" id="color">
    <button onclick="changeColor()">色を変更する</button>
</body>
</html>

問題 1: HTMLファイルの読み込みと表示

目的: SourcesタブでHTMLファイルを表示する方法を学ぶ。

  1. index.html をブラウザで開きます。
  2. Google Developer Toolsを開きます。
  3. Sourcesタブを選択します。
  4. 左側のペインで、index.html ファイルを見つけてクリックします。
  5. 期待される結果: 中央のエディターペインに index.html ファイルの内容が表示されます。

問題 2: JavaScriptファイルにブレークポイントを設定

目的: JavaScriptコードにブレークポイントを設定し、コードの実行を一時停止する方法を学ぶ。

  1. Sourcesタブで index.html ファイルを開きます。
  2. showMessage 関数の message.textContent = 'こんにちは、世界！'; の行にブレークポイントを設定します。
  3. ウェブページに戻り、「メッセージを表示」ボタンをクリックします。
  4. 期待される結果: ブレークポイントでコードの実行が一時停止し、現在の状態が表示されます。ブレークポイントよりも上の変数名の上にカーソルを当てると現在の値を見ることができます。ブレークポイントを用いることで、コンソールでconsole.log()を使わなくても変数値の確認ができます。

その他の場所にもブレークポイントを置いて動作を確認してみて下さい。

問題 3: 変数の値をウォッチ式で監視

目的: ウォッチ式を使用して変数の値を監視する方法を学ぶ。

  1. 問題2のブレークポイントでコードの実行を一時停止します。
  2. 右側のペインで「Watch」セクションを見つけます。
  3. 「Add watch expression」をクリックし、message.textContent を入力します。
  4. 期待される結果: ウォッチ式に入力した変数の現在の値が表示されます。

問題 4: ステップ実行でコードを調査

目的: ステップ実行を使用してコードの実行フローを調査する方法を学ぶ。

  1. 問題2のブレークポイントでコードの実行を一時停止します。
  2. 以下のボタンを使用してコードをステップ実行します：
    • Step Over (次の行へ進む)
    • Continue (再開)
    • Step Into (関数内に入る)
    • Step Out (関数から出る)
    • 期待される結果: ステップ実行ボタンを使用して、コードの実行フローを詳細に調査できるようになります。

問題 5: Call StackとScopeの調査

目的: Call StackとScopeを調査して、関数の呼び出し順序とスコープ内の変数を確認する方法を学ぶ。

  1. 問題2のブレークポイントでコードの実行を一時停止します。
  2. 右側のペインで「Call Stack」セクションを確認します。
  3. 現在の呼び出しスタックと関数の呼び出し順序を確認します。
  4. 「Scope」セクションを確認し、スコープ内の変数とその値を確認します。
  5. 期待される結果: Call StackとScopeを調査して、関数の呼び出し順序と変数の状態を理解できるようになります。

投稿者プロフィール

山崎講師
山崎講師代表取締役
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。
前の記事
ビジネスデータ分析の基礎
2024年3月15日
次の記事
JavaScript プログラミング学習ゲーム集 | 楽しく学ぶ初心者向け
2024年7月25日