

動的に生成されるDOMがマウスで選択できないばあいに、どうやったらDOMを選択できるでしょうか？

例えば、最近ツイッターのPC版ではタイムラインなどでツイート中の他人などのアカウント名のリンク部分にマウスをホバーするとポップアップしてツイート主やRTした人の情報が表示されます。ちょうど以下のようなかんじですね。  
[![こんな](https://i.stack.imgur.com/SrABN.png)](https://i.stack.imgur.com/SrABN.png)  
赤丸のようにアカウント名のリンクの所にマウスを持って行くと、青い枠のようなポップアップが開きます。

ところが、このポップアップはマウスがポップアップの外に出てしまうと、消えてしまいます。  
そのため、以下のエレメント選択ボタンを押す前に、前述のようにポップアップが消えてしまうため、該当のDOMが見つけられません。  
[![エレメント選択ボタン](https://i.stack.imgur.com/j5fOK.png)](https://i.stack.imgur.com/j5fOK.png)

いかんせんweb開発をして間もないので、何もかも分かっていません。  
こういう動的に出たり消えたりしてしまう要素のDOMを拾うには何というかブレークポイントみたいなのが使えそうな気がしますが、やり方がよくわかりません。  
どなたか、御教示願います。


CC BY-SA 3.0
2016-05-08T16:16:53.037
24648
2016-05-09T05:55:15.367
2016-05-09T05:33:44.323
8000
7966
question
javascript google-chrome
マウスカーソルを乗せている間だけ表示される要素を、開発者ツールで調べるには


ブラウザーで要素の上にマウスカーソルを置いてからショートカットキー( _Ctrl+Shift+C_ )を押して選択状態にできます。  
この状態でホバーが外れると要素が消えてしまうため、もう一度ショートカットキーを押した状態でDeveloper Toolsまで移動すればよいかと思います。


CC BY-SA 3.0
2016-05-09T05:43:56.950
24664
2016-05-09T05:49:23.093
2016-05-09T05:49:23.093
5750
5750
24648
answer


デバッガの機能でJavaScriptの実行を停止させます。  
FirefoxでもChromeでも`F8`がポーズに割り当てられているようですね。  
(Firefoxだとポーズ中はマウスでの要素の選択なども出来なくなってしまうのが困った所です)


CC BY-SA 3.0
2016-05-09T05:52:12.407
24665
2016-05-09T05:52:12.407
3054
24648
answer


要素選択モードを使った別解ですが、当該要素を右クリックして「検証」を選ぶと（必要なら開発者ツールを表示して）その要素が選択されます。「検証」を選択したときにメニューが閉じますが、この時点でマウスカーソルが開発者ツール上、もしくはウィンドウの外にあればマウス関連のイベントは発生しないため、要素が消えることを回避できます。


CC BY-SA 3.0
2016-05-09T05:55:15.367
24666
2016-05-09T05:55:15.367
8000
24648
answer