はじめに

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

などが挙げられます。

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

設定方法

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

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

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

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