web-dev-qa-db-ja.com

Chromeでホバー要素を検査しますか？

私は、Chromeの開発者ツールを使用して、サイト上のツールチップの構造を表示しようとしています。ただし、アイテムにカーソルを合わせても、「要素を検査」すると、htmlのツールチップに何も表示されません。 Styleを:hoverに設定できることは知っていますが、それでもツールチップのhtmlまたはcssを見ることができません。

何か案は？

htmlcsshovergoogle-chrome-devtools
79
Skitterm

Twitter Bootstrap tooltips。別のモニターで開発ツール（F12）を開くと、要素にカーソルを合わせてツールチップを表示し、右クリックして「Inspect Element」を選択した場合、そのコンテキストメニューを開いたまま、開発ツールにフォーカスを移動します。ツールチップのhtmlは、HTMLのツールチップの要素の横に表示されます。別の要素であるかのように。Chromeに戻ると、HTMLが消えているので、注意すべき点があります。

ちょっと奇妙な方法ですが、それは私のために働いたので、私はそれを共有すると思いました。

66
Justin Chmura

このソリューションは余分なコードなしで機能します。

ヒットcommand-option-jでコンソールを開きます。別のウィンドウでコンソールを開くには、コンソールの右上隅のウィンドウに見えるボタンをクリックします。

次に、Chromeウィンドウで、ポップオーバーをトリガーする要素にカーソルを合わせ、command-`しかし、何度もコンソールに集中する必要がある場合は、debuggerと入力してください。これによりページがフリーズされ、[要素]タブで要素を確認できます。

65
joeyyang

ツールチップを強制的に表示する必要があります

$('.myelement').tooltip('open');

これで、ホバリング状態に関係なくツールチップが表示されます。

マークアップが表示されるDOMの下部近くまでスクロールします。

更新 Bootstrap 3。

$('.myelement').tooltip('show');

更新 Chromeおよび明らかにSafariも同様、$0は、現在選択されている要素のショートカットとして使用できます。これはSafariでも機能するようです。

$($0).tooltip('show')
61
Adam Grant

F8はデバッグを一時停止します。

ツールチップの上にマウスを置き、F8表示されている間。

これで、インスペクターを使用してCSSを確認できます。

56
dwjohnston

私にとって、受け入れられた答えは機能しませんでした。DevToolsをクリックすると、すぐにツールチップが閉じられました。

しかし、私は https://superuser.com/questions/249050/chrome-keyboard-shortcut-to-pause-script-execution が見つかりました。

  1. コンソールで：、実行：window.addEventListener('keydown', function(e) { if (e.keyCode == 123) debugger; });

  2. インスペクターで要素を強調表示する

  3. F12を押す

DOMが変更されないようにJavaScriptを一時停止した状態で、要素を検査できるようになりました。

21
mikemaccana

コーディングなしの単一ウィンドウ回答

他の答えはどれもまったく正しくないか、十分な詳細がありませんので、ここで私の試みです。

  • F12/Ctrl + Shift + I（Windows/Linux）またはCommand + Option + I（Mac）を使用してChromeのDevToolsを開きます。
  • DevToolsウィンドウでSourcesタブを選択します。
  • マウスを使用して、検査する要素にカーソルを合わせて、ツールチップを表示します。
  • F8（Windows/Linux/Mac）を押して、スクリプトの実行を一時停止します。メインウィンドウがグレー表示になり、「デバッガで一時停止」ポップアップが表示されます。
  • DevToolsウィンドウで、Elementsタブを選択します
  • Bootstrapツールチップの場合、ツールチップは最後の<div> の中に <body>
6
TobyLL

JSアクティブ化ツールチップのコードソリューションはありません：

Chromeのdevtoolsを使用して、ツールチップに含まれる/親要素を調べます。 「要素」タブで、そのコンテナDOM要素を右クリックし、「ブレークオン」>「サブツリーの変更」を選択します。次にツールチップが格納されているDOMの部分にカーソルを合わせると、JSコードが一時停止され、ツールチップの内容を検査できます。

5
clhenrick

簡単な解決策は次のとおりです。動的なツールチップがある場合は、トリガーイベントを（一時的に）clickに変更することで、それらを「永続的」にすることができます。これには、クリックアウトでのみツールチップが消えるという効果があります。

$('body').tooltip({
    selector: "[data-toggle='tooltip']",
    trigger: "click"
});

これにより、FFまたはChromeのデバッグツールで簡単に検査できます。

2
lxg

何らかの理由で、ここで提供された回答はWindowsで機能しませんでした。開発ツールを開き、ツールチップを表示する要素にカーソルを合わせ、その要素（ツールチップではなく）を右クリックすることで、ツールチップを検査できました。次に、カーソルをインスペクターパネルに移動し、下にスクロールします。ツールチップ要素はまだあるはずです。

0
Nolan Lindeke

f12コンソールタブに移動して、次を追加します。

setTimeout(()=> {debugger},5000)

これは、あなたが望むことをするのに5秒を与え、5 seconds。その後、ターゲット要素を検査できます

0
Ali Kleit

1）F12をクリックして、検査ウィンドウを開きます

2）ソースタブに移動します（コンソールの隣）

3）検査する要素にカーソルを合わせて、マウスをそこに置きます。

4）キーボード（Tabまたはshift + tab）を使用してコントロールを一時停止ボタンまたはF8に移動します 画像を参照

5）キーボードのフォーカスが再生ボタンにあるとき。 Enterキーを押します。ホバー要素がフリーズされ、何でもできるようになりました

0
Rajan

開発ツールは、ツールヒントのようなホバーされた要素を検査する方法を提供します。

1-F12を使用して開発ツールを開きます。

2-[要素]タブを選択します。

3-ツールチップを含む親要素を選択します。

4-「...」（親要素の行）をクリックし、「ブレークオン」/「サブツリーの変更」を選択した後（下の画像を参照）

Set a Break on parent element

5-最後にアプリケーションに戻り、ツールチップを表示します。ツールチップが表示された後、実行をブロックする必要があります

それが誰かに役立つことを願っています！

0
Ricardo Magalhães

私はこれに問題があったので、私は ドキュメントに に行き、ページにすでにレンダリングされているツールチップを調べました。これにより、ツールチップのdom構造を確認し、それに応じて編集できました。

0
philip

LinuxのChomeでは、WikiPediaの参照用などのJSで生成されたツールチップで次の操作を行うことでこれを実現できます。

上記のように、F12を使用して開発ツールを開きます。別のウィンドウで開きます。ツールチップを強調表示し、Ctrl-Shift-C（HTMLインスペクター）をクリックします。ヒントの上を移動すると、開発ウィンドウに適切なセクションが表示されます。

マウスを離したときにチップを開いたままにする必要がある場合は、他のウィンドウでより徹底的に検査できるようにするために、ツールチップを右クリックしてコンテキストメニューを開いたまま、開発ツールウィンドウをクリックします。このシナリオでは、ウィキペディアのウィンドウにヒントを残します。

ある程度、bootstrap tipsでも動作します。

0
user1806949