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

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

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

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 استفاده کنید.

  • پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
  • با استفاده از گزینه های بیشتر ، مشکل DevTools را گزارش کنیدبیشتر > راهنما > گزارش مشکلات DevTools در DevTools.
  • توییت در @ChromeDevTools .
  • نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.
چیزهای جدید در DevTools

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

کروم 126 کروم 125 کروم 124 کروم 123 کروم 122 کروم 121 کروم 120 کروم 119 کروم 118 کروم 117 کروم 116 کروم 115 کروم 114 کروم 113 کروم 112 کروم 111 کروم 110 کروم 109 کروم 108 کروم 107 کروم 106 کروم 105 کروم 104 کروم 103 کروم 102 کروم 101 کروم 100 کروم 99 کروم 98 کروم 97 کروم 96 کروم 95 کروم 94 کروم 93 کروم 92 کروم 91 کروم 90 کروم 89 کروم 88 کروم 87 کروم 86 کروم 85 کروم 84 کروم 83 کروم 82

Chrome 82 لغو شد .

کروم 81 کروم 80 کروم 79 کروم 78 کروم 77 کروم 76 کروم 75 کروم 74 کروم 73 کروم 72 کروم 71 کروم 70 کروم 68 کروم 67 کروم 66 کروم 65 کروم 64 کروم 63 کروم 62 کروم 61 کروم 60 کروم 59