[解決済み] 他の要素がマウスオーバーされたときにのみ表示される要素を検査する

質問

別の要素がマウスオーバー/入力されたときにのみ表示される要素 (ツールチップなど) を検査したいことがよくあります。 表示される要素は、jQueryのmouseenterイベントによって可視化されます。

マウスが含まれる要素から離れるとツールチップが消えるので、ツールチップを検査することができません。

JS イベントを一時停止して、要素にカーソルを合わせ、ブラウザの JS を一時停止して、正常に検査する方法はありますか?

例として、Twitter bootstrap のツールチップを検査することを試してみてください。 http://getbootstrap.com/javascript/#tooltips .

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

Chrome 38.0.2094.0 では、かなり簡単です。

以下のような感じになります。

ステップバイステップです。

1. ソースパネルでDevToolsを開く
2. ボタンにカーソルを合わせてツールチップを表示させる
3. F8 キーを押してページをフリーズさせる
4. 要素パネルに切り替え、左上の虫眼鏡アイコンを使ってツールチップを選択する

CSSが原因でツールチップが表示される場合、その場合の対処法は以下の通りです。

ステップバイステップです。

1. DevTools を開く
2. 開発ツールでトリガーとなる要素（リンク）を選択する
3. 右クリックして、"force element state" を選択し、":hover" を選択します。
4. CSS ツールチップを検査する