it-swarm.dev

تجميد الشاشة في مصحح الكروم/لوحة DevTools للتفتيش popover؟

أنا أستخدم مفتش chrome لمحاولة تحليل z-index الخاص بنوافذ Bootstrap على Twitter ، وإيجاده محبط للغاية ...

هل هناك طريقة لتجميد popover (أثناء العرض) حتى أتمكن من تقييم وتعديل CSS المرتبط؟

لا يؤدي وضع "تحويم" ثابت على الرابط المرتبط إلى ظهور المنبثقة.

286
Abram

حصلت عليه العمل ، وهنا كان الإجراء الخاص بي:

  1. استعرض للوصول إلى الصفحة المطلوبة
  2. افتح وحدة التحكم dev - F12 على ويندوز/لينكس أو option +  + J على OSX
  3. حدد علامة التبويب Sources في chrome inspector
  4. في نافذة متصفح الويب ، مرّر الماوس فوق العنصر المرغوب لبدء المنبثقة
  5. نجاح F8 على ويندوز/لينكس (أو fn + F8 على OSX) بينما يظهر popover. إذا قمت بالنقر فوق أي مكان على الصفحة الفعلية F8 فلن تفعل شيئًا. يجب أن تكون النقرة الأخيرة في مكان ما في المفتش ، مثل علامة تبويب المصادر
  6. انتقل إلى علامة التبويب Elements في المفتش
  7. ابحث عن popover (سيتم تداخله في HTML لعنصر المشغل)
  8. استمتع بتعديل CSS
580
Abram

لتكون قادرًا على فحص أي عنصر ، قم بما يلي. يجب أن يعمل هذا حتى لو كان من الصعب تكرار حالة التحويم:

  • قم بتشغيل javascript التالية في وحدة التحكم. هذا سوف اقتحام مصحح الأخطاء في 5 ثوان.

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

  • انتقل إلى إظهار العنصر الخاص بك (عن طريق التمرير بالماوس أو مع ذلك) وانتظر حتى يقتحم Chrome المصحح.

  • انقر الآن على علامة التبويب Elements في Chrome Inspector ، ويمكنك البحث عن العنصر الخاص بك هناك.
  • قد تتمكن أيضًا من النقر على أيقونة Find Element (يشبه العدسة المكبرة) وسيتيح لك Chrome الانتقال وفحص والعثور على العنصر الخاص بك على الصفحة بالنقر فوقه ، ثم اختيار Inspect Element

لاحظ أن هذا الأسلوب يمثل تغييراً طفيفًا في هذه الإجابة الأخرى إجابة رائعة في هذه الصفحة.

205
Brad Parks

استكمال: كما كتب براد باركس في تعليقه ، هناك حل أفضل وأسهل بكثير مع سطر واحد فقط من كود JS:

قم بتشغيل setTimeout(function(){debugger;},5000); ، ثم انتقل إلى إظهار العنصر الخاص بك وانتظر حتى يتم اقتحام مصحح الأخطاء


الجواب الأصلي:

لقد واجهت نفس المشكلة ، وأعتقد أنني وجدت حلاً "عالميًا". (على افتراض أن الموقع يستخدم jQuery)
نأمل أن يساعد شخص ما!

  1. انتقل إلى علامة تبويب العناصر في المفتش
  2. انقر بزر الماوس الأيمن فوق <body> وانقر فوق " تحرير كـ HTML "
  3. أضف العنصر التالي بعد <body> ثم اضغط على Ctrl + Enter:
    <div id="debugFreeze" data-Rand="0"></div>
  4. انقر بزر الماوس الأيمن فوق هذا العنصر الجديد ، وحدد "Break on ..." -> "تعديلات السمات"
  5. انتقل الآن إلى وحدة التحكم عرض وقم بتشغيل الأمر التالي:
    setTimeout(function(){$("#debugFreeze").attr("data-Rand",Math.random())},5000);
  6. عُد الآن إلى نافذة المتصفح ولديك 5 ثوانٍ للعثور على العنصر الخاص بك والنقر فوق/hover/focus/etc ، قبل أن يتم الوصول إلى نقطة التوقف وسيتم "تجميد" المتصفح.
  7. الآن يمكنك فحص العنصر الذي تم النقر عليه/تحومه/التركيز/الخ في سلام.

بالطبع يمكنك تعديل جافا سكريبت والتوقيت ، إذا حصلت على هذه الفكرة.

41
frzsombor
  1. انقر بزر الماوس الأيمن في أي مكان داخل علامة تبويب العناصر
  2. أختر Breakon... >subtree modifications
  3. قم بتشغيل المنبثقة التي تريد رؤيتها وسيتم تجميدها إذا شاهدت تغييرات في DOM
  4. إذا كنت لا تزال غير قادر على رؤية النافذة المنبثقة ، فانقر فوق زر Step over the next function(F10) بجانب Resume(F8) في الجزء العلوي العلوي من وسط chrome حتى تجمد الإطار المنبثق الذي تريد رؤيته.
27
Adrian Enriquez

لقد وجدت أن هذا يعمل جيدًا في Chrome.

انقر بزر الماوس الأيمن فوق العنصر الذي ترغب في فحصه ، ثم انقر فوق Force Element State> Hover. قطة المرفقة.

Force element state

11
Leah Huyghe

طريقتي البسيطة:

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