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

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

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

نوار فیلتر دوباره طراحی شده است تا بتوانید درخواست‌ها را آسان‌تر فیلتر کنید و پانل شبکه را شلوغ کنید.

آزمایش مربوطه به‌طور پیش‌فرض در این نسخه روشن بود، اما برگردانده می‌شود. می توانید پیشرفت را در crbug.com/1523150 دنبال کنید.

نوار فیلتر جدید دارای دو منوی کشویی است: یکی برای انتخاب انواع درخواست و دیگری برای پنهان کردن داده ها و URL های برنامه افزودنی یا فقط نمایش کوکی ها و درخواست های مسدود شده و درخواست های شخص ثالث. هر دو منو از چند انتخاب پشتیبانی می کنند.

برای بازگرداندن فوری نوار فیلتر قدیمی، > آزمایش‌ها > طراحی مجدد نوار فیلتر را در پانل شبکه خاموش کنید.

قبل و بعد از ساده کردن نوار فیلتر در پنل شبکه.

می توانید نظرات خود را در مورد این ویژگی در crbug.com/1500573 بنویسید.

شماره Chromium: 1486431 .

بهبود عناصر

پشتیبانی @font-palette-values

اکنون پنل Elements از @font-palette-values ​​CSS at-rule پشتیبانی می کند. این به شما امکان می دهد مقادیر پیش فرض ویژگی font-palette را سفارشی کنید.

در Styles ، روی مقدار ویژگی font-palette کلیک کنید و DevTools شما را به بخش اختصاصی @font-palette-values ​​می برد که در آنجا می توانید مقادیر سفارشی خود را ویرایش کنید.

بخش @font-palette-values ​​در Styles.

شماره کرومیوم: 1501781 .

مورد پشتیبانی شده: ویژگی سفارشی به عنوان یک ویژگی دیگر سفارشی

Elements > Styles اکنون یک ویژگی سفارشی را حل می کند که نسخه ای از ویژگی سفارشی دیگر است.

قبل و بعد از حل یک ویژگی سفارشی به عنوان یک نسخه جایگزین از یک ویژگی سفارشی دیگر.

شماره Chromium: 1499265 .

پشتیبانی از نقشه منبع بهبود یافته

> آزمایش‌ها > حل نام متغیرها در عبارات با استفاده از نقشه‌های منبع به‌طور پیش‌فرض روشن شده است.

DevTools از نقشه های منبع استفاده می کند تا به شما امکان می دهد کد اصلی خود را در Sources و Scope حتی پس از ترکیب، کوچک سازی یا کامپایل کردن، اشکال زدایی کنید. این آزمایش به شما امکان می‌دهد نام متغیرهای اصلی خود را به‌طور مداوم در سراسر DevTools ارزیابی کنید، از جمله اما نه محدود به:

برای جزئیات بیشتر، RFC مربوطه را ببینید.

شماره Chromium: 1444349 .

بهبود پانل عملکرد

مسیر تعاملات پیشرفته

مسیر Performance > Interactions سبیلی دریافت می کند که نشان دهنده تاخیر ورودی و ارائه در مرزهای زمانی پردازش است.

قبل و بعد از افزودن سبیل به مسیر تعامل.

علاوه بر این، وقتی ماوس را روی یک تعامل نگه می‌دارید، می‌توانید یک راهنمای ابزار مفید را ببینید که زمان‌بندی را با جزئیات نشان می‌دهد.

شماره Chromium: 1495751 .

فیلتر کردن پیشرفته در برگه های Bottom-Up، Call Tree و Event Log

برگه های Bottom-Up ، Call Tree و Event Log در پنل Performance دارای سه دکمه جدید برای فیلتر کردن پیشرفته هستند:

  • مورد کبریت .
  • عبارت منظم .
  • مطابقت کل کلمه .

سه دکمه جدید برای فیلترینگ پیشرفته

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

شماره Chromium: 1496355 .

نشانگرهای تورفتگی در پانل منابع

ویرایشگر در پانل منابع اکنون بلوک های کد تورفتگی را با خطوط عمودی برای راحتی شما علامت گذاری می کند.

قبل و بعد از علامت گذاری بلوک های کد فرورفته با خطوط عمودی.

شماره Chromium: 1479986 .

نکات ابزار مفید برای سرصفحه ها و محتوای لغو شده در پانل شبکه

وقتی روی نماد نقطه بنفش کنار برگه‌های سرصفحه و پاسخ یک درخواست قرار می‌گیرید، اکنون پنل شبکه نکات ابزار را نشان می‌دهد. نکات ابزار به شما می گوید که چه چیزی توسط DevTools لغو شده است.

نکات ابزار جدید در کنار نماد نقطه بنفش در برگه‌های Headers و Response.

شماره Chromium: 1469776 .

گزینه های منوی فرمان جدید برای افزودن و حذف الگوهای مسدود کردن درخواست

اکنون می توانید دستوراتی را برای افزودن یا حذف الگوهای مسدود کردن درخواست شبکه در منوی فرمان تایپ کنید.

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

دستور Add شما را به گفتگو می برد تا الگو را مشخص کنید و دستور Remove همه الگوها را بدون باز کردن پانل مسدود کردن درخواست شبکه حذف می کند.

آزمایش نقض CSP حذف شده است

برگه آزمایشی نقض CSP معرفی شده در نسخه 89 به عنوان اضافی حذف شده است.

برای مشاهده جزئیات CSP در یک نگاه، به Application > Frames > Content Security Policy (CSP) بروید.

سیاست امنیتی محتوا در پنل برنامه.

علاوه بر این، پانل Issues موارد نقض CSP را گزارش می کند.

سیاست امنیتی محتوا در پنل برنامه.

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

پنل Lighthouse اکنون Lighthouse 11.3.0 را اجرا می کند. لیست کامل تغییرات را ببینید. از جمله تغییرات قابل توجه می توان به امکان اجرای گزارشات در 404 صفحه اشاره کرد.

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

شماره Chromium: 772558 .

قابلیت دسترسی

این نسخه دارای بهبودهای دسترسی زیر است:

  • در Network > Payload ، اکنون می‌توانید منبع مشاهده را به صورت زبانه متمرکز کنید و دکمه‌های رمزگذاری شده با URL را مشاهده کنید و Enter یا Space را فشار دهید تا عملکرد مربوطه را فعال کنید.
  • در کنسول ، برای کاهش سردرگمی، پیوندهایی که منجر به اسکریپت هایی می شوند که دیگر برای Debugger در دسترس نیستند، اکنون خاکستری شده اند و نمی توان روی آنها کلیک کرد.
  • در درخت‌های ناوبری، مانند درخت در Sources > Page ، اکنون کلید Enter گسترش می‌یابد و گره‌ها را با کودکان جمع می‌کند.

مسائل Chromium: 1338391 ، 1500662 ، 1420362 .

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

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

  • عملکرد . اگر ضبط با شکست مواجه شد، اکنون این گزینه را دارید که رویدادهای ردیابی خام را دانلود کنید و سعی کنید بفهمید چه چیزی اشتباه بوده است ( commit ).
  • میانبر نمایش کنسول ( Ctrl + ` برای مک، Ctrl + + برای ویندوز و لینوکس) اکنون نه تنها کنسول را باز می کند، بلکه با فشار دادن بار دوم بسته می شود.
  • منابع توسعه دهنده رفع اشکالی که از گزارش منابع CSS و مشکلات آنها جلوگیری می کرد ( 1420362 ).
  • عناصر :
    • رفع اشکال با عناصر بازرسی در iframes ( 1453375 ).
    • محاسبه شده است . رفع اشکالی که از رندر کردن مقادیر پیش‌فرض جلوگیری می‌کرد ( 1499882 ).
    • جستجو کنید . رفع اشکالی که از محاسبه تعداد موارد منطبق برای جستارهای کوتاه یک یا دو نویسه ( 1416457 ) جلوگیری می کرد.
  • کنسول . اکنون عبارات منظمی را که با یک کاراکتر فرار در کادر فیلتر ( 1346936 ) به پایان می رسد، به درستی تجزیه می کند.
  • تنظیمات > فضای کاری . رفع اشکالی که از افزودن یک پوشه حذف شده جلوگیری می کرد ( 1503580 ).
  • شبکه > پیش نمایش . اکنون تصاویر را با data: URIs ( 1381791 ).
  • حافظه . دکمه‌های ذخیره و مناسب را به نوار اقدام اضافه کرد ( 1275407 ).

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

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

تماس با تیم Chrome DevTools

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

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

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