نمای کلی پنل منابع

کیس باسک
Kayce Basques
X GitHub
صوفیا املیانووا
Sofia Emelianova
GitHub

از پنل منابع برای مشاهده و ویرایش منابع وب‌سایت خود، مانند شیوه‌نامه‌ها، فایل‌های جاوا اسکریپت و تصاویر استفاده کنید.

نمای کلی

پنل منابع به شما امکان می‌دهد موارد زیر را انجام دهید:

پنل منابع را باز کنید

برای باز کردن پنل منابع، مراحل زیر را دنبال کنید:

  1. ابزار توسعه (DevTools) را باز کنید .
  2. منوی Command را با فشار دادن موارد زیر باز کنید:
    • macOS: فرمان + شیفت + P
    • ویندوز، لینوکس، کروم او اس: کنترل + شیفت + پی
  3. شروع به تایپ sources کنید، پنل نمایش منابع را انتخاب کنید و Enter را فشار دهید.

روش دیگر این است که در گوشه بالا سمت راست، more_vert را انتخاب کنید. گزینه‌های بیشتر > ابزارهای بیشتر > منابع .

مشاهده فایل‌ها

برای مشاهده تمام منابعی که صفحه بارگذاری کرده است، روی برگه صفحه کلیک کنید.

برگه صفحه.

نحوه سازماندهی تب صفحه :

  • سطح بالا، مانند top در تصویر بالا، نشان دهنده یک فریم HTML است. شما top در هر صفحه‌ای که بازدید می‌کنید خواهید یافت. top نشان دهنده فریم اصلی سند است.
  • سطح دوم، مانند developers.google.com در تصویر بالا، نشان دهنده یک origin است.
  • سطح سوم، سطح چهارم و غیره، نشان دهنده دایرکتوری‌ها و منابعی هستند که از آن مبدا بارگذاری شده‌اند. برای مثال، در تصویر بالا، مسیر کامل منبع devsite-googler-button به developers.google.com/_static/19aa27122b/css/devsite-googler-button است.

برای مشاهده محتوای یک فایل در تب Page ، روی آن کلیک کنید. می‌توانید هر نوع فایلی را مشاهده کنید. برای تصاویر، پیش‌نمایشی از تصویر را مشاهده می‌کنید.

مشاهده یک فایل در برگه ویرایشگر.

ویرایش CSS و جاوا اسکریپت

برای ویرایش CSS و جاوا اسکریپت، روی تب Editor کلیک کنید. DevTools صفحه را برای اجرای کد جدید شما به‌روزرسانی می‌کند.

ویرایشگر همچنین به شما در اشکال‌زدایی کمک می‌کند. برای مثال، زیر خطاهای سینتکس و سایر مشکلات، مانند دستورات CSS @import و url() ناموفق و ویژگی‌های HTML href با URLهای نامعتبر، خط می‌کشد و نکات خطای درون‌خطی را نشان می‌دهد.

یک راهنمای خطای نحوی درون‌خطی.

اگر background-color یک عنصر را ویرایش کنید، خواهید دید که تغییر بلافاصله اعمال می‌شود.

ویرایش CSS در تب ویرایشگر.

برای اعمال تغییرات جاوا اسکریپت، کلیدهای Command + S (مک) یا Control + S (ویندوز، لینوکس) را فشار دهید. DevTools اسکریپت را دوباره اجرا نمی‌کند، بنابراین تنها تغییرات جاوا اسکریپتی که اعمال می‌شوند، آن‌هایی هستند که شما درون توابع ایجاد می‌کنید. برای مثال، توجه داشته باشید که console.log('A') اجرا نمی‌شود، در حالی که console.log('B') اجرا می‌شود.

ویرایش جاوا اسکریپت در تب ویرایشگر.

اگر DevTools پس از اعمال تغییر، کل اسکریپت را دوباره اجرا می‌کرد، متن A در کنسول ثبت می‌شد.

DevTools تغییرات CSS و جاوا اسکریپت شما را هنگام بارگذاری مجدد صفحه پاک می‌کند. برای یادگیری نحوه ذخیره تغییرات در سیستم فایل خود، به بخش «تنظیم فضای کاری» مراجعه کنید.

ایجاد، ذخیره و اجرای قطعه کدها

قطعه کدها اسکریپت‌هایی هستند که می‌توانید در هر صفحه‌ای اجرا کنید. تصور کنید که کد زیر را بارها و بارها در کنسول تایپ می‌کنید تا کتابخانه jQuery را در یک صفحه وارد کنید و بتوانید دستورات jQuery را از کنسول اجرا کنید:

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

در عوض، می‌توانید این کد را در یک Snippet ذخیره کنید و هر زمان که به آن نیاز داشتید، با چند کلیک آن را اجرا کنید. DevTools این Snippet را در سیستم فایل شما ذخیره می‌کند. برای مثال، Snippet ای را بررسی کنید که کتابخانه jQuery را در یک صفحه درج می‌کند.

قطعه کدی که کتابخانه jQuery را در یک صفحه درج می‌کند.

برای اجرای یک قطعه کد :

  • فایل را در تب Snippets باز کنید و روی Run کلیک کنید. دکمه‌ی اجرا. روی نوار اکشن در پایین.
  • منوی فرمان (Command Menu) را باز کنید، کاراکتر > را حذف کنید، ! را تایپ کنید، نام قطعه کد خود را تایپ کنید، سپس Enter را بزنید.

برای کسب اطلاعات بیشتر، به بخش «اجرای قطعه کد از هر صفحه» مراجعه کنید.

اشکال‌زدایی جاوا اسکریپت

Rather than using console.log() to infer where your JavaScript is going wrong, consider using the Chrome DevTools debugging tools, instead. The general idea is to set a breakpoint, which is an intentional stopping place in your code, and then step through your code's execution, one line at a time.

مکث در نقطه شکست.

همانطور که کد را قدم به قدم پیش می‌روید، می‌توانید مقادیر تمام ویژگی‌ها و متغیرهای تعریف‌شده‌ی فعلی را مشاهده و تغییر دهید، جاوا اسکریپت را در کنسول اجرا کنید و کارهای بیشتری انجام دهید.

برای یادگیری اصول اولیه اشکال‌زدایی در DevTools ، به بخش «شروع اشکال‌زدایی جاوا اسکریپت» مراجعه کنید.

فقط روی کد خود تمرکز کنید

Chrome DevTools با فیلتر کردن نویزهای ایجاد شده توسط فریم‌ورک‌ها و ابزارهایی که هنگام ساخت برنامه‌های وب از آنها استفاده می‌کنید، به شما امکان می‌دهد فقط روی کدی که می‌نویسید تمرکز کنید.

برای ارائه تجربه اشکال‌زدایی وب مدرن، DevTools موارد زیر را انجام می‌دهد:

علاوه بر این، در صورت پشتیبانی توسط چارچوب‌ها، پشته فراخوانی (Call Stack) در دیباگر و ردپاهای پشته در کنسول، تاریخچه کامل عملیات ناهمزمان را نشان می‌دهند.

برای کسب اطلاعات بیشتر، مراجعه کنید به:

یک فضای کاری راه‌اندازی کنید

به طور پیش‌فرض، وقتی فایلی را در پنل منابع ویرایش می‌کنید، آن تغییرات هنگام بارگذاری مجدد صفحه از بین می‌روند. فضاهای کاری به شما این امکان را می‌دهند که تغییراتی را که در DevTools ایجاد می‌کنید در سیستم فایل خود ذخیره کنید. اساساً، این به شما امکان می‌دهد از DevTools به عنوان ویرایشگر کد خود استفاده کنید.

برای شروع، به ویرایش فایل‌ها با فضاهای کاری مراجعه کنید.