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

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

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

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

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

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

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

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);