نظرة عامة على Browser DevTools

تعد Browser DevTools عنصرًا أساسيًا في مربع أدوات مطور الواجهة الأمامية ، وهي متوفرة في جميع المتصفحات الحديثة. اكتشف أساسيات ما يمكنهم فعله من أجلك

أدوات تطوير المستعرض

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

بمجرد اكتشاف الاختلافات بين Internet Explorer و Netscape Navigator ، وتجنب العلامات والتقنية الخاصة ، كل ما كان عليك استخدامه هو HTML ولاحقًا CSS.

JavaScriptكانت تقنية لإنشاء مربعات حوار وأكثر قليلاً ، لكنها بالتأكيد لم تكن منتشرة كما هو الحال اليوم.

على الرغم من أن الكثير من صفحات الويب لا تزال عادية مثل HTML + CSS ، مثل هذه الصفحة ، فإن العديد من مواقع الويب الأخرى هي تطبيقات حقيقية تعمل في المتصفح.

مجرد توفير مصدر الصفحة ، كما فعل المتصفح ذات مرة ، لم يكن كافيًا.

كان على المستعرض توفير المزيد من المعلومات حول كيفية عرض الصفحة ، وما الذي تفعله الصفحة حاليًا ، ومن ثم قدمواميزة للمطورين: همادوات المطورين.

يختلف كل متصفح عن الآخر ، وبالتالي فإن أدوات التطوير الخاصة به تختلف قليلاً. في وقت كتابة هذا المقال ، يتم توفير أدوات المطور المفضلة لدي بواسطة Chrome ، وهذا هو المتصفح الذي سنتحدث عنه هنا ، على الرغم من أن Firefox و Edge أيضًا لديهما أدوات رائعة أيضًا.


بنية HTML و CSS

إن أبسط شكل من أشكال الاستخدام ، وهو أحد الأشكال الشائعة جدًا ، هو فحص محتوى صفحة الويب. عندما تفتح DevTools هذه هي اللوحة ، فإن لوحة Elements هي ما تراه:

Elements panel of the Browser Dev Tools

لوحة HTML

على اليسار ، HTML الذي يتكون من الصفحة

يؤدي التمرير فوق العناصر في لوحة HTML إلى إبراز العنصر في الصفحة ، ويسمح لك النقر فوق الرمز الأول في شريط الأدوات بالنقر فوق عنصر في الصفحة وتحليله في المراقب.

يمكنك سحب العناصر وإفلاتها في المفتش لتبقى بتغيير مواقعها في الصفحة.

لوحة أنماط CSS

على اليمين ، أنماط CSS التي يتم تطبيقها على العنصر المحدد حاليًا.

بالإضافة إلى تحرير الخصائص وتعطيلها ، يمكنك إضافة خاصية CSS جديدة ، مع أي هدف تريده ، عن طريق النقر فوق+أيقونة.

يمكنك أيضًا تشغيل حالة للعنصر المحدد ، حتى تتمكن من رؤية الأنماط المطبقة عندما يكون نشطًا ، أو محومًا ، عند التركيز.

في الجزء السفلي ، ملفنموذج الصندوقمن العنصر المحدد يساعدك على معرفة الهوامش والحشو والحدود والأبعاد في لمحة سريعة:

Box model in the CSS styles panel


وحدة التحكم

ثاني أهم عنصر في DevTools هو وحدة التحكم.

يمكن رؤية لوحة التحكم على اللوحة الخاصة بها ، أو بالضغط علىEscفي لوحة Elements ، ستظهر في الأسفل.

تخدم وحدة التحكم غرضين رئيسيين:تنفيذ JavaScript مخصصوالإبلاغ عن الأخطاء.

تنفيذ JavaScript مخصص

يوجد في الجزء السفلي من لوحة التحكم مؤشر وامض. يمكنك كتابة أي JavaScript هناك ، وسيتم تنفيذه على الفور. كمثال ، جرب الجري:

alert('test')

المعرف الخاص$0يسمح لك بالإشارة إلى العنصر المحدد حاليًا في مفتش العناصر. إذا كنت تريد الإشارة إلى ذلك كمحدد jQuery ، فاستخدم$($0).

يمكنك كتابة أكثر من سطر باستخدامshift-enter. يؤدي الضغط على مفتاح الإدخال في نهاية البرنامج النصي إلى تشغيله.

الإبلاغ عن الأخطاء

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

على سبيل المثال الفشل في تحميل مورد من الشبكة بمعلومات عنلماذا ا، تم الإبلاغ عنه في وحدة التحكم.

Console Error Reporting

في هذه الحالة ، يؤدي النقر فوق عنوان URL للمورد إلى نقلك إلى لوحة الشبكة ، وإظهار المزيد من المعلومات التي يمكنك استخدامها لتحديد سبب المشكلة.

يمكنك تصفية هذه الرسائل حسب المستوى (خطأ / تحذير / معلومات) وكذلك تصفيتها حسب المحتوى.

يمكن إنشاء هذه الرسائل بواسطة المستخدم في JavaScript الخاص بك باستخدام امتدادواجهة برمجة تطبيقات وحدة التحكم:

console.log('Some info message')
console.warn('Some warning message')
console.error('Some error message')

المحاكي

تتضمن Chrome DevTools محاكي جهاز مفيد للغاية يمكنك استخدامه لتصور صفحتك في كل حجم جهاز تريده.

The device emulator

يمكنك الاختيار من بين الأجهزة المحمولة الأكثر شيوعًا من الإعدادات المسبقة ، بما في ذلك أجهزة iPhone و iPad و Android والمزيد ، أو تحديد أبعاد البكسل بنفسك ، وتعريف الشاشة (1x ، 2x Retina ، 3x Retina HD).

في نفس اللوحة يمكنك الإعداداختناق الشبكةلعلامة تبويب Chrome المحددة ، لمحاكاة اتصال منخفض السرعة ومعرفة كيفية تحميل الصفحة ، و "عرض استفسارات وسائل الإعلام"يوضح لك كيفية تعديل استعلامات الوسائط CSS للصفحة.


لوحة الشبكة

تتيح لك لوحة الشبكة الخاصة بـ DevTools رؤية جميع الاتصالات التي يجب أن يعالجها المتصفح أثناء عرض الصفحة.

The network panel

تظهر الصفحة بنظرة سريعة:

  • شريط أدوات حيث يمكنك إعداد بعض الخيارات والمرشحات
  • رسم بياني لتحميل الصفحة ككل
  • كل طلب مع طريقة HTTP ورمز الاستجابة والحجم والتفاصيل الأخرى
  • تذييل مع ملخص إجمالي الطلبات والحجم الإجمالي للصفحة وبعض مؤشرات التوقيت.

خيار مفيد للغاية في شريط الأدوات هوالحفاظ على السجل. من خلال تمكينه ، يمكنك الانتقال إلى صفحة أخرى ، ولن يتم مسح السجلات.

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

يؤدي النقر فوق طلب محدد في القائمة إلى إظهار لوحة التفاصيل ، مع تقرير رؤوس HTTP:

The HTTP headers report in the network panel

وانهيار وقت التحميل:

The loading time breakdown


مصحح جافا سكريبت

إذا قمت بالنقر فوق رسالة خطأ في DevTools Console ، يتم فتح علامة التبويب "المصادر" بالإضافة إلى توجيهك إلى الملف والخط الذي حدث فيه الخطأ ، فلديك خيار استخدام مصحح أخطاء JavaScript.

The Javascript debugger

هذا مصحح أخطاء كامل الميزات. يمكنك تعيين نقاط التوقف ومشاهدة المتغيرات والاستماع إليهاDOMتغييرات أو كسر محددXHR(AJAX) طلبات الشبكة ، أو المستمعين للأحداث.


التطبيق والتخزين

تمنحك علامة التبويب "التطبيق" الكثير من المعلومات حول المعلومات التي يتم تخزينها داخل المتصفح بالنسبة إلى موقع الويب الخاص بك.

Application and storage

تخزين

يمكنك الوصول إلى التقارير والأدوات التفصيلية للتفاعل مع تخزين التطبيق:

ويمكنك مسح أي معلومات بسرعة لتبدأ بسجل نظيف.

تطبيق

تمنحك علامة التبويب هذه أيضًا أدوات لفحص تطبيقات الويب التقدمية وتصحيحها.

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

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


علامة التبويب "الأمان"

تمنحك علامة التبويب "الأمان" جميع المعلومات التي يمتلكها المتصفح نسبيًا فيما يتعلق بأمان الاتصال بموقع الويب.

The Security Tab

إذا كانت هناك أي مشكلة في اتصال HTTPS ، إذا تم تقديم الموقع عبر TLS ، فسيوفر لك المزيد من المعلومات حول سبب ذلك.


المراجعات

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

يمكنك إجراء أنواع مختلفة من عمليات التدقيق حسب نوع موقع الويب:

Audits by Lighthouse

يتم توفير التدقيق من قبلمنارة، أداة فحص جودة مواقع الويب الآلية مفتوحة المصدر. يستغرق الأمر بعض الوقت للتشغيل ، ثم يوفر لك تقريرًا رائعًا يحتوي على الإجراءات الأساسية للتحقق منها.

Lighthouse audit report


إذا كنت تريد معرفة المزيد عن Chrome DevTools ، تحقق من هذاقائمة تلميحات Chrome DevTools😀


المزيد من دروس devtools: