Chromeでホバーされた要素を検査しますか？
回答:
私は実際、Twitterブートストラップのツールチップを使用してこれを行うためのトリックを見つけました。別のモニターで開発ツール（F12）を開き、要素にカーソルを合わせてツールチップを表示する場合は、「要素の検査」を選択する場合と同じように右クリックします。コンテキストメニューを開いたまま、フォーカスを開発ツールに移動します。ツールチップのhtmlは、HTMLのツールチップの要素の横に表示されます。次に、それを別の要素であるかのように見ることができます。Chromeに戻ると、HTMLは表示されないので、注意する必要があります。
奇妙な方法のようですが、それは私のために働いたので、私はそれを共有することを考えました。
このソリューションは、追加のコードなしで機能します。
ヒットcommand-option-jコンソールを開きます。コンソールの右上隅にあるウィンドウのようなボタンをクリックして、別のウィンドウでコンソールを開きます。
次に、Chromeウィンドウで、ポップオーバーをトリガーする要素にカーソルを合わせ、 command-`を合わせますdebugger。コンソールにフォーカスする必要がある場合は何回でもしてから、と入力します。これでページがフリーズし、[要素]タブで要素を検査できます。
debuggerコンソールへの書き込み中にフォーカスalt+tabを失うと、要素の上にカーソルを置いたままを押すことができます。Windows上のChromiumアプリで動作しました。
F8 デバッグを一時停止します。
ツールチップの上にマウスを置き、押します F8表示されている間にます。
これで、インスペクタを使用してCSSを確認できます。
ツールチップをそのように表示させるだけです
$('.myelement').tooltip('open');これで、ホバー状態に関係なくツールチップが表示されます。
マークアップが表示されるDOMの下部近くまでスクロールします。
更新 Bootstrap 3に関するcneuroのコメントを参照してください。
$('.myelement').tooltip('show');更新マルコグレシャクのChromeの回答をご覧ください。Safariも同様に$0、現在選択されている要素のショートカットとして使用できます。これはSafariでも機能するようです。
$($0).tooltip('show').tooltip('show') getbootstrap.com/javascript/#tooltips-methods
$0にコンソールからアクセスできます。したがって、ツールチップをトリガーして実行する要素を選択できます$($0).tooltip('show')。
私にとって、受け入れられた答えは機能しませんでした。DevToolsをクリックするとすぐにツールヒントが閉じました。
しかし、私は/superuser/249050/chrome-keyboard-shortcut-to-pause-script-executionを見つけました：
- コンソールで：、実行：
const F12 = 123
window.addEventListener('keydown', function(event) {
if (event.keyCode === F12 ) {
debugger;
}
});インスペクターで要素を強調表示
F12を押す
これで、DOMが変更されないようにJavaScriptを一時停止して要素を検査できます。
コーディングなしの単一ウィンドウの回答
他の答えはどれも完全に正しいわけではなく、十分な詳細もないため、ここに私の試みを示します。
- F12 / Ctrl + Shift + I（Windows / Linux）またはCommand + Option + I（Mac）を使用してChromeのDevToolsを開きます。
- DevToolsウィンドウのSourcesタブを選択します。
- マウスを使用して、検査する要素の上にカーソルを置き、ツールチップを表示します。
- F8（Windows / Linux / Mac）を押して、スクリプトの実行を一時停止します。メインウィンドウがグレー表示になり、[デバッガーで一時停止]ポップアップが表示されます。
- DevToolsウィンドウで、Elementsタブを選択します。
- ブートストラップツールチップの場合、ツールチップは最後
<div>に表示されます<body>
LinuxのChomeでは、これは、以下を実行することにより、WikiPediaでの参照用のツールチップなど、JSで生成されたツールチップで実現できます。
上記のように、F12を使用して開発ツールを開きます。別のウィンドウで開きます。ツールチップを強調表示し、Ctrl-Shift-C（HTMLインスペクター）をクリックします。ヒントの上に移動すると、開発ウィンドウに適切なセクションが表示されます。
マウスをオフにしたときにヒントを開いたままにしておく必要がある場合は、他のウィンドウで詳細を確認できるように、ツールヒントを右クリックしてコンテキストメニューを開いたままにして、開発ツールウィンドウをクリックします。このシナリオでは、Wikipediaウィンドウにヒントを残します。
ある程度、ブートストラップのヒントでも機能します。
開発ツールは、ツールチップのようなホバーされた要素を検査する方法を提供します。
1-F12を使用して開発ツールを開きます。
2-「要素」タブを選択します。
3-ツールチップを含む親要素を選択します。
4-「...」（親要素の行）をクリックし、「Break on」/「subtree modifiers」を選択した後（下の画像を参照）
5-最後にアプリケーションに戻り、ツールチップを表示します。ツールチップが表示された後、実行をブロックする必要があります
それが誰かのために役立つことを願っています！
私が見つけた最も簡単な方法の1つは次のとおりです。
サイドでChrome開発ツールを開く
要素にカーソルを合わせる
右クリック
開発ツールをクリックします
これで、スタイルを検査して変更できます