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

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

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

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

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

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

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

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

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

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

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

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

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

فضای ذخیره سازی افزونه را در Application > Storage مدیریت کنید

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

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

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

بهبود عملکرد

این نسخه تعدادی بهبود در پنل Performance به ارمغان می آورد.

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

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

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

همانطور که در برنامه افزودنی Web Vitals بیان شد، اکنون در DevTools ، انتشار این ویژگی ها پایان پشتیبانی از برنامه افزودنی Web Vitals را نشان می دهد.

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

اطلاعات مسدود کردن را در تب Summary رندر کنید

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

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

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

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

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

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

مشکل Chromium: crbug.com/40775984 .

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

این نسخه چند پیشرفت را در پانل انیمیشن ها و تب Elements > Styles به ارمغان می آورد.

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

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

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

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

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

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

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

مشکل Chromium: crbug.com/362277525 .

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

اکنون پانل Memory بین اشیاء JS با همان نام که از منابع مختلف آمده اند تمایز قائل می شود و آنها را به ترتیب گروه بندی می کند.

قبل و بعد از گروه بندی اشیاء JS با همین نام نیز بر اساس منبع.

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

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

برای تراز کردن بهتر طراحی رابط کاربری، تنظیمات DevTools اکنون نگاهی نزدیک به تنظیمات Chrome دارد. به طور خاص، بخش ها اکنون به صورت بصری به "کارت" جدا می شوند.

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

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

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

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

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

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

  • عملکرد :
    • محدودیت غیر ضروری 3 نویسه برای عبارت های جستجو حذف شد.
    • دکمه اصلی اضافه شد که شما را به صفحه معیارهای زنده برمی گرداند.
    • میانبرهای بزرگنمایی Shift + S / W که قبلا شکسته شده بودند، رفع شد.
  • عناصر > سبک ها :
    • مرکز لنگر به تکمیل خودکار 341991541 اضافه شد.
    • رفع اشکال با ویرایشگر flexbox که برای مقادیر 2 کلمه ای 341964645 در دسترس نبود.
  • شبکه : خرابی‌های واکشی اولیه اکنون به‌جای آن هشدارهای زرد یا خطاهای قرمز هستند که نشان می‌دهد نمایش محتوا تحت تأثیر قرار نمی‌گیرد 372055494 .

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

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

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

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

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

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