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

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

اشکال زدایی CSS با Gemini

Chrome DevTools پانل کمکی آزمایشی هوش مصنوعی جدید را دریافت می کند که در آن می توانید با Gemini چت کنید و برای اشکال زدایی CSS خود راهنمایی دریافت کنید.

اکنون آن را امتحان کنید! در پنل Elements ، روی یک عنصر کلیک راست کرده و Ask AI را انتخاب کنید یا روی مورد مربوطه کلیک کنیددکمه کنار عنصر DevTools پنل جدید کمک هوش مصنوعی را باز می کند.

گزینه منوی "Ask AI" و دکمه مربوطه.

پانل جدید از شما می خواهد که تنظیمات مربوطه را روشن کنید. اطمینان حاصل کنید که الزامات را برآورده کرده اید، کلید تنظیمات را روشن کنید و به پانل کمک هوش مصنوعی برگردید. عنصری را که شما به عنوان زمینه انتخاب کرده اید می گیرد. سوال خود را در مورد عنصر تایپ کنید.

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

برای کسب اطلاعات بیشتر در مورد بهترین روش استفاده از پانل جدید، به 5 کار جالب با DevTools AI Assistance مراجعه کنید و کمک هوش مصنوعی برای استایل را بررسی کنید.

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

ویژگی های هوش مصنوعی را در یک تب تنظیمات اختصاصی کنترل کنید

اکنون می‌توانید همه ویژگی‌های هوش مصنوعی را در یک مکان مدیریت کنید: تنظیمات جدید >تب نوآوری های هوش مصنوعی ملاحظات مهم را فهرست می‌کند، ویژگی‌های هوش مصنوعی را توصیف می‌کند و به شما امکان می‌دهد آنها را به صورت جداگانه روشن و خاموش کنید.

تب جدید نوآوری های هوش مصنوعی.

برای اطلاعات بیشتر به تنظیمات > نوآوری‌های هوش مصنوعی مراجعه کنید.

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

DevTools دیگر نیازی به همگام‌سازی تنظیمات روشن برای ویژگی‌های هوش مصنوعی ندارد. بنابراین، بینش‌های کنسولی که قبلاً منتشر شده بود، همراه با کمک هوش مصنوعی برای استایل‌سازی ، با یک کلیک فاصله دارند.

اگر به Chrome وارد شده‌اید، این ویژگی‌ها را در تنظیمات > روشن کنیدنوآوری های هوش مصنوعی و شما خوب هستید.

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

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

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

پانل Performance تب جدید Annotations را در یک نوار کناری قابل ارتقا در سمت چپ دریافت می‌کند که فرآیند ایجاد یادداشت‌ها را برای کاوش ردیابی و همکاری در هنگام اشتراک‌گذاری یافته‌های عملکرد ساده می‌کند.

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

برگه حاشیه نویسی جدید در نوار کناری سمت چپ و رویداد، محدوده و اتصال مشروح.

اطلاعات بینش عملکرد را دقیقاً در پانل عملکرد دریافت کنید

اکنون می‌توانید بینش‌های عملی را در برگه Insights جدید در نوار کناری سمت چپ پانل عملکرد کشف کنید. اطلاعات آماری از گزارش Lighthouse و پانل اطلاعات آماری عملکرد که در شرف منسوخ شدن است، ادغام شده‌اند.

هدف برگه Insights ارائه تجزیه و تحلیل هدایت‌شده و ارائه بینش‌های عملی در مورد مسائل عملکردی است که ممکن است وب‌سایت شما را کند کند. برای استفاده از اطلاعات آماری، برگه را در نوار کناری سمت چپ پانل عملکرد باز کنید، دسته‌های مختلف را گسترش دهید، و روی موارد نگه داشته و کلیک کنید. پانل عملکرد رویدادهای مربوطه را در ردیابی برجسته می کند.

تیم DevTools منتظر بازخورد شما در مورد سودمندی اطلاعات بینش، راه‌های بهبود آن و تجربه شما در استفاده از آنها با ابزارهای دیگر، مانند PageSpeed ​​Insights و Lighthouse است. با خیال راحت نظرات خود را در crbug.com/371170842 بگذارید.

جابجایی های بیش از حد طرح را راحت تر ببینید

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

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

علاوه بر این، نمای متریک زنده گزارش تغییرات طرح‌بندی را با امتیازها و عناصر در کنار برگه تعاملات دریافت می‌کند.

گزارش قبل و بعد از افزودن «تغییرهای چیدمان» به نمای معیارهای زنده.

شماره Chromium: 369100729 .

انیمیشن های غیر ترکیبی را ببینید

آهنگ Animations اکنون اطلاعات مفیدی در مورد انیمیشن های غیر ترکیبی به شما نشان می دهد:

  • در صورت وجود، انیمیشن ها را با توجه به ویژگی CSS مربوطه نامگذاری می کند.
  • انیمیشن های غیر ترکیبی را با مثلث های قرمز در مسیر علامت گذاری می کند.
  • دلیل شکست ترکیب بندی را در تب Summary به شما نشان می دهد.

قبل و بعد از نام گذاری انیمیشن ها در آهنگ، علامت گذاری غیر ترکیبی و نشان دادن دلیل شکست.

برای اطلاعات بیشتر، به ویژگی‌های فقط Compositor و مدیریت تعداد لایه‌ها نگاه کنید.

شماره Chromium: 41006273 .

همزمانی سخت افزار به سنسورها منتقل می شود

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

قبل و بعد از انتقال تنظیمات «هم‌زمان سخت‌افزار» به پنل حسگرها.

شماره Chromium: 371463665 .

اسکریپت های ناشناس را نادیده بگیرید و روی کد خود در ردیابی پشته تمرکز کنید

اکنون ردیابی‌ها در کنسول به درستی شناسایی، نادیده گرفته می‌شوند، جمع می‌شوند و (در صورت بزرگ شدن) فریم‌هایی که از فایل‌های فهرست‌شده نادیده گرفته می‌شوند، خاکستری می‌شوند. قبلاً، نام تابع را در ردیابی گسترش یافته خاکستری نمی کرد.

همچنین می‌توانید تنظیمات جدید > فهرست نادیده گرفتن > اسکریپت‌های ناشناس را از eval یا کنسول تا DevTools را برای نادیده گرفتن اسکریپت‌های ناشناس بدون URL منبع تنظیم کنید.

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

علاوه بر این، وقتی روی گزارش کنسول کلیک راست کرده و Save as... را می‌زنید، نمایش متن بیشتر/کمتر ذخیره نمی‌شود.

مسائل Chromium: 40279542 ، 40945570 ، 345248263 .

عناصر > سبک‌ها: پشتیبانی از حالت‌های نوشتن sideways-* برای پوشش‌های شبکه و کلمات کلیدی در سطح CSS

تب Elements > Styles اکنون موارد زیر را پشتیبانی می کند:

  • هم‌پوشانی شبکه در نما اکنون شبکه‌هایی را برای حالت‌های نوشتن sideways-rl و sideways-lr نشان می‌دهد.
  • کلمات کلیدی در سطح CSS را حل می کند. در عمل به این معناست که مثلاً اگر inherit یک رنگ باشد، تب Styles یک انتخابگر رنگ را در کنار آن نشان می دهد. قبل و بعد از حل کلمات کلیدی در سطح CSS.

مسائل Chromium: 40280717 ، 40706051 ، 40501131 .

ممیزی Lighthouse برای صفحات غیر HTTP در حالت‌های بازه زمانی و عکس فوری

Lighthouse اکنون می‌تواند برای صفحات غیر HTTP در حالت‌های Timesp و Snapshot گزارش تولید کند.

فعال کردن ممیزی قبل و بعد برای صفحه غیر HTTP در حالت‌های بازه زمانی و عکس فوری.

دسترسی

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

  • در Sources > Editor ، اکنون می‌توان برگه‌های دارای فایل‌های باز را با تمرکز بر روی دکمه X و فشار دادن Enter یا Space بسته کرد.
  • در Performance ، اکنون می توانید یک ورودی را در ردیابی انتخاب کنید و برای باز کردن منوی زمینه، Space را فشار دهید.
  • در Performance ، برگه Insights در نوار کناری سمت چپ قابل دسترسی با صفحه‌کلید است و می‌توان آن را از طریق برگه مشاهده کرد.

شماره Chromium: 372411090 .

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

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

  • تنظیمات throttling اکنون به درستی بین پانل های عملکرد و شبکه همگام سازی شده است ( 370332090 ).
  • Application > Services Background > Speculative loads > Rules اکنون یک دکمه زیبا چاپی {} شبیه به Sources > Editor ( 40279147 ) دارد.
  • عبارات زنده : با فشار دادن Tab پس از انتخاب گزینه تکمیل خودکار، اکنون به جای تورفتگی متن، از قسمت ویرایش خارج می شود ( 349939551 ).
  • Elements > Styles : anchor() and anchor-size() از نحو جدید پشتیبانی می کند که در آن می توانید آرگومان ها را دوباره مرتب کنید و جهت anchor-size() را حذف کنید ( 343516786 ). علاوه بر این، رندر بازگشتی ثابت ( 365802559 ).
  • شبکه : پیش نمایش های GraphQL ثابت ( 369931288 ).
  • عملکرد : اکنون پیشرفت تدریجی بارگیری و پردازش آثار را گزارش می کند.
  • WebAuthn : اکنون اعتبارنامه های اصلاح شده با روش های signal* را به صورت پویا به روز می کند ( 368467199 ).
  • WebAssembly: اکنون یک هشدار در کنسول به شما اطلاع می دهد که آیا چندین نماد اشکال زدایی برای یک ماژول WebAssembly موجود است و کدام یک در حال استفاده است ( 40879198 ، 369515221 ).
  • پوشش Core Web Vitals از برگه Rendering 328487897 حذف شده است.
  • ویژگی‌های مولد هوش مصنوعی اکنون نیازی به همگام‌سازی تنظیمات کروم ندارند.
کانال های پیش نمایش را دانلود کنید

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

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

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

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

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