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

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

اشکال‌زدایی درخواست‌های شبکه، فایل‌های منبع و ردیابی عملکرد با Gemini

علاوه بر استایل‌بندی CSS ، اکنون می‌توانید با Gemini در مورد درخواست‌های شبکه، فایل‌های منبع و ردیابی عملکرد چت کنید.

مشابه منوی زمینه در پنل Elements ، برای باز کردن پنل دستیار هوش مصنوعی و شروع چت با Gemini، یا کلیک راست کرده و Ask AI را انتخاب کنید یا رویدکمه «از هوش مصنوعی بپرسید» در کنار موارد زیر:

  • درخواست شبکه در پنل شبکه .
  • یک فایل در تب منابع > صفحه .
  • فعالیتی در بخش اجرا > مسیر اصلی .

دکمه‌های «از هوش مصنوعی بپرسید» و گزینه منو در «شبکه، منابع و عملکرد»

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

تیم DevTools مشتاقانه منتظر شنیدن نظرات شما در crbug.com/364805393 است.

تاریخچه چت هوش مصنوعی

اکنون می‌توانید چت‌های گذشته با Gemini را در پنل دستیار هوش مصنوعی با کلیک روی دکمه چت جدید در گوشه سمت چپ بالای پنل یا با استفاده از دکمه‌های «از هوش مصنوعی بپرس» و گزینه‌های منو در پنل شبکه ، منابع > برگه صفحه و عملکرد > مسیر اصلی ، بازیابی و مشاهده کنید.

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

تاریخچه چت هوش مصنوعی در منوی کشویی زیر دکمه «تاریخچه».

مدیریت فضای ذخیره‌سازی افزونه‌ها در برنامه > فضای ذخیره‌سازی

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

قبل و بعد از اضافه شدن بخش «فضای ذخیره‌سازی افزونه‌ها» به پنل برنامه‌ها.

مشکل کرومیوم: crbug.com/40963428

بهبود عملکرد

این نسخه بهبودهای زیادی را در پنل عملکرد (Performance) به همراه دارد.

مراحل تعامل در معیارهای زنده

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

قبل و بعد، تفکیک فازها و زمان‌بندی آنها را به تعاملات اضافه می‌کند.

همانطور که در افزونه‌ی The Web Vitals، که اکنون در DevTools قرار دارد، اعلام شده بود، انتشار این ویژگی‌ها به منزله‌ی پایان پشتیبانی از افزونه‌ی Web Vitals است.

مشکل کروم: crbug.com/369097528

اطلاعات مسدودسازی رندر را در برگه خلاصه مشاهده کنید

وقتی یک درخواست شبکه که با مثلث قرمز در مسیر Performance > Network مشخص شده است را انتخاب می‌کنید، تب Summary ، علاوه بر راهنمای ابزار (بازسازی‌شده)، اکنون به شما می‌گوید که درخواست در حال رندر-بلاکینگ است.

اطلاعات مربوط به مسدود کردن رندر قبل و بعد از اضافه کردن به تب خلاصه.

پشتیبانی از رویدادهای scheduler.postTask و فلش‌های آغازگر آنها

مسیر Performance > Main اکنون رویدادهای scheduler.postTask() و فلش‌های آغازگر زیر را بین موارد زیر نشان می‌دهد:

  • Schedule postTask -> Fire postTask
  • Schedule postTask -> Abort postTask

قبل و بعد از اضافه شدن پشتیبانی برای رویدادهای scheduler.postTask و فلش‌های آغازگر آنها.

مشکل کروم: crbug.com/40775984

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

این نسخه چندین بهبود در پنل انیمیشن‌ها و تب Elements > Styles ایجاد کرده است.

تب Elements > Styles اکنون آیکون‌های پنل Jump to Animations را در کنار مقدار ویژگی‌های animation قرار می‌دهد، بنابراین می‌توانید به راحتی انیمیشن‌ها را در آنجا بررسی کنید.

قبل و بعد از اضافه کردن یک لینک از تب Styles به پنل Animations.

به‌روزرسانی‌های بلادرنگ در تب Computed

تب Elements > Computed اکنون مقادیر محاسبه‌شده را به‌صورت بلادرنگ به‌روزرسانی می‌کند، مثلاً وقتی انیمیشن‌ها آن‌ها را به‌روزرسانی می‌کنند.

محاسبه شبیه‌سازی فشار در حسگرها

پنل حسگرها اکنون به شما امکان می‌دهد فشار Nominal ، Fair ، Serious و Critical پردازنده را شبیه‌سازی کنید.

قبل و بعد از اضافه کردن گزینه شبیه‌سازی فشار CPU به پنل سنسورها.

مشکل کروم: crbug.com/362277525

اشیاء JS با نام یکسان که بر اساس منبع در پنل حافظه گروه‌بندی شده‌اند

پنل حافظه اکنون بین اشیاء JS با نام یکسان که از منابع مختلف آمده‌اند، تمایز قائل می‌شود و آنها را به طور متناسب گروه‌بندی می‌کند.

گروه‌بندی قبل و بعد اشیاء JS با نام یکسان، همچنین بر اساس منبع.

مشکل کروم: crbug.com/357902505

ظاهر جدید برای تنظیمات

برای هماهنگی بهتر طراحی رابط کاربری، تنظیمات DevTools اکنون نگاه دقیق‌تری به تنظیمات کروم دارند. به طور خاص، بخش‌ها اکنون به صورت بصری به "کارت‌ها" تقسیم شده‌اند.

بخش‌های قبل و بعد را به صورت «کارت» از هم جدا می‌کند.

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

تمام ویژگی‌های مهم و مفید پنل Performance insights اکنون در پنل Performance ، به ویژه در معیارهای زنده ، تب نوار کناری Insights و مسیر تغییرات Layout ، جای جدیدی پیدا کرده‌اند. بنابراین، این نسخه پنل Performance insights را از DevTools منسوخ و حذف می‌کند.

تیم DevTools از بازخوردی که در مورد منسوخ شدن این پنل و تجربه کلی اشکال‌زدایی عملکرد ارائه دادید، سپاسگزار است. مثل همیشه، ما دوست داریم نظرات شما را بشنویم و در مورد دیدگاه‌هایتان اطلاعات کسب کنیم. به ما ادامه دهید!

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

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

  • عملکرد :
    • محدودیت غیرضروری ۳ کاراکتر برای جستجو حذف شد.
    • دکمه (Home) اضافه شد که شما را به صفحه معیارهای زنده برمی‌گرداند.
    • میانبرهای زوم ردیابی Shift + S / W که قبلاً خراب بودند، برطرف شدند.
  • عناصر > سبک‌ها :
    • اضافه شدن anchor-center به تکمیل خودکار ‎341991541
    • اشکالی که باعث می‌شد ویرایشگر flexbox برای مقادیر دو کلمه‌ای ۳۴۱۹۶۴۶۴۵ در دسترس نباشد، برطرف شد.
  • شبکه : خطاهای پیش‌واکشی اکنون به جای هشدارهای زرد، با خطاهای قرمز نمایش داده می‌شوند تا مشخص شود که نمایش محتوا تحت تأثیر قرار نگرفته است ۳۷۲۰۵۵۴۹۴ .

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

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

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

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

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

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