[解決済み] Chromeでホバーされた要素を検査しますか？

質問

Chrome のデベロッパーツールで、サイト上のツールチップがどのように構成されているかを見ようとしています。しかし、アイテムにカーソルを合わせても、"inspect element" を行うと、html 内のツールチップは何も表示されません。スタイルに :hover に設定することはできますが、ツールチップのhtmlやcssはまだ見ることができません。

何かいい案はありませんか？

どのように解決するのですか？

実は、Twitter Bootstrap のツールチップでそれを行うためのトリックを発見しました。別のモニターで開発ツール (F12) を開き、ツールチップを表示する要素にカーソルを合わせ、「要素を検査する」を選択するように右クリックします。そのコンテキストメニューを開いたまま、開発ツールにフォーカスを移動させます。ツールチップのHTMLは、そのツールチップの要素の横に表示されるはずです。そうすると、あたかもそれが別の要素であるかのように見ることができます。Chromeに戻るとHTMLが消えてしまうので、注意が必要です。

変な方法ですが、うまくいったので共有したいと思います。