ویژگی‌های جدید DevTools (کروم ۱۴۸)

منتشر شده: ۵ مه ۲۰۲۶

کروم ۱۴۸ درخت دسترسی تمام صفحه را به عنوان پیش‌فرض قرار می‌دهد، جزئیات منشأ تبلیغات را در راهنماها معرفی می‌کند، اشکال‌زدایی برای قوانین حدس و گمان را بهبود می‌بخشد و نماهای تشخیصی جدیدی برای گزارش‌های خرابی اضافه می‌کند.

ابزارهای توسعه برای عامل‌ها

سرور Chrome DevTools MCP و رابط خط فرمان (CLI) به نسخه 0.25.0 به‌روزرسانی شده‌اند و چندین ویژگی جدید دارند. این نسخه همچنین شامل رفع مشکلات مربوط به قابلیت اطمینان، مانند مدیریت خودکار پنجره‌های مرورگر برای جلوگیری از وقفه‌های اسکریپت در حین اجرای ابزار است.

ویژگی‌های کلیدی اضافه شده از آخرین به‌روزرسانی عبارتند از:

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

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

درخت دسترسی کامل به طور پیش‌فرض

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

درخت دسترسی کامل رسماً از مرحله آزمایشی خود خارج می‌شود و همچنان نمای پیش‌فرض در پنل Elements باقی می‌ماند. با این انتقال، درخت دسترسی قدیمی به سبک breadcrumb از منبع حذف شده و این نمای جامع‌تر جای آن را گرفته است.

برای ساده‌سازی رابط کاربری، کروم ۱۴۸ دکمه‌ی شناوری که قبلاً برای جابجایی بین DOM و درخت‌های دسترسی استفاده می‌شد را حذف کرده است. اکنون می‌توانید با استفاده از یک دکمه‌ی اختصاصی که در تب Accessibility در نوار کناری قرار دارد، بین نماها جابجا شوید.

مشکلات کرومیوم: ۴۰۸۰۸۵۴۱

بهبود بارهای حدسی

بخش بارهای حدسی (Speculative loads) برای اشکال‌زدایی پیش‌بارگذاری (preloading) قدرتمندتر شد:

  • فیلتر کردن متن : اکنون می‌توانید فهرست قوانین و تلاش‌ها را با استفاده از فیلترهای متن آزاد یا کلیددار (مثلاً url: status: :) فیلتر کنید.
  • کدهای وضعیت HTTP : برای تلاش‌های ناموفق، کد وضعیت واقعی HTTP (مانند ۴۰۴ یا ۵۰۳) اکنون مستقیماً در جدول نمایش داده می‌شود.
  • ارسال فرم : پنل اکنون به صراحت form_submission به عنوان یک محرک برای پیش بارگذاری شناسایی و نمایش می‌دهد.

مشکلات کرومیوم: ۴۷۹۵۲۴۲۴۶ ، ۴۰۹۲۶۹۰۹

این یک همکاری جمعی بود، به لطف @hjanuschka !

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

زمینه گزارش خرابی

بخش جدید گزارش‌های خرابی (Crash reports) در نوار کناری پنل Application به شما امکان می‌دهد گزارش‌های خرابی تولید شده توسط مرورگر را بررسی کنید. DevTools اکنون برای هر گزارش، یک جدول Context با جزئیات کامل شامل ویژگی‌های کلید-مقدار مربوط به خرابی را نمایش می‌دهد و مرتبط کردن خرابی‌ها با حالت‌ها یا پیکربندی‌های خاص فریم را آسان‌تر می‌کند.

مشکلات کروم: ۴۰۰۴۳۲۱۹۵

کوئری‌های @container فقط با نام

DevTools اکنون از کوئری‌های @container که فقط نام دارند پشتیبانی می‌کند. پیش از این، کوئری‌های بدون توصیف‌گر (مانند @container sidebar ) ممکن بود به درستی در تب Styles نمایش داده نشوند. اکنون آنها به درستی رندر شده و در بخش ویژگی‌های style قابل پیوند هستند.

بخش‌های غیرمشارکتیِ جمع‌شده

برای کاهش بی‌نظمی، تب Styles اکنون به‌طور خودکار بخش‌هایی را که هیچ اعلان فعالی ندارند، جمع می‌کند. قوانینی که خالی هستند یا فقط شامل ویژگی‌های بارگذاری‌شده (که توسط قوانین دیگر لغو شده‌اند) هستند، به‌طور پیش‌فرض جمع می‌شوند، در حالی که بخش‌هایی که ویژگی‌های غیرفعال دارند، برای اشکال‌زدایی آسان‌تر، باز می‌مانند.

مشکلات کرومیوم: ۴۰۲۸۷۵۵۰ ، ۳۵۱۶۶۲۷۲۷

درخواست سفارش و تنظیم گلوگاه توصیه شده

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

پنل شبکه و شرایط شبکه، با ستون جدید درخواست شماره و تنظیم توصیه‌شده‌ی هایلایت‌شده.

مشکلات کرومیوم: ۴۰۲۷۶۴۲۲ ، ۴۵۶۳۸۳۴۰۹

منشأ تبلیغات در زینت‌بخش‌ها

DevTools اکنون شفافیت بیشتری در مورد دلیل برچسب‌گذاری عناصر به عنوان تبلیغات ارائه می‌دهد. وقتی در پنل Elements ، نشانگر ماوس را روی یک تزئین‌کننده تبلیغات نگه می‌دارید، یک راهنمای ابزار جدید، منشأ تبلیغ را نشان می‌دهد.

این راهنما توضیح می‌دهد که چرا این عنصر به عنوان یک تبلیغ شناسایی شده است، مانند:

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

این به توسعه‌دهندگان و محققان حریم خصوصی کمک می‌کند تا «چرایی» برچسب‌گذاری تبلیغات را درک کنند و در اشکال‌زدایی موارد مثبت کاذب مفید واقع شوند.

مشکلات کرومیوم: ۴۹۰۰۲۹۷۲۵ ، ۴۹۵۸۴۲۵۵۶

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

  • شبیه‌سازی : یک اشکال قدیمی که باعث می‌شد گرفتن اسکرین‌شات از تمام صفحه، گاهی اوقات نمای صفحه را در حالت «نشت» یا خراب قرار دهد، برطرف شد ( ۴۹۵۳۸۵۰۳۵ ).
  • WebAuthn : پشتیبانی برای آزمایش افزونه‌های hmac-secret و hmac-secret-mc با احراز هویت‌کننده‌های مجازی ( 420689820 ) اضافه شد.
  • حافظه : بازخورد بهبود یافته هنگام فعال‌سازی دستی جمع‌آوری زباله با اعلان جدید snackbar ( 493708151 ).
  • بازرسی اشیاء : آزمایش show-option-to-expose-internals-in-heap-snapshot حذف شد؛ اکنون کادر انتخاب به طور پیش‌فرض نمایش داده می‌شود ( ۴۹۷۸۵۵۶۵۸ ).