483

chrome インスペクターを使用してz-index、Twitter のブートストラップ ポップオーバーを分析しようとしていますが、非常にイライラしています...

関連する CSS を評価して変更できるように、(表示されている間に) ポップオーバーをフリーズする方法はありますか?

関連付けられたリンクに固定の「ホバー」を配置しても、ポップオーバーは表示されません。

4

7 に答える 7

828

動作しました。これが私の手順でした：

  1. 目的のページを閲覧する
  2. 開発コンソールF12を開きます - Windows/Linux またはoption+⌘</kbd> + J on macOS
  3. Sourcesクロムインスペクターでタブを選択します
  4. Web ブラウザー ウィンドウで、目的の要素にカーソルを合わせてポップオーバーを開始します。
  5. ポップオーバーが表示されている間F8に Windows/Linux (またはmacOS ではfn+ ) を押します。実際のページのどこかをクリックした場合、F8 は何もしません。最後のクリックは、ソース タブなど、インスペクターのどこかにある必要があります。F8
  6. Elementsインスペクターのタブに移動します
  7. ポップオーバーを見つけます (トリガー要素の HTML にネストされます)
  8. CSS の変更をお楽しみください
于 2013-07-29T19:08:58.263 に答える
377

任意の要素を検査できるようにするには、次のようにします。ホバー状態を複製するのが難しい場合でも、これは機能するはずです。

  • コンソールで次の JavaScript を実行します。これにより、5 秒でデバッガーが中断されます。

    setTimeout(function(){debugger;}, 5000)

  • 要素を表示し (ホバリングするなどして)、Chrome がデバッガーに割り込むまで待ちます。

  • Chrome Inspectorのタブをクリックすると、Elementsそこで要素を探すことができます。
  • Find Elementアイコン (虫眼鏡のように見えます)をクリックすることもできます。Chrome では、要素を右クリックしてページ上の要素を調べて見つけることができます。Inspect Element

このアプローチは、このページの他の優れた回答とは少し異なることに注意してください。

于 2015-02-11T12:34:00.047 に答える
48
  1. 要素タブ内の任意の場所を右クリック
  2. 選ぶBreakon... > subtree modifications
  3. 表示したいポップアップをトリガーし、DOM に変更が見られるとフリーズします
  4. それでもポップアップが表示されない場合は、表示したいポップアップがフリーズするまで、クロムの上部中​​央にあるStep over the next function(F10)ボタンをクリックします。Resume(F8)
于 2015-02-10T17:14:21.943 に答える
17

これはChromeで非常にうまく機能することがわかりました。

検査したい要素を右クリックし、[Force Element State] > [Hover] をクリックします。スクリーンショットを添付。

要素の状態を強制する

于 2015-05-31T20:41:24.553 に答える