این راهنما به شما می آموزد که چگونه از ابزار توسعه کروم برای مشاهده منابع یک صفحه وب استفاده کنید. منابع فایل هایی هستند که یک صفحه برای نمایش صحیح به آنها نیاز دارد. نمونه هایی از منابع شامل فایل های CSS، جاوا اسکریپت و HTML و همچنین تصاویر می باشد.
این راهنما فرض می کند که شما با اصول توسعه وب و ابزارهای توسعه دهنده کروم آشنا هستید.
باز کردن منابع
وقتی نام منبعی را که می‌خواهید بررسی کنید، می‌دانید، منوی فرمان راهی سریع برای باز کردن منبع ارائه می‌کند.
Control + P یا Command + P (Mac) را فشار دهید. کادر گفتگوی Open File باز می شود.
شکل 1 . گفتگوی Open File
فایل را از منوی کشویی انتخاب کنید، یا شروع به تایپ نام فایل کنید و پس از برجسته شدن فایل صحیح در کادر تکمیل خودکار ، Enter را فشار دهید.
شکل 2 . تایپ نام فایل در گفتگوی Open File
منابع را در پنل Network باز کنید
به بررسی جزئیات یک منبع مراجعه کنید.
شکل 3 . بررسی یک منبع در پنل شبکه
منابع موجود در پنل شبکه را از پنل های دیگر آشکار کنید
بخش مرور منابع در زیر به شما نشان می دهد که چگونه منابع را از قسمت های مختلف DevTools UI مشاهده کنید. اگر می‌خواهید منبعی را در پانل شبکه بررسی کنید، روی منبع کلیک راست کرده و Reveal in Network panel را انتخاب کنید.
شکل 4 . گزینه Reveal in Network panel
منابع را مرور کنید
منابع را در پنل شبکه مرور کنید
به گزارش فعالیت شبکه مراجعه کنید.
شکل 5 . منابع صفحه در گزارش شبکه
بر اساس دایرکتوری مرور کنید
برای مشاهده منابع یک صفحه سازماندهی شده بر اساس فهرست:
- روی تب Sources کلیک کنید تا پنل Sources باز شود.
برای نمایش منابع صفحه، روی تب Page کلیک کنید. صفحه Page باز می شود.
شکل 6 . صفحه صفحه
در اینجا به تفکیک موارد غیر آشکار در شکل 6 آمده است:
- بالا زمینه اصلی مرور اسناد است.
- airhorner.com نشان دهنده یک دامنه است. تمام منابع تو در تو در زیر آن از آن دامنه می آیند. برای مثال، URL کامل فایل comlink.global.js احتمالاً
https://airhorner.com/scripts/comlink.global.jsاست. - اسکریپت یک دایرکتوری است.
- (شاخص) سند اصلی HTML است.
- iu3 یکی دیگر از زمینه های مرور است. این زمینه احتمالاً توسط یک عنصر
<iframe>تعبیه شده در HTML سند اصلی ایجاد شده است. - sw.js یک زمینه اجرای Service Worker است.
برای مشاهده یک منبع در ویرایشگر کلیک کنید.
شکل 7 . مشاهده فایل در ویرایشگر
جستجو بر اساس نام فایل
به طور پیش فرض، صفحه صفحه منابع را بر اساس دایرکتوری گروه بندی می کند. برای غیرفعال کردن این گروه بندی و مشاهده منابع هر دامنه به عنوان یک لیست مسطح:
- صفحه Page را باز کنید. به مرور بر اساس فهرست مراجعه کنید.
روی گزینه های بیشتر کلیک کنید
و Group By Folder را غیرفعال کنید. 
شکل 8 . گزینه Group By Folder
منابع بر اساس نوع فایل سازماندهی می شوند. در هر نوع فایل، منابع بر اساس حروف الفبا سازماندهی می شوند.
شکل 9 . صفحه Page پس از غیرفعال کردن Group By Folder
بر اساس نوع فایل مرور کنید
برای گروه بندی منابع بر اساس نوع فایل آنها:
روی تب Application کلیک کنید. پنل Application باز می شود. به طور پیش فرض، پنجره Manifest معمولاً ابتدا باز می شود.
شکل 10 . پنل برنامه
به سمت پایین به قسمت Frames بروید.
شکل 11 . پنجره Frames
بخش هایی را که به آنها علاقه دارید گسترش دهید.
برای مشاهده یک منبع کلیک کنید.
شکل 11 . مشاهده یک منبع در پنل برنامه
فایل ها را بر اساس نوع در پنل شبکه مرور کنید
به فیلتر بر اساس نوع منبع مراجعه کنید.
شکل 12 . فیلتر کردن CSS در گزارش شبکه