موارد جدید در DevTools، Chrome 127

صوفیا املیانووا
Sofia Emelianova
GitHub

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

انکر تکست‌های صریح و ضمنیِ قبل و بعد از لینک دادن.

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

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

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

این نسخه چندین بهبود در پنل منابع (Sources) ایجاد کرده است.

نسخه بهبود یافته «هرگز اینجا مکث نکن»

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

  • استثنائات یا رد شدن وعده‌ها از توابع داخلی.
  • نقاط شکست نقض DOM، fetch/XHR و CSP را "لغو" می‌کند.
  • در جداسازی قطعات Wasm.

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

مشکل کروم: ۴۰۹۲۴۳۴۹

شنونده‌های رویداد جدید scroll snap

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

قبل و بعد از اضافه کردن شنونده‌های رویداد مرتبط با scroll-snap.

مشکل کروم: ۴۰۲۸۶۳۵۹

بهبود پنل شبکه

این نسخه بهبودهای متعددی را در پنل شبکه به همراه دارد.

تنظیمات پیش‌فرض کنترل سرعت شبکه به‌روزرسانی شد

پنل شبکه ، تنظیمات پیش‌فرض کنترل سرعت (throttling) را به‌روزرسانی کرده است: Fast 4G جدید، Fast 3G به Slow 4G تغییر نام داده شده و Slow 3G به 3G تغییر نام داده است. این تنظیمات با تنظیمات پیش‌فرض Lighthouse هماهنگی بیشتری دارد.

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

مشکل کروم: ۳۴۲۴۰۶۶۰۸ .

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

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

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

مشکل کروم: ۳۴۲۴۰۶۶۰۸ .

ارسال و دریافت رویدادهای WebSocket در پنل Performance

مشابه سایر رویدادهای WebSocket، پنل Performance اکنون رویدادهای Send WebSocket Message و Receive WebSocket Message را ثبت کرده و آنها را در ردیابی عملکرد نشان می‌دهد. برای مثال:

رویداد «دریافت پیام وب‌ساکت» که در ردیابی عملکرد ثبت شده است.

مشکل کرومیوم: ۴۰۲۸۶۱۲۹

نکات برجسته متفرقه

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

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

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

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

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

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

قابلیت‌های جدید در DevTools

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