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

394

私はChromeインスペクターを使用してz-index、Twitterブートストラップポップオーバーの分析を試み、非常に苛立たせています...

表示されているポップオーバーをフリーズして、関連するCSSを評価および変更する方法はありますか？

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

css  google-chrome  google-chrome-devtools 
— アブラム
ソース
7
ポップアップが表示されたらすぐにJavaScriptにブレークポイントを設定してみてください（debugger;）
— Hope4You
5
私は5秒でwindow.setTimeoutトリガーするために使用しdebugger、要素の上にホバーして待機します。
— grimmdude 2018
こんにちは、DevToolsテクニカルライターです。問題を説明するMVCEを送ってくれませんか？2019年の時点で、トリックを実行する必要があるいくつかのツール（イベントリスナーのブレークポイント、疑似クラストグル）がありますが、状況を再現できるまで詳細な回答は提供できません。
— ケイスバスク
— Muhammed AbdElFatah
ここで@KayceBasquesは例です：telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist要素ビューにリストコンテンツポップオーバーを検査してみてください、その後、それを開くためにドロップダウンリストをクリックします。
— RMorrisey

回答:

704

うまくいきました。これが私の手順です：

  1. 目的のページに移動します
  2. 開発コンソールを開きF12ます-Windows / Linuxまたはoption+ ⌘+ JmacOS
  3. SourcesChromeインスペクターでタブを選択します
  4. Webブラウザーウィンドウで、目的の要素にカーソルを合わせてポップオーバーを開始します
  5. ヒットF8（またはWindows / Linux上のfn+ F8MacOSの上）ポップオーバーが表示されている間。実際のページのどこかをクリックした場合、F8キーは何もしません。最後のクリックは、[ソース]タブのように、インスペクターのどこかにある必要があります
  6. に行く Elementsインスペクタータブにます
  7. ポップオーバーを見つけます（トリガー要素のHTMLにネストされます）
  8. CSSの変更を楽しんでください
— アブラム
ソース
9
このワークフローは、ブレークポイントデバッガーの簡単で便利な紹介を提供し、コンソールのクリックで消えるので、スタイル設定が難しいメニューを分離するのに役立ちました。
— Trevor Pierce
22
DOM要素がfocusoutイベントを使用して非表示にしている場合、F8キーを押すことはできません。
— マルセル
2
@Deanを使用してF8をトリガーする必要がありますfn！
— mik01aj 2015
10
詳しくF8は、ショートカットが実際にデバッガを一時停止すること（スクリプトの実行）です。そしてctrl + \ また働きます。（cmd + \ MacOS）。
— LeOn-ハンリー
1
または、F82回押すこともできます
— samdd '24年
274

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

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

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

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

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

このアプローチは、このページの他のすばらしい答えに対するわずかなバリエーションであることに注意してください。

— ブラッドパークス
ソース
7
私はあなたがfrzsomborの答えに適切な敬意を払ったことを尊重します。いいね。
— Jeremy Moritz、
4
機能がjs Focusに追加され、ぼかしで削除されるため、これは私が必要とするものです。これは、開発ツールに切り替えると常に発生します。
— trudesign 2015
6
AbramのF8ソリューションは私にはうまくいきませんでした。これはしました。ありがとう！
— ラルフ、
3
THX。タイトル：❚❚、アドレス：のブックマークを作成しましたjavascript:debugger;。F8動作しますが、マウスを使用することを好む人にとって、これはより便利かもしれません。
— Tymek 2017
1
他の人がコメントしたように、F8の答えは私には役に立たず、私を完全に混乱させていました！これは魅力のように機能します。ありがとうございました！
— DoYouEvenCodeBro
70

更新： Brad Parksが彼のコメントで書いたように、JSコードの1行だけで、はるかに優れた簡単なソリューションがあります。

実行してsetTimeout(function(){debugger;},5000);から要素を表示し、デバッガに侵入するまで待ちます

元の答え：

私は同じ問題を抱えていて、「ユニバーサル」な解決策を見つけたと思います。（サイトがjQueryを使用していると想定）
それが誰かに役立つことを願っています！

  1. インスペクターの要素タブに移動
  2. 右クリック<body>して「クリックHTMLなどの編集を」
  3. <body>その後、次の要素を追加し、Ctrl + Enterキーを押します。
    <div id="debugFreeze" data-rand="0"></div>
  4. この新しい要素を右クリックし、[ ブレーク...]-> [属性の変更 ]を選択します。
  5. コンソールビューに移動して、次のコマンドを実行します。
    setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
  6. ブラウザーウィンドウに戻り、ブレークポイントにヒットしてブラウザーが「フリーズ」する前に、5秒以内にエレメントを見つけてクリック/ホバー/フォーカス/ etcします。
  7. これで、クリック/ホバー/フォーカス/ etc要素を安心して検査できます。

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

— frzsombor
ソース
11
おい！すばらしいアイデアです。ただし、追加のdivを追加する必要はありません...代わりsetTimeout(function(){debugger;}, 5000);にこのJavaScriptを実行し、要素を表示して、デバッガーに侵入するまで待ちます。次に、Chromeインスペクタの[要素]タブをクリックすると、そこで要素を探すことができます。[要素を検索]アイコン（虫眼鏡のようなアイコン）をクリックしても、Chromeで右クリックして[要素の検査]を選択すると、ページ上の要素を調べて見つけることができます。
— Brad Parks
5
この解決策は私のものより優れているだけでなく、他のすべてのソリューションよりも優れているので、これを答えとして追加する必要があると思います。すごくいい！
— frzsombor 2015
38
  1. 要素タブ内の任意の場所を右クリック
  2. 選ぶ Breakon... > subtree modifications
  3. 見たいポップアップをトリガーすると、DOMで変更が見られるとフリーズします
  4. それでもポップアップが表示されない場合は、表示したいポップアップをフリーズするまで、クロムの上部中​​央上部のStep over the next function(F10)横Resume(F8)にあるボタンをクリックします。
— エイドリアン・エンリケス
ソース
3
ありがとうございました！私はこれを知らず、私を救った
— R Claven
14

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

検査する要素を右クリックして、[要素の状態を強制]> [ホバー]をクリックします。スクリーンショットを添付しました。

要素の状態を強制

— リア・ホイゲ
ソース
5
CSSによってポップオーバーがトリガーされた場合にのみ機能します。
— mik01aj 2015
6

これをコンソールタブに配置します。

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

次に、5秒後にポップアップを表示する場所をクリックします。画面がフリーズし、CSSを楽しくカスタマイズできます。

— パーカールセンツォ
ソース
0

私の簡単な方法：

setTimeout(function(){ debugger; }, 3000);
— ナダブB
ソース
7
これは、3年前に投稿されたBrad Parksのソリューションとまったく同じです
— frzsombor
-2

私はここで他の解決策を試しました、それらはうまくいきますが、私は怠惰なので、これが私の解決策です

  1. 要素にカーソルを合わせると、展開状態がトリガーされます
  2. ctrl+ shift+c
  3. 要素の上に再度ホバー
  4. 右クリック
  5. デバッガーに移動する

右クリックすると、コンテキストメニューがポップアップするため、マウスイベントが登録されなくなり、安全にマウスを移動できます。

— ヴィンセント・タン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.