Chrome デベロッパーツールを使用して、ボタンまたは要素によって実行されるコードを見つける方法

2024-07-27

Chrome デベロッパーツールは、Web 開発者にとって不可欠なツールです。このツールを使用すると、ページの HTML、CSS、JavaScript コードを検査し、問題をデバッグし、パフォーマンスを最適化することができます。

必要なもの

Google Chrome ブラウザ
インターネット接続

手順

Chrome ブラウザで、コードを確認したい Web ページを開きます。
Ctrl+Shift+I (Windows) または Command+Option+I (Mac) を押して、Chrome デベロッパーツールを開きます。
デベロッパーツールのウィンドウが表示されます。
デベロッパーツールのツールバーにある Elements タブをクリックします。
ページの HTML コードが表示されます。
コード内で、ボタンまたは要素を見つけます。
ボタンまたは要素をクリックします。
デベロッパーツールの Sources タブをクリックします。
Sources タブには、ページで使用されているすべての JavaScript ファイルが表示されます。
JavaScript ファイルの名前をクリックします。
ファイルの内容が表示されます。
コードをスクロールして、ボタンまたは要素によって実行されるコードを見つけます。

ヒント

ボタンまたは要素を見つけるには、デベロッパーツールの Elements タブにある Inspect ツールを使用できます。
コード内で特定の関数を検索するには、デベロッパーツールの Sources タブにある Search ツールを使用できます。

例

次の例では、button 要素によって実行されるコードを見つける方法を示します。

HTML コードで、button 要素を見つけます。

<button>Click me</button>

function handleClick() {
  // ボタンがクリックされたときに実行されるコード
}

button.addEventListener('click', handleClick);

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
</head>
<body>
  <button id="button">クリック</button>

  <script>
    const button = document.getElementById('button');

    button.addEventListener('click', () => {
      alert('ボタンがクリックされました');
    });
  </script>
</body>
</html>