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