هذا برنامج تعليمي عملي حول بعض ميزات "أدوات مطوّري البرامج" الأكثر استخدامًا والمتعلّقة بفحص نشاط الشبكة لصفحة معيّنة.
يمكنك الاطّلاع على مرجع الشبكة إذا أردت تصفُّح الميزات بدلاً من ذلك.
يمكنك مواصلة القراءة أو مشاهدة إصدار الفيديو من هذا البرنامج التعليمي:
حالات استخدام لوحة "الشبكة"
بشكل عام، استخدِم لوحة الشبكة عندما تحتاج إلى التأكّد من تنزيل الموارد أو تحميلها على النحو المتوقّع. في ما يلي حالات الاستخدام الأكثر شيوعًا للوحة الشبكة:
- التأكّد من أنّه يتم تحميل الموارد أو تنزيلها على الإطلاق.
- فحص خصائص مورد فردي، مثل عناوين HTTP والمحتوى والحجم وما إلى ذلك.
إذا كنت تبحث عن طرق لتحسين أداء تحميل الصفحة، لا تبدأ بلوحة الشبكة. هناك العديد من أنواع مشاكل أداء التحميل التي لا ترتبط بنشاط الشبكة. ابدأ بلوحة Lighthouse لأنّها تقدّم لك اقتراحات محدّدة حول كيفية تحسين صفحتك. يمكنك الاطّلاع على مقالة تحسين سرعة الموقع الإلكتروني.
فتح لوحة "الشبكة"
لتحقيق أقصى استفادة من هذا البرنامج التعليمي، افتح العرض التوضيحي وجرِّب الميزات في الصفحة التجريبية.
افتح العرض التوضيحي "البدء".
قد تفضّل نقل العرض التوضيحي إلى نافذة منفصلة.
افتح "أدوات مطوّري البرامج" بالضغط على Control+Shift+J أو Command+Option+J (في نظام التشغيل Mac). تُفتح لوحة وحدة التحكّم.
قد تفضّل إرساء "أدوات مطوّري البرامج" في أسفل النافذة.
انقر على علامة التبويب الشبكة. تُفتح لوحة الشبكة.
في الوقت الحالي، لوحة الشبكة فارغة. يرجع ذلك إلى أنّ "أدوات مطوّري البرامج" تسجِّل نشاط الشبكة فقط أثناء فتحها، ولم يحدث أي نشاط شبكة منذ فتح "أدوات مطوّري البرامج".
تسجيل أنشطة الشبكة
للاطّلاع على نشاط الشبكة الذي تتسبّب به صفحة معيّنة:
أعِد تحميل الصفحة تسجِّل لوحة الشبكة جميع أنشطة الشبكة في سجلّ الشبكة.
يمثّل كل صف في سجلّ الشبكة موردًا. تظهر الموارد تلقائيًا بترتيب زمني. عادةً ما يكون المورد العلوي هو مستند HTML الرئيسي. أما المورد السفلي فهو آخر مورد تم طلبه.
يمثّل كل عمود معلومات عن مورد معيّن. في ما يلي الأعمدة التلقائية:
- الحالة: رمز استجابة HTTP.
- النوع: نوع المورد.
- المشغِّل: ما تسبّب في طلب مورد معيّن. يؤدّي النقر على رابط في عمود "المشغِّل" إلى الانتقال إلى رمز المصدر الذي تسبّب في الطلب.
- الحجم: مقدار المورد المنقول عبر الشبكة.
- الوقت: المدة التي استغرقها الطلب.
طالما أنّ "أدوات مطوّري البرامج" مفتوحة، ستسجِّل نشاط الشبكة في سجلّ الشبكة. لتوضيح ذلك، اطّلِع أولاً على أسفل سجلّ الشبكة ولاحِظ آخر نشاط.
الآن، انقر على الزر الحصول على البيانات في العرض التوضيحي.
اطّلِع على أسفل سجلّ الشبكة مرة أخرى. هناك مورد جديد باسم
getstarted.json. أدّى النقر على الزر الحصول على البيانات إلى طلب الصفحة لهذا الملف.
عرض المزيد من المعلومات
يمكن ضبط أعمدة سجلّ الشبكة. يمكنك إخفاء الأعمدة التي لا تستخدمها. هناك أيضًا العديد من الأعمدة المخفية تلقائيًا والتي قد تكون مفيدة لك.
انقر بزر الماوس الأيمن على رأس جدول سجلّ الشبكة واختَر النطاق. يظهر الآن نطاق كل مورد.
محاكاة اتصال أبطأ بالشبكة
من المحتمل أنّ اتصال الشبكة بالكمبيوتر الذي تستخدمه لإنشاء المواقع الإلكترونية أسرع من اتصالات الشبكة بالأجهزة الجوّالة التي يستخدمها المستخدِمون. من خلال ضبط الحدّ الأقصى المسموح لعرض نطاق الصفحة، يمكنك الحصول على فكرة أفضل عن المدة التي تستغرقها الصفحة للتحميل على جهاز جوّال.
انقر على القائمة المنسدلة ضبط الحدّ الأقصى المسموح لعرض النطاق ، والتي يتم ضبطها على بدون ضبط الحدّ الأقصى المسموح لعرض النطاق تلقائيًا.
اختَر الجيل الثالث.
اضغط مع الاستمرار على إعادة التحميل ، ثمّ اختَر إفراغ ذاكرة التخزين المؤقت وإعادة التحميل بشكل كامل.
في الزيارات المتكرّرة، يعرض المتصفّح عادةً بعض الملفات من ذاكرة التخزين المؤقت cache، ما يؤدي إلى زيادة سرعة تحميل الصفحة page load. يفرض الخيار إفراغ ذاكرة التخزين المؤقت وإعادة التحميل بشكل كامل على المتصفّح الانتقال إلى الشبكة للحصول على جميع الموارد. يكون هذا الخيار مفيدًا عندما تريد الاطّلاع على تجربة الزائر الذي يزور الصفحة لأول مرة أثناء تحميلها.
الحصول على لقطات شاشة
تحصل لقطات الشاشة على شكل صفحتك في أوقات مختلفة أثناء تحميلها، وتُبلغ عن الموارد التي يتم تحميلها في كل فترة زمنية.
للحصول على لقطات شاشة، اتّبِع الخطوات التالية:
انقر على إعدادات الشبكة .
فعِّل مربّع الاختيار لقطات الشاشة .
أعِد تحميل الصفحة مرة أخرى باستخدام سير العمل إفراغ ذاكرة التخزين المؤقت وإعادة التحميل بشكل كامل. يمكنك الاطّلاع على مقالة محاكاة اتصال أبطأ بالشبكة إذا كنت بحاجة إلى تذكير بكيفية إجراء ذلك. تقدّم علامة التبويب لقطات الشاشة صورًا مصغّرة لشكل الصفحة في نقاط مختلفة أثناء عملية التحميل.
انقر على الصورة المصغّرة الأولى. تعرض لك "أدوات مطوّري البرامج" نشاط الشبكة الذي كان يحدث في تلك اللحظة.
انقر على مربّع الاختيار لقطات الشاشة لإغلاق علامة التبويب "لقطات الشاشة".
أعِد تحميل الصفحة مرة أخرى.
فحص تفاصيل مورد معيّن
انقر على مورد معيّن لمعرفة المزيد من المعلومات عنه. جرِّب ذلك الآن:
انقر على
getstarted.html. تظهر علامة التبويب العناوين. استخدِم هذه العلامة لفحص عناوين HTTP.
انقر على علامة التبويب معاينة لعرض HTML أساسي.
تكون هذه العلامة مفيدة عندما تعرض واجهة برمجة تطبيقات رمز خطأ بتنسيق HTML ويكون من الأسهل قراءة HTML المعروض بدلاً من رمز مصدر HTML، أو عند فحص الصور.
انقر على علامة التبويب الاستجابة لعرض رمز مصدر HTML.
انقر على علامة التبويب المشغِّل لعرض شجرة تربط سلسلة مشغِّل الطلب.
انقر على علامة التبويب التوقيت لعرض تفاصيل نشاط الشبكة لهذا المورد.
انقر على إغلاق لعرض سجلّ الشبكة مرة أخرى.
البحث في عناوين الشبكة والاستجابات
استخدِم علامة التبويب بحث عندما تحتاج إلى البحث في عناوين HTTP واستجابات جميع الموارد عن سلسلة معيّنة أو تعبير عادي.
على سبيل المثال، لنفترض أنّك تريد التحقّق مما إذا كانت الموارد تستخدم سياسات تخزين مؤقت معقولة cache policies.
انقر على بحث في شريط إجراءات اللوحة أو اضغط على Command + F (في نظام التشغيل macOS) أو Control + F (في نظام التشغيل Windows أو Linux).
تُفتح علامة التبويب بحث على يمين سجلّ الشبكة.
اكتب
Cache-Controlواضغط على Enter. تعرض علامة التبويب بحث جميع مثيلاتCache-Controlالتي تعثر عليها في عناوين الموارد أو محتواها.
انقر على إحدى النتائج لعرضها. إذا تم العثور على طلب البحث في عنوان، تُفتح علامة التبويب "العناوين". إذا تم العثور على طلب البحث في المحتوى، تُفتح علامة التبويب الاستجابة.
أغلِق علامة التبويب بحث وعلامة التبويب العناوين.
فلترة الموارد
توفّر "أدوات مطوّري البرامج" العديد من عمليات سير العمل لاستبعاد الموارد غير ذات الصلة بالمهمة قيد التنفيذ.
يجب أن يكون شريط الأدوات الفلاتر مفعّلاً تلقائيًا. في حال عدم توفّر ذلك، يُرجى اتباع ما يلي:
- انقر على فلتر لعرضه.
الفلترة حسب السلسلة أو التعبير العادي أو السمة
يدعم مربّع الإدخال فلتر العديد من أنواع الفلترة المختلفة.
اكتب
pngفي مربّع الإدخال فلتر. لا تظهر إلا الملفات التي تحتوي على النصpng. في هذه الحالة، تكون صور PNG هي الملفات الوحيدة التي تتطابق مع الفلتر.
اكتب
/.*\.[cj]s+$/. تستبعد "أدوات مطوّري البرامج" أي مورد لا ينتهي اسم ملفه بـjأوcمتبوعًا بحرفsواحد أو أكثر.
اكتب
-main.css. تستبعد "أدوات مطوّري البرامج" الملفmain.css. إذا كان أي ملف آخر يتطابق مع النمط، سيتم استبعاده أيضًا.
اكتب
domain:raw.githubusercontent.comفي مربّع النص فلتر. تستبعد "أدوات مطوّري البرامج" أي مورد لا يتطابق عنوان URL الخاص به مع هذا النطاق.
يمكنك الاطّلاع على مقالة فلترة الطلبات حسب السمات للحصول على القائمة الكاملة بالسمات القابلة للفلترة.
أزِل أي نص من مربّع الإدخال فلتر.
الفلترة حسب نوع المورد
للاطّلاع على نوع معيّن من الملفات، مثل أوراق الأنماط:
انقر على CSS. يتم استبعاد جميع أنواع الملفات الأخرى.
للاطّلاع أيضًا على النصوص البرمجية، اضغط مع الاستمرار على مفتاح Control أو Command (في نظام التشغيل Mac)، ثمّ انقر على JS.
انقر على الكل لإزالة الفلاتر والاطّلاع على جميع الموارد مرة أخرى.
يمكنك الاطّلاع على مقالة فلترة الطلبات للتعرّف على عمليات سير العمل الأخرى للفلترة.
حظر الطلبات
كيف يبدو أداء الصفحة عندما لا تتوفّر بعض مواردها؟ هل تتعطّل الصفحة تمامًا أم تظل تعمل إلى حد ما؟ يمكنك حظر الطلبات لمعرفة ذلك:
اضغط على Control+Shift+P أو Command+Shift+P (في نظام التشغيل Mac) لفتح قائمة الأوامر.
اكتب
block، ثمّ اختَر عرض حظر الطلبات واضغط على Enter.
انقر على الزر إضافة نمط.
اكتب
main.css.
انقر على إضافة.
أعِد تحميل الصفحة كما هو متوقّع، تم إفساد تصميم الصفحة قليلاً لأنّه تم حظر ورقة الأنماط الرئيسية. لاحِظ صف
main.cssفي "سجلّ الشبكة". يعني النص الأحمر أنّ المورد محظور.
أزِل العلامة من مربّع الاختيار تفعيل حظر الطلبات.
للاطّلاع على المزيد من ميزات "أدوات مطوّري البرامج" المتعلّقة بفحص نشاط الشبكة، يمكنك الاطّلاع على مرجع الشبكة.