ブラウザで動的コンテンツを検査するにはどうすればよいですか？

Question

ポップアップウィンドウが表示され、マウスのあるオブジェクト上にマウスを置くと自分のサイトに表示されます。これが起こると、（Chromeで）Ctrl-Shift-Cを押して要素選択モードを起動し、ポップアップウィンドウ内の要素を選択できます。しかし、一度選択すると、Webページは通常のフローになり、マウスが正しい位置にないので、ポップアップウィンドウはすぐに消えます。

何とかこの状況を克服することはできますか？たとえば、要素を選択しますが、選択モードは終了しません。

Answer 1

ChromeとFirefoxの両方で、それぞれのDevToolsに、ホバー、アクティブ、フォーカスのような疑似クラスを設定し、設定する機能があります。これにより、マウスが擬似クラスを変更する要素と対話しているかのように、ページを操作することができます。

次の図は、SOトップナビゲーションバーのドキュメントリンク上のホバー疑似クラスの切り替えを示しています。ここで

は、Chromeで次のようになります。ここでは

はそれがFirefoxで次のようになります。