أصبحت أدوات تطوير المتصفح ضرورية للقيام بعملنا كمبرمجين للويب. على مر السنين ، كان البائعون يضيفون المزيد والمزيد من الأدوات لتسهيل أعمال التطوير لدينا. لكل متصفح ميزاته ومراوغاته الخاصة ، ولكن معظمها يشترك في أرضية مشتركة. لسوء الحظ بالنسبة لنا ، فإن المتصفحات القائمة على Blink هي الأكثر ازدحامًا بالميزات ، والباقي لديها بعض الأرضية لتغطيتها.
ما مدى معرفتك بأدوات تطوير المتصفح؟ هل تستثمر بعض الوقت في التعرف على الميزات الجديدة؟ في هذه المقالة ، سأعرض ميزات أدوات التطوير الخمس الأكثر فائدة وغير المعروفة لجعل التطوير اليومي أسهل وأكثر كفاءة.
قبل البدء ، ابحث أدناه عن القائمة الكاملة لمراجع توثيق اختصارات لوحة المفاتيح لكل بائع:
- Brave و Chrome و Edge.
- موزيلا فايرفوكس.
- سفاري.
1. ابحث عن مصدر خاصية CSS
يعمل في Brave / Chrome / Edge / Firefox / Safari
يعتمد CSS على خوارزمية تتالي. يمكن أن يجعل ذلك من الصعب تحديد المكان الذي ورثت منه الممتلكات.
"التتالي هو خوارزمية تحدد كيفية دمج قيم الممتلكات الناشئة من مصادر مختلفة. يكمن في جوهر CSS ، كما يؤكد الاسم: Cascading Style Sheets. تشرح هذه المقالة ماهية التسلسل ، والترتيب الذي تتتالي به إعلانات CSS ، وكيف يؤثر ذلك عليك ، كمطور الويب. "
لحسن الحظ ، من السهل استخدام أدوات المتصفح. كل ما عليك فعله هو اتباع بعض الخطوات:
- حدد العنصر الذي تريد فحصه.
- حدد علامة التبويب المحسوبة.
- انتقل إلى الخاصية التي تريد معرفة موقع مصدرها.
- انقر فوق السهم للانتقال إلى فئة CSS.
- استمر في الضغط على مفتاح الأوامر أو انقر مع الضغط على مفتاح Ctrl للتنقل إلى إعلان مصدر CSS للخاصية.
- لعرض الملف بشكل أفضل ، اضغط على الزر السفلي {} ، والذي سيعمل على طباعة الملف بشكل جيد ، مما يسهل قراءته.
مقطع حول استخدام CSS finder على Dev Tools Clip حول استخدام CSS finder على Dev Tools
مثال على استخدام Chrome Dev Tools
تعد علامة التبويب المحسوبة أداة مفيدة ستساعدك على فهم ما يتم تطبيقه بالضبط على العنصر الخاص بك. عادة ما يكون مكانًا جيدًا للبدء عند محاولة فهم تخطيط العنصر الخاص بك.
2. البحث عن كود JavaScript محدد
يعمل في Brave / Chrome / Edge / Firefox / Safari
قد يكون من الصعب أحيانًا العثور على الكود الخاص بك في المتصفح. هناك طرق مملة للقيام بذلك ، مثل التنقل إلى المصادر والبحث لمعرفة ما إذا كان مصدرك موجودًا.
هناك طريقتان سريعتان للقيام بذلك:
أ) إجراء بحث شامل باستخدام مفاتيح الاختصار: option + command + F أو ctrl + shift + F بالانتقال إلى خيار القائمة "...> بحث" لمتصفحات Blink. في Safari ، ابحث فقط عن رمز البحث في شريط أدوات التطوير.
في هذا المثال ، سأذهب إلى github.com/dioxmio وأبحث عن طريقة getCookies. يمكنك أن ترى كيف نحصل على نتائج متعددة لبحثنا. إنها مسألة تمر عليهم الآن.
لقطة شاشة لاستخدام البحث العالمي
ب) استخدام اختصار command + P أو ctrl + P. سيؤدي هذا إلى فتح بحث عن ملف ، تمامًا كما يحدث في IDE المفضل لديك. إذا كانت خرائط المصدر الخاصة بك موجودة ومرتبطة بملفات JavaScript الخاصة بك ، فستتمكن من العثور على الملف الذي تبحث عنه. إذا كان موجودًا في الأصل في TypeScript ، فيمكنك البحث عن ملف .ts. دعنا ننتقل إلى github.com/dioxmio وابحث عن هذه مرة أخرى:
مقطع حول العثور على الكود من خلال البحث في ملف أدوات التطوير في ChromeClip حول العثور على الكود من خلال البحث في ملف أدوات المطورين في Chrome
التقط باستخدام Chrome Dev Tools
مقطع حول العثور على الكود من خلال البحث في ملف أدوات التطوير في SafariClip حول العثور على الكود من خلال البحث في ملف أدوات التطوير في Safari
التقط الصور باستخدام Safari Dev Tools
على Firefox ، يجب أن تكون في علامة التبويب Debugger حتى يعمل.
3. مرافق وحدة التحكم
يعمل في Brave / Chrome / Edge / Firefox / Safari مع بعض الاختلافات
تسجل أداة وحدة تحكم المطور المعلومات المرتبطة بصفحة الويب ، مثل JavaScript وطلبات الشبكة وأخطاء الأمان. للتحقق من كل إمكانات سجل وحدة التحكم ، تحقق من مقالتي هنا. ومع ذلك ، فإن وحدة التحكم قادرة على أكثر من مجرد طباعة السجلات.
دعنا نتحقق من بعض الميزات:
- واحدة من أكثر الطرق استخدامًا هي طريقة clear () ، والتي ستقوم ببساطة بمسح إخراج وحدة التحكم.
- ستعمل طريقة النسخ على نسخ الكائن / العنصر الأولي الذي تمرره إليه إلى الحافظة.
لقطة شاشة لاستخدام وظيفة النسخ في وحدة تحكم المتصفح ، لقطة شاشة لاستخدام وظيفة النسخ في وحدة تحكم المتصفح
- ستحتوي الحافظة الآن على {x: 12، y: 20}عادة ما نستخدم كائن المستند لفحص DOM وتنفيذ الاستعلامات. ومع ذلك ، هناك بعض أساليب الاسم المستعار التي ستوفر عليك الكثير من الكتابة. يمكنك استخدام $ أو $$ للاستعلام عن نمط DOM JQuery. $ هو اسم مستعار لوظيفة document.querySelector. $$ هو اسم مستعار لـ document.querySelectorAll.
التقط باستخدام Chrome Dev Tools
سيعود الاسم المستعار $ _ آخر تعبير تم تقييمه. دعنا نتحقق من ذلك باستخدام بعض الأمثلة:
لقطة شاشة لاستخدام الاسم المستعار الأخير للنتيجة في أدوات تطوير Chrome ، لقطة شاشة لاستخدام الاسم المستعار الأخير للنتيجة في أدوات تطوير Chrome التقط باستخدام Chrome Dev Tools
لقطة شاشة لاستخدام الاسم المستعار للعنصر في أدوات مطوري Chrome ، لقطة شاشة لاستخدام الاسم المستعار للعنصر في أدوات تطوير Chrome
4. قائمة الأوامر
يعمل في Brave / Chrome / Edge
هذه ميزة خاصة بالمتصفحات القائمة على Blink. الاحتمالات في قائمة الأوامر لا حصر لها. هناك الكثير من المرافق التي تستحق الاستكشاف. يمكنك إحضار قائمة الأوامر بالضغط على command + shift + P أو ctrl + shift + P.
يمكنك العثور على مرجع مفصل هنا.
5. تبديل حالة العنصر
يعمل في Brave / Chrome / Edge / Firefox / Safari
قد يكون من الصعب أحيانًا فحص العناصر التي تستند إلى حالات التمرير / التركيز / الحالة النشطة / التي تمت زيارتها. هذا هو السبب في أن جميع أدوات تطوير المتصفح تقريبًا تتضمن طريقة يمكنك من خلالها تبديل حالات العنصر الخاص بك. سيساعدك ذلك على تصور كيفية تصرف عناصرك على الفور وفحص خصائص CSS الخاصة بهم.
في المثال أدناه ، قمت بتحديد عنصر زر وفحصت حالة التمرير حتى أتمكن من فحصه بشكل أفضل.
التقط باستخدام مُعدِّل حالة العنصر على أدوات مطوري Chrome
التقط الصور باستخدام Safari Dev Tools
يتم إحتوائه
كما ذكرنا سابقًا ، تمتلئ المتصفحات الآن بالعديد من الميزات. قد يكون من الصعب تتبع كل شيء. إن اكتساب عادة فحص أدوات التطوير بفضول سيكون له تأثير إيجابي على حياتك العملية اليومية. معرفة الأدوات الخاصة بك أمر لا بد منه.
ستعلن بعض المتصفحات على وحدة التحكم عن بعض التغييرات في الميزات من وقت لآخر. تأكد من استثمار بعض الوقت في قراءة تلك الإعلانات. سوف يساعدونك على البقاء على اطلاع دائم وتعلم أشياء جديدة.