css ويب راجع: حالة التحويم في أدوات مطوري Chrome




جوجل عصر ويب (10)

أريد أن أرى :hover نمط :hover لمرساة أقفز في Chrome. في Firebug ، هناك قائمة منسدلة للنمط تسمح لي بتحديد حالات مختلفة لعنصر. لا يمكنني العثور على أي شيء مماثل في Chrome. هل فاتني شيء؟


كنت أقوم hover حالة hover القائمة مع Chrome وقمت بذلك لكي تتمكن من رؤية رمز حالة التمرير:

في لوحة Elements انقر فوق زر Toggle Element state وحدد :hover .

في لوحة Scripts اذهب إلى Event Listeners Breakpoints في القسم السفلي الأيمن وحدد Mouse -> mouseup .

الآن تفقد القائمة وحدد المربع الذي تريده. عندما تقوم بتحرير زر الماوس ، يجب أن تتوقف وتوضح حالة تحريك العنصر المحدد في لوحة Elements (انظر في قسم Styles ).


وأنا أعلم أن ما أفعله هو الحل الكامل ، لكنه يعمل بشكل مثالي وهذا هو ما أفعله في كل مرة.

ثم ، تابع مثل هذا:

  • تأكد أولاً من إلغاء إرساء Chrome Developer Tools.
  • بعد ذلك ، ما عليك سوى تحريك أي جانب من نافذة Dev Tools إلى منتصف العنصر الذي تريد فحصه أثناء التمرير.

  • وأخيرًا ، قم بتحريك العنصر وانقر بزر الماوس الأيمن وفحص العنصر وحرّك الماوس إلى نافذة أدوات Dev وستتمكن من اللعب باستخدام العنصر الخاص بك: hover css.

في صحتك!


تمكنت من رؤية النمط باتباع الخطوات التالية التي اقترحها Babiker - "عنصر النقر بزر الماوس الأيمن ، ولكن لا تحرك مؤشر الماوس بعيدًا عن العنصر ، احتفظ به في حالة المرور. اختر فحص العنصر عبر لوحة المفاتيح ، كما في السهم المرتفع ثم أدخل المفتاح ".

لتغيير النمط اتبع الخطوات المذكورة أعلاه ثم - تغيير علامة التبويب المستعرض الخاص بك عن طريق الضغط على CTRL + TAB على لوحة المفاتيح. ثم انقر مرة أخرى على علامة التبويب التي تريد تصحيحها. ستظل شاشة التحريك موجودة. الآن تأخذ بعناية الماوس إلى منطقة أداة المطور.


يعد التغيير إلى حالة التمرير في Chrome أمرًا سهلاً للغاية ، ما عليك سوى اتباع الخطوات التالية:

1) انقر بزر الماوس الأيمن في صفحتك واختر "فحص"

2) حدد العنصر الذي ترغب في فحصه في DOM

3) حدد رمز دبوس (تبديل عنصر الدولة)

4) ثم ضع علامة على التحويم

يمكنك الآن رؤية حالة التمرير الخاصة بـ DOM المحدد في المستعرض!


لا أعتقد أن هناك طريقة للقيام بذلك. لقد قمت بتقديم طلب ميزة . إذا كانت هناك طريقة ، فسيشير مطورو Google إلى ذلك وسأعدِّل إجابتي. إذا لم يكن كذلك ، سيكون علينا الانتظار ومشاهدة. (يمكنك تمييز المشكلة للتصويت عليها)

التعليق 1 بواسطة عضو مشروع Chrome : في 10.0.620.0 ، تعرض لوحة الأنماط: أنماط التحويم للعنصر المحدد ولكن لا: نشطة.

(اعتبارًا من هذا المنشور) إصدار القناة Stable الحالي هو 8.0.552.224.

يمكنك استبدال تثبيت قناتك الثابت لـ Google Chrome بقناة Beta أو قناة Dev (راجع قنوات إصدار الوصول المبكر ).

يمكنك أيضًا تثبيت تثبيت ثانوي للكروم يكون أكثر حداثة من قناة Dev .

... يتم تحديث إصدار Canary بشكل أكثر تكرارًا من قناة Dev ولا يتم اختباره قبل إصداره. نظرًا لأن بنية Canary قد تكون غير قابلة للاستخدام في بعض الأحيان ، لا يمكن تعيينها كمتصفح افتراضي وقد يتم تثبيتها بالإضافة إلى أي قناة من القنوات المذكورة أعلاه في Google Chrome. ...


هناك عدة طرق لرؤية أنماط HOVER STATE في أدوات مطوري Chrome.

الطريقة 01

الطريقة الثانية

مع Firefox Default Developer Toll

مع Firebug


EDIT: كانت هذه الإجابة قبل إصلاح الأخطاء ، انظر إجابة tnothcutt.

كان هذا صعبًا بعض الشيء ، ولكن هنا

  • انقر بزر الماوس الأيمن فوق العنصر ، ولكن لا تحريك مؤشر الماوس بعيدًا عن العنصر ، احتفظ به في حالة التحويم.
  • اختر فحص عنصر عبر لوحة المفاتيح ، كما في السهم الذي تم تضخيمه ثم مفتاح Enter.
  • انظر في أدوات المطورين ضمن قواعد CSS المطابقة ، يجب أن تكون قادرًا على رؤية: التمرير.

ملاحظة: لقد حاولت هذا على واحدة من علامات سؤالك.


في حالتي ، أريد أن dubug تلميح الأداة bootstip. لكن الأساليب المذكورة أعلاه لا تعمل بالنسبة لي. أعتقد أن bootstrap نفذ هذا بشيء مثل حدث الماوس / الخروج.

على أي حال ، عندما أتحرك على زر ، سيؤدي ذلك إلى إنشاء عنصر ht ht تحت الزر ، لذلك أختار العنصر الرئيسي للزر في علامة التبويب "عناصر" في نافذة "أدوات المطور" ، وقم بتمرير الزر ، و "Ctrl + C" ، ثم يمكنني لصق كود المصدر الذي يحتوي على الكود الذي تم إنشاؤه. آخر العثور على الشفرة التي تم إنشاؤها ، وإضافتها إلى شفرة المصدر عن طريق "تحرير كـ HTML" في علامة التبويب "عناصر".

آمل أن يساعد شخص ما.


في حال كان ذلك مفيدًا ، يبدو هذا الأمر أسهل في أحدث إصدار من Chrome (47.0.2526.106):

افحص العنصر ثم انقر على النقاط البيضاء الثلاث في الحضيض الأيسر:

ثم اختر حالة العنصر المطلوب من هذه القائمة المنسدلة:


أعتقد أن هذا الأمر لم يعد مشكلة في Chrome ولكن في حالة وجوده. كتبت هذا script jQuery لفحص DOM عندما أتحرك مع مفتاح TAB.

إذا تغيرت لاستخدام "mouseover" ، فستبدو كما يلي:

$("body *").on('mouseover', function(event) {       
    console.log(event.target);      
    inspect(event.target);
    event.stopPropagation();
});

يمكنك تعديله بسهولة لإزالة معالج الحدث عندما تنقر أو تقوم بشيء ما على عنصر تريد التوقف عنده.







google-chrome-devtools