يستخدم مؤلف المنشور الذي نقوم بترجمته أدوات مطوّري برامج Chrome كل يوم تقريبًا. يريد هنا التحدث عن الميزات غير المعروفة لهذه الأدوات. يقول إنه إذا عرف عنها من قبل ، فسيكون ذلك مفيدًا له بالتأكيد.
1. طريقة بسيطة للحصول على رابط لأي عنصر قيد الدراسة
تتيح لك أدوات مطوّر Chrome الحصول على رابط لأي عنصر قيد التحقيق في وحدة التحكم. للقيام بذلك ، بالعمل في لوحة
Elements ، انقر بزر الماوس الأيمن على عنصر وحدد
Store as global variable من القائمة المنسدلة.
طريقة بسيطة للحصول على رابط لأي عنصر قيد التحقيق2. إنشاء تعبيرات تفاعلية متصلة بوحدة التحكم
في أدوات المطور ، يمكنك إنشاء تعبيرات تفاعلية متصلة بأعلى وحدة التحكم ، يتم تحديث قيمها باستمرار. يظهر الإجراء الخاص بإنشاء مثل هذه التعبيرات في الشكل التالي. إذا كنت تعلم أنه يجب تحديث بعض العناصر على الصفحة ، فقد تكون هذه الميزة مفيدة للغاية لمراقبة هذه العناصر.
التعبيرات التفاعلية في Chrome3. محاكاة اتصالات الإنترنت البطيئة
تتيح لك علامة التبويب "
Network في أدوات مطوّري برامج Chrome محاكاة اتصال المتصفح بشبكات مختلفة. يمكن أن تكون هذه الميزة مفيدة للغاية من أجل تقييم سلوك الصفحة في موقف يستغرق تحميله عدة ثوانٍ.
استكشاف صفحة تحاكي الطرق المختلفة للاتصال بالإنترنت4. تعطيل ذاكرة التخزين المؤقت ، وحفظ السجلات عند التبديل بين الصفحات
اضطررت إلى مواجهة العديد من المشاكل ، كما اتضح فيما بعد ، لم تكن أخطاء. السبب الخاص بهم كان تحميل غير صحيح من رمز المخزنة مؤقتاً. للتخلص من هذه المشاكل ، يمكنك تعطيل التخزين المؤقت تمامًا باستخدام إمكانيات علامة تبويب
Network . هذا هو مربع الاختيار
Disable cache . يرجى ملاحظة أن ذاكرة التخزين المؤقت لا تعمل فقط عندما يكون شريط أدوات المطور مفتوحًا.
يعد حفظ السجلات ميزة أخرى مفيدة بسبب عدم مسح وحدة التحكم عند إعادة تحميل الصفحة قيد التحقيق. لتمكين خانة الاختيار هذه الميزة
Preserve log في علامة تبويب
Network .
تعطيل ذاكرة التخزين المؤقت وحفظ السجلات5. صنع لقطات
تتضمن أدوات المطور من Chrome أداة لقطة مضمنة. من أجل استخدامها ، تحتاج ، مع فتح نافذة الأداة ، إلى تطبيق تركيبة المفاتيح
Ctrl+Shift+P ، ثم أدخل
screenshot الكلمة الرئيسية في الحقل الذي يظهر واختر الطريقة المطلوبة لإنشاء لقطة شاشة.
إنشاء لقطة شاشة من شريط أدوات المطور6. الأمر console.log () بعيد عن الطريقة الوحيدة لتسجيل شيء ما في وحدة التحكم
الجميع يستخدم الأمر
console.log() لتسجيل بيانات تصحيح الأخطاء. ومع ذلك ، لا يستنفد هذا الأمر قدرات التسجيل. على وجه الخصوص ، فإن الأوامر
console.warn() و
console.error() تحت تصرف المطور.
تعرض هذه الأوامر رسائل بمستويات مختلفة من التسجيل إلى وحدة التحكم - وهذه ، على التوالي ، تحذيرات ورسائل خطأ. يتم تمييزها بألوان ورموز مختلفة. يمكن تصفية الرسائل المعروضة في وحدة التحكم بواسطة أوامر مختلفة.
Console.warn () و console.error ()يمكنك استخدام الأمر
console.table() لعرض بعض البيانات المهيكلة المنسقة بشكل مريح في تنسيق جدول.
command console.table ()لا تقتصر إمكانيات العمل مع وحدة التحكم على هذه الأوامر. على سبيل المثال ، هناك أيضًا أوامر مثل
console.assert() و
console.group() .
هنا يمكنك العثور على قصة مفصلة عن هذه الفرق.
7. $ - بناء إرجاع أحدث التعبير المحسوب
يمكن استخدام بنية
$_ لإرجاع قيمة العملية السابقة التي تم تنفيذها في وحدة التحكم.
باستخدام $ _ البناء8. الأمر $ () هو اختصار لـ document.querySelector ()
يمكنك استخدام الأمر
$() في وحدة التحكم لتحديد عنصر بسرعة. لا يتم تطبيق ميزات jQuery هنا ، بالمناسبة ، على الرغم من أنه يبدو للوهلة الأولى أن هذا ليس كذلك.
وبالمثل ، فإن الأمر
$$() هو اختصار لـ
document.querySelectorAll() .
باستخدام $ ()9. تمكين حالات العناصر ، مثل التمرير أو التركيز ، في لوحة الأنماط
إذا كان من الضروري أثناء دراسة عنصر ما دراسة سلوكه في حالة
hover ، فقد تكون هذه مهمة شاقة ، لأنه من أجل ترجمة عنصر إلى هذه الحالة ، سيكون من الضروري وجود مؤشر الماوس فوقه. يمكن تسهيل حل هذه المشكلة عن طريق الاستفادة من إمكانيات لوحة
Styles . يمكنك هنا فرض نقل العناصر إلى ولايات مثل
hover أو
focus .
فرض البند على الدولة10. مزيج الضغط على مفتاح Ctrl والنقر بالماوس يساعد في إيجاد تعريف لقاعدة CSS
هل سبق لك أن تعرف أين يتم وصف قاعدة CSS؟ هذه المهمة سهلة للغاية عن طريق الضغط على مفتاح
Ctrl والنقر على قاعدة الاهتمام لك. يستخدم MacOS
Cmd بدلاً من
Ctrl .
Ctrl + النقر - البحث عن موقع تعريف قاعدة CSSأعزائي القراء! ما الذي تضيفه إلى قائمة الميزات غير المعروفة لأدوات مطوّري برامج Chrome هنا؟
