چیزهای جدید در DevTools (Chrome 80)

کیسی باسکی

پشتیبانی از اعلان مجدد let و class در کنسول

اکنون کنسول از اعلان مجدد دستورات let و class پشتیبانی می کند. عدم توانایی در اعلام مجدد یک مزاحمت رایج برای توسعه دهندگان وب بود که از کنسول برای آزمایش کدهای جاوا اسکریپت جدید استفاده می کنند.

به عنوان مثال، قبلاً، هنگام اعلام مجدد یک متغیر محلی با let ، کنسول یک خطا ایجاد می کند:

تصویری از کنسول در کروم 78 که نشان می دهد اعلام مجدد اجازه ناموفق است.

اکنون، کنسول اجازه می دهد تا مجدداً اعلام شود:

تصویری از کنسول در کروم 80 که نشان می دهد اعلام مجدد اجازه موفقیت آمیز است.

Chromium شماره 1004193

بهبود اشکال زدایی WebAssembly

DevTools شروع به پشتیبانی از DWARF Debugging Standard کرده است، که به معنای افزایش پشتیبانی برای عبور از کد، تنظیم نقاط شکست و حل ردپای پشته در زبان های مبدأ شما در DevTools است. برای داستان کامل، اشکال زدایی بهبود یافته WebAssembly را در Chrome DevTools بررسی کنید.

تصویری از اشکال زدایی WebAssembly جدید با استفاده از DWARF.

به روز رسانی پنل شبکه

در تب Initiator Chains Initiator را درخواست کنید

اکنون می توانید آغازگرها و وابستگی های یک درخواست شبکه را به عنوان یک لیست تودرتو مشاهده کنید. این می تواند به شما کمک کند تا بفهمید که چرا یک منبع درخواست شده است یا یک منبع خاص (مانند یک اسکریپت) چه فعالیت شبکه ای را ایجاد کرده است.

اسکرین شات از یک Request Initiator Chain در تب Initiator

پس از ثبت فعالیت شبکه در پنل Network ، روی یک منبع کلیک کنید و سپس به تب Initiator بروید تا Request Initiator Chain آن را مشاهده کنید:

  • منبع بازرسی شده پررنگ است. در تصویر بالا، https://web.dev/default-627898b5.js منبع بازرسی شده است.
  • منابع بالای منبع بازرسی شده آغازگر هستند. در تصویر بالا، https://web.dev/bootstrap.js آغازگر https://web.dev/default-627898b5.js است. به عبارت دیگر، https://web.dev/bootstrap.js باعث درخواست شبکه برای https://web.dev/default-627898b5.js شد.
  • منابع زیر منبع بازرسی شده وابستگی ها هستند. در تصویر بالا، https://web.dev/chunk-f34f99f7.js یک وابستگی به https://web.dev/default-627898b5.js است. به عبارت دیگر، https://web.dev/default-627898b5.js باعث درخواست شبکه برای https://web.dev/chunk-f34f99f7.js شد.

شماره 842488 کرومیوم

درخواست شبکه انتخاب شده را در نمای کلی برجسته کنید

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

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

Chromium شماره 988253

ستون های URL و مسیر در پانل شبکه

از ستون‌های Path و URL جدید در پانل Network برای مشاهده مسیر مطلق یا URL کامل هر منبع شبکه استفاده کنید.

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

روی هدر جدول Waterfall کلیک راست کرده و مسیر یا URL را انتخاب کنید تا ستون های جدید نشان داده شوند.

Chromium شماره 993366

رشته های User-Agent به روز شده است

DevTools از تنظیم یک رشته User-Agent سفارشی از طریق زبانه Network Conditions پشتیبانی می کند. رشته User-Agent بر هدر HTTP User-Agent متصل به منابع شبکه و همچنین مقدار navigator.userAgent تأثیر می‌گذارد.

رشته های از پیش تعریف شده User-Agent به روز شده اند تا نسخه های مرورگر مدرن را منعکس کنند.

تصویری از منوی User Agent در برگه Network Conditions.

برای دسترسی به شرایط شبکه ، منوی فرمان را باز کرده و دستور Show Network Conditions را اجرا کنید.

Chromium شماره 1029031

به روز رسانی پنل حسابرسی

UI پیکربندی جدید

رابط کاربری پیکربندی طراحی جدید و پاسخگو دارد و گزینه های پیکربندی throttling ساده شده اند. برای اطلاعات بیشتر در مورد تغییرات UI throttling به کنترل پنل حسابرسی مراجعه کنید.

رابط کاربری پیکربندی جدید.

به روز رسانی برگه پوشش

حالت های پوشش هر عملکرد یا هر بلوک

برگه پوشش دارای یک منوی کشویی جدید است که به شما امکان می دهد تعیین کنید که داده های پوشش کد باید برای هر تابع یا هر بلوک جمع آوری شوند. پوشش هر بلوک جزئیات بیشتری دارد اما جمع آوری آن نیز بسیار گران تر است. DevTools اکنون به طور پیش فرض از پوشش هر تابع استفاده می کند.

منوی کشویی حالت پوشش.

اکنون پوشش باید با بارگذاری مجدد صفحه آغاز شود

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

Chromium شماره 1004203

کانال های پیش نمایش را دانلود کنید

استفاده از Chrome Canary ، Dev یا Beta را به عنوان مرورگر توسعه پیش‌فرض خود در نظر بگیرید. این کانال‌های پیش‌نمایش به شما امکان دسترسی به جدیدترین ویژگی‌های DevTools را می‌دهند، به شما اجازه می‌دهند APIهای پلتفرم وب پیشرفته را آزمایش کنید و به شما کمک می‌کنند تا قبل از کاربران، مشکلات سایت خود را پیدا کنید!

با تیم Chrome DevTools در تماس باشید

از گزینه‌های زیر برای بحث در مورد ویژگی‌های جدید، به‌روزرسانی‌ها یا هر چیز دیگری مربوط به DevTools استفاده کنید.

چیزهای جدید در DevTools

فهرستی از همه چیزهایی که در سری چیزهای جدید در DevTools پوشش داده شده است.