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

کیسی باسکی
سوفیا املیانوا
Sofia Emelianova
GitHub

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

نمای کلی

پنل Sources به شما امکان می دهد کارهای زیر را انجام دهید:

پنل Sources را باز کنید

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

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

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

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

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

تب Page.

نحوه سازماندهی برگه Page :

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

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

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

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

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

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

راهنمایی ابزار خطای نحو درونی.

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

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

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

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

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

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

Snippets را ایجاد، ذخیره و اجرا کنید

اسنیپت ها اسکریپت هایی هستند که می توانید در هر صفحه ای اجرا کنید. تصور کنید که به طور مکرر کد زیر را در کنسول تایپ می کنید تا کتابخانه 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);

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

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

برای اجرای یک Snippet :

  • فایل را در تب Snippets باز کنید و روی Run کلیک کنید دکمه Run. در نوار عمل در پایین.
  • منوی فرمان را باز کنید، کاراکتر > را حذف کنید، تایپ کنید ! ، نام Snippet خود را تایپ کنید، سپس Enter را فشار دهید.

برای اطلاعات بیشتر Run Snippets Of Code From Any Page را ببینید.

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

به جای استفاده از console.log() برای استنباط جاوااسکریپت شما اشتباه است، به جای آن از ابزارهای اشکال زدایی Chrome DevTools استفاده کنید. ایده کلی این است که یک نقطه شکست، که یک مکان توقف عمدی در کد شما است، تنظیم کنید، و سپس از طریق اجرای کد خود، یک خط در یک زمان گام بردارید.

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

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

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

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

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

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

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

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

یک Workspace راه اندازی کنید

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

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