web-dev-qa-db-ja.com

ポップオーバー検査のためにクロムデバッガ/ DevToolsパネルで画面をフリーズしますか？

私はTwitterのブートストラップポップオーバーのz-indexを試して分析するためにクロムインスペクタを使っていますが、それが非常にイライラすることがわかりました...

関連付けられているCSSを評価および変更できるように、ポップオーバーを（表示されている間に）フリーズする方法はありますか。

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

cssgoogle-chromegoogle-chrome-devtools
295
Abram

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

  1. 希望のページを閲覧する
  2. 開発コンソールを開きます - F12 Windows/Linuxまたは option + ⌘ + J OSXで
  3. クロムインスペクタでSourcesタブを選択します
  4. Webブラウザウィンドウで、目的の要素の上にマウスを移動してポップオーバーを開始します。
  5. ヒット F8 Windows/Linux（または fn + F8 ポップオーバーが表示されている間に実際のページのどこかをクリックしてもF8は何もしません。最後のクリックは、ソースタブのように、インスペクタのどこかにある必要があります
  6. インスペクタのElementsタブに移動します
  7. あなたのポップオーバーを探してください（trigger要素のHTMLにネストされます）。
  8. CSSを修正して楽しんでください
580
Abram

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

  • コンソールで次のJavaScriptを実行します。これは5秒でデバッガに侵入します。

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

  • 要素を表示して（またはホバリングして）、Chromeがデバッガに侵入するまで待ちます。

  • ChromeインスペクタのElementsタブをクリックすると、そこで要素を探すことができます。
  • Find Elementアイコン（虫眼鏡のように見えます）をクリックすることもできます。Chromeは、ページ上の要素を右クリックしてInspect Elementを選択することで、移動して検査および検索できるようにします。

このアプローチは、このページの他の 素晴らしい答え に対するわずかなバリエーションです。

206
Brad Parks

PDATE： Brad Parksが彼のコメントで書いているように、たった1行のJSコードでもっと良くて簡単な解決策があります。

setTimeout(function(){debugger;},5000);を実行してください、そして、あなたの要素を見せに行ってください、そして、デバッガに侵入するまで待ってください

元の答え：

私はちょうど同じ問題を抱えていた、そして私は私が "普遍的な"解決策を見つけたと思う。 （サイトがjQueryを使用していると仮定して）
誰かに役立つことを願っています！

  1. インスペクタの[要素]タブに移動します
  2. <body>を右クリックし、「HTMLとして編集」をクリックします。
  3. <body>の後に次の要素を追加して、Ctrl + Enterを押します。
    <div id="debugFreeze" data-Rand="0"></div>
  4. この新しい要素を右クリックして、 "Break on ..." - > "Attributes modification"を選択します。
  5. 今度はコンソールビューに行き、次のコマンドを実行します。
    setTimeout(function(){$("#debugFreeze").attr("data-Rand",Math.random())},5000);
  6. ブラウザウィンドウに戻り、ブレークポイントに到達してブラウザが「フリーズ」する前に、要素を見つけて/ hover/focus/etcをクリックするのに5秒かかります。
  7. 今、あなたはあなたのクリック/ホバー/フォーカス/ etc要素を安心して調べることができます。

もちろん、アイデアがわかれば、JavaScriptとタイミングを変更できます。

46
frzsombor
  1. Elementsタブ内の任意の場所を右クリック
  2. 選ぶ Breakon... >subtree modifications
  3. 表示したいポップアップをトリガーして、DOMの変更が表示されるとフリーズします。
  4. それでもポップアップが表示されない場合は、表示したいポップアップがフリーズするまで、クロムの上部中​​央上部にあるStep over the next function(F10)の横にあるResume(F8)ボタンをクリックします。
27
Adrian Enriquez

私はこれがChromeで本当にうまくいくことを発見しました。

調べたい要素を右クリックし、[要素状態を強制]> [ホバー]の順にクリックします。スクリーンショットを添付しました。

Force element state

12
Leah Huyghe

私の簡単な方法：

setTimeout(function(){ debugger; }, 3000);
1
Nadav B