他の要素がマウスオーバー/入力されたときにのみ表示される要素を検査します

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

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

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

例として、Twitterブートストラップのツールチップhttp://getbootstrap.com/javascript/#tooltipsを調べてみてください。

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

これは次のようになります。

ステップバイステップ：

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

CSSが原因でツールチップが表示された場合、その場合にできることは次のとおりです。

ステップバイステップ：

1. DevToolsを開く
2. 開発ツールでトリガー要素を選択します（リンク）
3. 右クリックして「要素の状態を強制」を選択し、「：hover」を選択
4. CSSツールチップを調べる

SafariのとChromeのWebインスペクタの両方を使用すると、切り替えることができ、チェックボックス提供しています:active、:focus、:hoverおよび:visited要素の状態を。それらの使用はさらに簡単かもしれません。

サファリ：

クロム：

それを行う別のトリッキーな方法もあります：

1. ツールチップを表示する要素に移動します。
2. 右クリックしてコンテキストメニューを開きます。
3. マウスを開発ツールウィンドウに移動し、開発ツールパネルの任意の場所で左クリックします。

ツールチップは表示されたままで、[要素]タブで調べることができます。

Chromeでテスト済み。Firefoxでは動作しないようです。

一方で@ SomeGuyの答えは、あなたが常にプログラムでそれを行うことができ、代替として、（T-アップアニメーションGIFをのために）優れています。コンソールを開いて、イベント名を入力するだけです

document.getElementById('id').dispatchEvent(new Event('event-type'));

（純粋なJavaScript固有の構文では、ブラウザによって異なる場合があります）

jQueryでさらに簡単：

$('#id').trigger('event-type');

あなたの例（http://getbootstrap.com/javascript/#tooltips）で、コンソールを開いて次のように入力します。

$("button:contains('Tooltip on right')").mouseenter();

また、ツールチップはDOMに表示され、手動で検査/変更できます。

<div style="top: 14406.9px; left: 1048.25px; display: block;"
id="tooltip952596" class="tooltip fade right in" role="tooltip">
<div style="" class="tooltip-arrow"></div>
<div class="tooltip-inner">Tooltip on right</div></div>

コメントのように、マウスポインタをページフレーム上に移動すると、などの他のイベントをトリガーできますmouseout。これを防ぐには、押してF8（acc。answerにあるように）またはタイプしますdebugger;（これはスクリプトと同等です）。