🚑 🕙 🆑 أدوات مطوري Chrome المفضلة لدي 👩🏾‍🤝‍👩🏻 🚷 👩‍❤️‍👩

يوم جيد يا اصدقاء!

أدوات مطوري Chrome هي مجموعة أدوات قوية جدًا لتطوير تطبيقات الويب. باستخدام هذه الأدوات ، يمكننا التنقل في DOM ، والتحقق من طلبات الخادم ، وضبط أداء التطبيق ، وما

إلى ذلك. تساعد هذه "الميزات" على تقليل نقرة أو نقرتين - أليس هذا هو سبب اجتماعنا هنا؟

نمط JQuery للوصول إلى DOM

jQuery هي مكتبة رائعة. لقد كانت تدير الويب طوال حقبة كاملة. وفقًا لبعض التقارير ، يستخدم أكثر من 70٪ من مواقع الويب الأكثر شهرة في العالم هذا الإصدار أو ذاك الإصدار من jQuery. يعد هذا إنجازًا رائعًا لمكتبة تمت كتابتها عام 2006.

إن واجهة برمجة التطبيقات الأكثر شيوعًا التي تقدمها jQuery هي $ ، تُستخدم لتحديد عناصر DOM. في وحدة تحكم أداة مطوري Chrome (المشار إليها فيما يلي باسم وحدة التحكم) ، من الممكن استخدام محدد محدد ، وهو اسم مستعار للمستند. querySelector ().

على سبيل المثال ، للنقر على زر ، تحتاج إلى القيام بما يلي:

$$ هو مرادف للوثيقة. QuerySelectorAll ():

هناك حيلتان إضافيتان للعمل مع $. في بعض الأحيان يكون المحدد معقدًا جدًا بحيث لا يمكن كتابته يدويًا ، أو لا يمكننا ببساطة تحديد الخصوصية الكافية للمُحدِّد. إذا حددنا عنصرًا في علامة التبويب "العناصر" ، يمكننا الحصول عليه في وحدة التحكم باستخدام متغير $ 0:

في الواقع ، تتيح لك وحدة التحكم الوصول إلى آخر 5 عناصر محددة. هذه العناصر متاحة من خلال المتغيرات $ 0- $ 4 ، على التوالي:

نسخ خصائص العنصر

علامة التبويب عناصر مفيدة للغاية. يقوم بتخزين شجرة DOM لموقعنا ، ويسمح لك بعرض أنماط العناصر وإجراء تغييرات عليها بسرعة.

الشيء الرائع حقًا الذي اكتشفته هو القدرة على نسخ خصائص عنصر (وليس فقط) باستخدام قائمة السياق.

على سبيل المثال ، يمكنك نسخ محدد العنصر:

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

كما ترى ، يمكننا أيضًا نسخ أنماط العناصر ، أو "المسار" JS (document.querySelector (SELECTOR)) أو XPath.

تصفية طلب الشبكة

في بعض الأحيان يتعين علينا العمل مع صفحة ترسل الكثير من الطلبات إلى الخادم. أعني ، الكثير من الطلبات.

الخوض في هذه البراري بحثًا عن طلب محدد ليس مهنة ممتعة. لحسن الحظ ، يمكنك تصفية الاستعلامات.

تسمح لك مجموعة من المرشحات بعرض الاستعلامات حسب النوع ، على سبيل المثال ، XHR / Fetch وأوراق الأنماط ونصوص JS والصور وما إلى ذلك:

يمكنك أيضًا تحديد المعايير الخاصة بك في حقل الإدخال الموجود أعلى المرشحات:

محاكاة سرعات اتصال الشبكة المختلفة

باستخدام علامة التبويب "الشبكة" ، يمكننا اختبار موقعنا في ظروف سرعات اتصال مختلفة. يتم تعيين الإعداد الافتراضي على الإنترنت ، حيث تستمتع تمامًا بالنطاق الترددي لاتصالك.

بالإضافة إلى الإنترنت ، تتوفر "إعدادات مسبقة" مثل Fast 3G و Slow 3G و offline ، والتي تختلف في سرعة تحميل الصفحة وسرعة تنزيل الملف وتأخير الوقت. إذا كنت بحاجة إلى محاكاة شيء آخر ، يمكنك استخدام الزر إضافة ... لإضافة ملف التعريف الخاص بك:

استخدام التعبيرات الحية في وحدة التحكم

ما هي التعبيرات الحية؟

التعبيرات الحية هي تعبيرات يتم "تقييمها" باستمرار في وحدة التحكم. افترض أنك تريد تتبع قيمة المتغير. يمكنك إدخاله مرارًا وتكرارًا:

بفضل Live Expressions ، يمكنك التركيز على الرمز والسماح لـ Chrome بمراقبة التغييرات بشكل مستقل:

هذه الميزة متاحة لكل من المتغيرات المعلنة في وحدة التحكم والمتغيرات المعلنة في البرنامج النصي.

محاكاة الأجهزة المختلفة

أولئك الذين يعملون مع التطبيقات المتجاوبة على دراية بالشعور الذي تشعر به عندما تعمل بجد وطويل في جمال تخطيط الصفحة لمجرد رؤية كيف ينهار كل شيء على الجهاز بدقة مختلفة.

لست هنا للحديث عن استفسارات وسائل الإعلام ، ولكن لإظهار طريقة لاختبار عملهم.

إذا قمت بالنقر فوق الزر الذي يشبه الجهاز اللوحي والهاتف ، فسوف ترى كيف تتغير منطقة عرض المستعرض وفقًا لأحجام الأجهزة المختلفة.

يمكنك تحديد جهاز من قائمة الإعدادات المسبقة التي تحتوي على أجهزة شائعة مثل iPhone X و iPad Pro و Pixel 2 و Pixel 2 XL ، وما إلى ذلك. هذه القائمة بعيدة عن الاكتمال (غير ذات صلة) ، لكنها كافية لحل معظم المشاكل.

إذا لم يكن الجهاز الذي تريده مدرجًا ، يمكنك ضبط الدقة يدويًا. كما ترون ، قمت بتعيين إذني الخاص لمحاكاة OnePlus 6 (الأداة اليومية):

تغيير حالة العنصر

هل صادفت موقفًا تريد فيه اللعب بالأنماط المطبقة على عنصر عند التمرير فوقه (: hover) ، ولكن في كل مرة تحرك فيها المؤشر إلى علامة تبويب الأنماط ، يفقد العنصر تحومه؟

تسمح لك أدوات المطور بإصلاح حالة العنصر. يمكننا بسهولة تمكين / تعطيل حالات مثل: active ،: hover ،: focus ،: focus-within و: زار:

إليك أدوات مطوري Chrome المفضلة لدي. شكرآ لك على أهتمامك.

الترميز سعيدة!

أدوات مطوري Chrome المفضلة لدي