يشرح لك هذا الدليل كيفية استخدام "أدوات مطوري البرامج في Chrome" لعرض موارد صفحة الويب. الموارد هي الملفات التي تحتاجها الصفحة لعرضها بشكل صحيح. تشمل أمثلة الموارد ملفات CSS وJavaScript وHTML، بالإضافة إلى الصور.
يفترض هذا الدليل أنّك على دراية بأساسيات تطوير الويب وأدوات مطوري البرامج في Chrome.
فتح الموارد
عندما تعرف اسم المورد الذي تريد فحصه، تتيح لك قائمة الأوامر طريقة سريعة لفتح المورد.
اضغط على Control+P أو Command+P (نظام التشغيل Mac). يتم فتح مربع الحوار فتح ملف.
الشكل 1. مربع الحوار فتح ملف
حدد الملف من القائمة المنسدلة، أو ابدأ في كتابة اسم الملف واضغط على Enter بمجرد تمييز الملف الصحيح في مربع الإكمال التلقائي.
الشكل 2. كتابة اسم ملف في مربع الحوار فتح ملف
فتح الموارد في لوحة "الشبكة"
يُرجى الاطِّلاع على فحص تفاصيل مورد.
الشكل 3. فحص مورد في لوحة الشبكة
عرض موارد في لوحة "الشبكة" من لوحات أخرى
يوضّح لك قسم تصفّح الموارد أدناه كيفية عرض الموارد من أجزاء مختلفة من واجهة مستخدم "أدوات مطوري البرامج". إذا أردت في أي وقت فحص مورد في لوحة الشبكة، انقر بزر الماوس الأيمن على المورد واختَر الإظهار في لوحة "الشبكة".
الشكل 4. خيار الإظهار في لوحة الشبكة
تصفح الموارد
تصفُّح الموارد في لوحة "الشبكة"
راجِع تسجيل نشاط الشبكة.
الشكل 5. موارد الصفحة في سجل الشبكة
التصفُّح حسب الدليل
لعرض موارد صفحة منظَّمة حسب الدليل:
- انقر على علامة التبويب المصادر لفتح لوحة المصادر.
انقر على علامة التبويب الصفحة لعرض موارد الصفحة. سيتم فتح لوحة الصفحة.
الشكل 6. لوحة الصفحة
في ما يلي تصنيف للعناصر غير الواضحة في الشكل 6:
- الجزء العلوي هو سياق التصفح الرئيسي للمستند.
- يمثل airhorner.com نطاقًا. تأتي جميع الموارد المتداخلة ضمن ذلك النطاق.
على سبيل المثال، قد يكون عنوان URL الكامل للملف comlink.global.js هو
https://airhorner.com/scripts/comlink.global.js. - scripts هي دليل.
- (الفهرس) هو مستند HTML الرئيسي.
- iu3 هو سياق تصفّح آخر. من المحتمل أن يكون قد تم إنشاء هذا السياق باستخدام عنصر
<iframe>مضمّن في رمز HTML الخاص بالمستند الرئيسي. - sw.js هو سياق تنفيذ مشغّل الخدمات.
انقر على مورد لعرضه في المحرِّر.
الشكل 7. عرض ملف في المحرِّر
التصفُّح حسب اسم الملف
تعمل لوحة الصفحة تلقائيًا على تجميع الموارد حسب الدليل. لإيقاف هذا التجميع وعرض موارد كل نطاق كقائمة مسطحة:
- افتح لوحة الصفحة. راجِع التصفّح حسب الدليل.
انقر على رمز المزيد من الخيارات
وأوقِف التجميع حسب المجلد.
الشكل 8. الخيار تجميع حسب المجلد
يتم تنظيم الموارد حسب نوع الملف. داخل كل نوع ملف يتم تنظيم الموارد أبجديًا.
الشكل 9. لوحة الصفحة بعد إيقاف ميزة تجميع حسب المجلد
التصفُّح حسب نوع الملف
لتجميع الموارد معًا حسب نوع الملف:
انقر على علامة التبويب التطبيق. ستفتح لوحة التطبيق. يتم فتح جزء البيان أولاً بشكل تلقائي.
الشكل 10. لوحة التطبيق
مرِّر للأسفل وصولاً إلى جزء الإطارات.
الشكل 11. لوحة الإطارات
وسِّع الأقسام التي تهمّك.
انقر على مورد لمشاهدته.
الشكل 11. عرض مورد في لوحة التطبيق
تصفّح الملفات حسب النوع في لوحة "الشبكة"
راجِع المقالة الفلترة حسب نوع المورد.
الشكل 12. تصفية CSS في سجل الشبكة