ویژگی‌های جدید DevTools،‏ Chrome 127

Sofia Emelianova
Sofia Emelianova
GitHub

برای کمک به اشکال‌زدایی آسان‌تر ویژگی موقعیت‌یابی لنگر، برگه سبک‌ها اکنون شناسه‌های لنگر صریح و لنگرهای ضمنی را به گره‌هایشان پیوند می‌دهد.

قبل و بعداز پیوند دادن لنگرهای صریح و ضمنی.

به‌علاوه، مقدار مشخصه popovertarget اکنون به عنصر popover آن در DOM پیوند می‌دهد.

قبل و بعداز پیوند دادن popovertarget به عنصر popover آن.

بهبودهای پانل «منابع»

این نسخه چندین بهبود در پانل منابع ایجاد می‌کند.

«هرگز اینجا موقتاً متوقف نشود» بهبودیافته

گزینه «هرگز اینجا موقتاً متوقف نشود» به شما امکان می‌دهد از توقف موقت مکرر اشکال‌زدا در همان خط جلوگیری کنید. این کار باعث می‌شود کار با نقاط توقف نامربوطی که مکرراً فعال می‌شوند آسان‌تر شود. این نسخه این قابلیت را بهبود می‌بخشد و اکنون برای موارد زیر کار می‌کند:

  • استثناها یا رد کردن‌های وعده از توابع داخلی.
  • «لغو» نقاط گسست DOM، واکشی/XHR، و نقض «خط‌مشی امنیتی محتوا».
  • در واهم‌گذاری Wasm.

مشاهده گردش کار در عمل:

مشکل Chromium: ‏ 40924349.

شنوندگان رویداد میزان کردن پیمایش جدید

فهرست منابع > نقاط توقف شنونده رویداد > کنترل دو شنونده مرتبط با میزان کردن پیمایش دریافت می‌کند: scrollsnapchange و scrollsnapchanging. این رویدادها زمانی فعال می‌شوند که محفظه پیمایش را به‌گونه‌ای پیمایش کنید که باعث شود به عنصر جدیدی بچسبد.

قبل و بعداز افزودن شنوندگان رویداد مرتبط با میزان کردن پیمایش.

مشکل Chromium: ‏ ۴۰۲۸۶۳۵۹.

بهبودهای پانل «شبکه»

این نسخه چندین بهبود در پانل شبکه ایجاد می‌کند.

پیش‌تنظیمات محدودسازی شبکه به‌روز شد

پانل شبکه پیش‌تنظیمات جدیدی برای محدودسازی دریافت می‌کند: نسل چهارم سریع جدید، نسل سوم سریع به نسل چهارم آهسته تغییر نام داده است، و نسل سوم آهسته به نسل سوم تغییر نام داده است. این با پیش‌تنظیم‌های Lighthouse هم‌راستاتر است.

قبل و بعداز به‌روزرسانی پیش‌تنظیمات محدود کردن شبکه.

مشکل Chromium: ‏ ۳۴۲۴۰۶۶۰۸.

اطلاعات کارگر سرویس در فیلدهای سفارشی قالب HAR

هنگام صادر کردن گزارش شبکه به قالب HAR، اکنون می‌توانید اطلاعات مربوط به کارگران خدمات، ازجمله زمان‌بندی‌ها، را به‌عنوان فیلدهای سفارشی (با پیشوند زیرخط) ببینید. برای مثال، ممکن است فیلدهای جدید زیر را در گزارش ببینید:

...
"response": {
  ...
  "_fetchedViaServiceWorker": true,
  "_responseCacheStorageCacheName": "V1",
  "_serviceWorkerResponseSource": "cache-storage"
}
...
"timings": {
  ...
  "_workerStart": -1,
  "_workerReady": -1,
  "_workerFetchStart": -1,
  "_workerRespondWithSettled": -1
}
...

مشکل Chromium: ‏ ۳۴۲۴۰۶۶۰۸.

ارسال و دریافت رویدادهای WebSocket در پانل «عملکرد»

مشابه سایر رویدادهای WebSocket، پانل عملکرد اکنون رویدادهای ارسال پیام WebSocket و دریافت پیام WebSocket را ضبط می‌کند و آن‌ها را در ردگیری عملکرد نشان می‌دهد. برای مثال:

رویداد «دریافت پیام WebSocket» در ردگیری عملکرد ضبط شد.

مشکل Chromium: ‏ ۴۰۲۸۶۱۲۹.

لحظات برگزیده متفرقه

برخی‌از اصلاحات و بهبودهای قابل‌توجه در این نسخه عبارتند از:

  • دسترس‌پذیری: اکنون صفحه‌خوان‌ها هنگام پیمایش در گزارش با کلیدهای جهت‌نمای بالا و پایین، محتوای پیام‌ها را در کنسول اعلام می‌کنند (۳۴۴۴۸۴۹۷۹).
  • منابع:
    • صفحه: گزینه منو ذخیره به‌عنوان اکنون فایل‌های ماژول Wasm را به‌جای نوشتار Base64 به‌عنوان باینری‌های معتبر wasm ذخیره می‌کند (۴۰۷۸۴۱۳۰).
    • پشته فراخوانی: پسوند (async) از شرح‌های قاب تماس غیرهمگام برداشته شد، برجسته‌سازی آن‌ها از ایتالیک به پررنگ تغییر کرد (۳۴۳۷۵۰۸۷۰).
  • حافظه: InternalNodes غیرضروری با اندازه صفر از تصویر کلی پشته خلاصه (۳۴۰۲۰۰۰۲۵) برداشته شد.
  • شبکه: اشکالی را برطرف کردیم که مانع از پیش‌نمایش محتوای پاسخ جاری‌سازی برای درخواست‌هایی می‌شد که تازه شروع شده بودند اما هنوز رویداد responseReceived را دریافت نکرده بودند (۳۳۸۳۴۰۷۵۲).
  • عملکرد:
    • آمار گزینشگر: نکته‌ابزار توضیحی برای ستون %-of-Slow-Path-Non-Matches اضافه شد (۳۲۴۲۸۲۹۵۴).
    • حالت پیکربندی قطعه: دکمه اتمام پیکربندی قطعه به پایین سمت راست منتقل شده است (۳۴۵۲۵۶۲۷۴).
  • کنسول: اشکالی که باعث می‌شد هنگام پیمایش بااستفاده از حافظه نهان ناوبری بین صفحات (۴۰۸۹۴۱۵۳) چندین پیام کنسول یکسان نشان داده شود برطرف شد.
  • تنظیمات: نمادهای راهنما در کنار همه زبانه‌ها اضافه شده است.

بارگیری کانال‌های پیش‌نمایش

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

تماس با تیم Chrome DevTools

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

تازه‌های DevTools

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