マウスカーソルを乗せているときだけ表示される要素を Chrome の開発者ツールで抽出する方法

はじめに

マウスカーソルを乗せているときだけ表示される要素ってありますよね。たとえば

• YouTube のサムネイルにマウスカーソルを合わせると動画のプレビューが表示される
• Twitter の投稿の投稿者名にマウスカーソルを合わせるとその人のプロフィールのプレビューが表示される

などが挙げられます。

こういった要素を Chrome の開発者ツールで検証したいとき、要素を抽出しようとしてもマウスカーソルを動かしたらその要素が消えてしまうので指定できないという問題が発生します。今回はこれを解決する方法を紹介します。

設定方法

方法はいたってシンプルです。

1. 開発者ツールを開く
   • 右クリックメニューから「要素を検証」（または "Inspect"）を選択すると開きます
   • macOS の場合は Command + Option + I でも開きます
2. タブから "Sources" を選択する
3. 検証したい要素にマウスカーソルを合わせて表示された状態にする
4. F8 を押して JavaScript デバッガのブレークポイントを設定する
   • MacBook のキーボードの場合は Option + Media の再生/停止キーで F8 になります
5. 要素を抽出する
   • 開発者ツールメニューの左上にある左斜め上の矢印があるアイコンをクリックします
   • macOS の場合は Command + Shift + C でも同様の結果となります

ポイントは "Sources" タブを開いた状態で F8 を押すことです。別のタブ（たとえば "Elements" タブなど）では JavaScript のデバッグ機能が使用できませんのでご注意ください。

解除方法

解除する場合は再び F8 を押下してブレークポイントから再開します。

参考

• マウスカーソルを乗せている間だけ表示される要素を、開発者ツールで調べるには
• Chrome DevToolsでJavaScriptのデバッグ！