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

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

اشکال زدایی بهبود یافته شیوه نامه های گمشده

DevTools تعدادی پیشرفت دریافت می کند تا به شما کمک کند مشکلات مربوط به شیوه نامه های از دست رفته را سریعتر شناسایی و اشکال زدایی کنید:

  • درخت منابع > صفحه اکنون فقط شیوه نامه های با موفقیت مستقر و بارگذاری شده را نشان می دهد تا سردرگمی به حداقل برسد.
  • Sources > Editor اکنون نکات خطای درون خطی را در کنار عبارات @import ، url() و href زیر خط کشیده و نشان می دهد.

عبارات خط دار با نکات ابزار در پانل منابع.

  • کنسول ، علاوه بر پیوندهایی به درخواست های ناموفق، اکنون پیوندهایی را به خط دقیقی که به شیوه نامه ای که بارگیری نشده است ارجاع می دهد، ارائه می دهد.

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

  • پانل شبکه به طور مداوم ستون Initiator را با پیوندهایی به خط دقیقی که به شیوه نامه ای اشاره می کند که بارگیری نشده است، پر می کند.

  • پانل Issues همه مشکلات بارگیری شیوه نامه ها را فهرست می کند، از جمله URL های شکسته، درخواست های ناموفق، و دستورات @import که به درستی درج نشده اند.

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

مسائل Chromium: 1440626 ، 1442198 ، 1453611 .

پشتیبانی از زمان‌بندی خطی در Elements > Styles > Easing Editor

را Easing Editor. Easing Editor در Elements > Styles به شما این امکان را می‌دهد که مقادیر transition-timing-function و animation-timing-function با یک کلیک تنظیم کنید. در این نسخه، Easing Editor. Easing Editor از تابع زمان بندی خطی پشتیبانی می کند.

برای پیکربندی زمان‌بندی خطی، روی دکمه انتخابگر خطی کلیک کنید. برای افزودن یک نقطه کنترل، در هر نقطه از خط کلیک کنید. برای حذف یک نقطه کنترل، روی آن دوبار کلیک کنید. همچنین می‌توانید یکی از پیش‌تنظیم‌ها را انتخاب کنید: linear ، elastic ، bounce یا emphasized . برای مشاهده تنظیمات خطی در عمل، ویدیو را تماشا کنید.

شماره Chromium: 1421241 .

پشتیبانی از سطل های ذخیره سازی و مشاهده فراداده

بخش Application > Storage از سطل های ذخیره سازی پشتیبانی می کند. سطل‌های ذخیره‌سازی مستقل از یکدیگر هستند، بنابراین می‌توانید اولویت‌بندی تخلیه را برای تکه‌هایی از داده‌ها مشخص کنید و مطمئن شوید که ارزشمندترین داده‌ها حذف نمی‌شوند. هر سطل ذخیره سازی می تواند داده های مرتبط با API های ذخیره سازی تاسیس شده مانند IndexedDB و CacheStorage را ذخیره کند.

برای تست این ویژگی، این کمانچه را بررسی کنید. DevTools را باز کنید، به Application > Storage > Indexed DB بروید و کد را اجرا کنید. DevTools اکنون سطل ها و محتویات آنها را به شما نشان می دهد. یک سطل را برای مشاهده فراداده آن انتخاب کنید.

مشاهده ابرداده یک سطل.

نمای ابرداده یکپارچه اکنون برای بخش‌های ذخیره‌سازی محلی، جلسه و حافظه پنهان نیز در دسترس است.

نمای ابرداده یکپارچه جدید.

مسائل Chromium: 1448011 ، 1406017 .

فانوس دریایی 10.3.0

پنل Lighthouse اکنون Lighthouse 10.3.0 را اجرا می کند. مهم‌تر از همه، این نسخه چهار ممیزی جدید اضافه می‌کند که مشکلات دسترسی مختلف را با سرصفحه‌ها و زیرنویس‌های جدول، نام دکمه‌های ورودی و عدم تطابق زبان ثبت می‌کند. به عنوان مثال:

بررسی سرصفحه جدول تصویب شد.

همچنین لیست کامل تغییرات را ببینید. برای یادگیری اصول اولیه استفاده از پنل Lighthouse در DevTools، به Lighthouse: Optimize website speed مراجعه کنید.

شماره Chromium: 772558 .

دسترسی: دستورات صفحه کلید و خواندن صفحه نمایش بهبود یافته

DevTools اکنون از میانبرهای بیشتری پشتیبانی می کند و مشکلات مربوط به صفحه خوان ها را برطرف می کند:

  • اکنون می توانید منوی زمینه را با یک میانبر صفحه کلید باز کنید، به عنوان مثال، Shift + F10 در ویندوز و بسیاری از توزیع های لینوکس. برای میانبرهای MacOS، به اقدامات نشانگر جایگزین مراجعه کنید.
  • برنامه های صفحه خوان:
    • برچسب های چک باکس را بی جهت دو بار اعلام نمی کند.
    • با فشار دادن میانبر "خواندن سرصفحه ستون"، نام سرصفحه ستون ها برای ستون های قابل مرتب سازی اعلام می شود.

تیم DevTools از Yanling Wang و Elorm Coch برای ارائه این پیشرفت‌ها تشکر می‌کند.

مسائل Chromium: 1446482 ، 1414952 .

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

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

  • پانل شبکه حتی پس از تعامل با خط زمانی ( 1422552 ) به ضبط فعالیت شبکه ادامه می دهد.
  • اکنون پانل Coverage تشخیص می‌دهد که آیا فعال‌سازی پیش‌اجرا یا پیمایش حافظه پنهان عقب/ جلو وجود داشته است و از شما می‌خواهد دوباره بارگیری کنید ( 1393057 ).
  • اکنون می‌توانید با صفحه‌کلید در قسمت Sources > Breakpoints پیمایش کنید: فلش‌های بالا و پایین برای حرکت و فاصله برای انتخاب ( 1446150 ).
  • آپلود و فیلتر کردن فایل های HAR در پانل شبکه ( 1450622 ).
  • نمودار شعله در پانل Performance اکنون شکاف های کوچکی را بین ردیابی ها قرار می دهد تا آنها را بهتر ارائه کند ( 1452150 ).
  • نگاشت خودکار ثابت برای فایل های تعبیه شده در نقشه های منبع ( 1446383 ).

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

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

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

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

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

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