デバッガーの達人になる！Chrome DevToolsで画面フリーズとポポバー検査
2024-07-27
Chrome デバッガーで画面をフリーズしてポポバーを検査する方法
Chrome デバッガーには、画面をフリーズしてポポバーなどの要素を詳細に検査できる機能があります。これは、要素のスタイルやレイアウト、イベントハンドラーなどを調べる際に非常に役立ちます。
方法
- Chrome DevTools を開きます。
- Elements タブを選択します。
- 検査したい要素を選択します。
- 右クリック して、Inspect element を選択します。
- Sources タブを選択します。
- スクリプトファイルを開きます。
- デバッグしたい行にブレークポイントを設定します。
- ページをリロードします。
- 画面がフリーズします。
- ポポバーを展開します。
- デバッガーを使用して、ポポバーのスタイル、レイアウト、イベントハンドラーなどを検査します。
詳細
- 画面をフリーズするには、
debugger;ステートメントを使用することもできます。 - ブレークポイントを設定するには、行番号の左側をクリックするか、Ctrl+Shift+B キーを押します。
- デバッガーを使用して、変数の値を表示したり、コードを実行したりすることができます。
- 上記の手順は、Chrome バージョン 89 で確認されています。
- ポポバー以外にも、画面をフリーズして他の要素を検査することもできます。
注意
- 画面をフリーズすると、ページの動作が停止します。
- デバッグが完了したら、ブレークポイントを削除することを忘れないでください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード</title>
</head>
<body>
<h1>タイトル</h1>
<p>これはサンプルコードです。</p>
<button id="button">ボタン</button>
<script>
const button = document.getElementById("button");
button.addEventListener("click", () => {
// ポポバーを表示
alert("ボタンがクリックされました");
});
</script>
</body>
</html>
- 上記のコードを HTML ファイルに保存します。
- Chrome でファイルを開きます。
- button 要素を選択します。
- 行
button.addEventListener("click", () => {にブレークポイントを設定します。 - Sources タブで、ブレークポイントが設定されている行を確認します。
- デバッグが完了したら、ブレークポイントを削除します。
画面をフリーズしてポポバーを検査する他の方法
- Elements タブで、Computed パネルを開きます。
positionプロパティを確認します。positionプロパティがfixedまたはabsoluteに設定されている場合、ポポバーは画面に固定されます。
DevTools の "Debugger" タブを使用する
- 以下のコードを Sources タブで実行します。
function freezeScreen() {
debugger;
}
freezeScreen();
拡張機能を使用する
スクリーンショットを撮る
- 画面のスクリーンショットを撮り、画像編集ソフトでポポバーを検査することができます。
注意事項
- デバッグが完了したら、画面を元に戻すことを忘れないでください。
css google-chrome google-chrome-devtools
