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

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

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

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

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

گزینه منوی «از هوش مصنوعی بپرسید» و دکمه مربوطه.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تشخیص آسان‌تر تغییرات بیش از حد طرح‌بندی

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

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

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

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

مشکل کروم: ۳۶۹۱۰۷۲۹

انیمیشن‌های غیرکامپوزیت‌شده را تشخیص دهید

اکنون بخش انیمیشن‌ها اطلاعات مفیدی در مورد انیمیشن‌های غیرکامپوزیت‌شده به شما نشان می‌دهد:

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

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

برای اطلاعات بیشتر، به «Stick to Compositor-Only Properties» و «Manage Layer Count» مراجعه کنید.

مشکل کرومیوم: ۴۱۰۰۶۲۷۳

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

تنظیمات همزمانی سخت‌افزاری از پنل Performance به مکان مناسب‌تری - پنل Sensors - منتقل شده است.

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

شماره کروم: ۳۷۱۴۶۳۶۶۵

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

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

همچنین می‌توانید جدید Settings > Ignore list > Anonymous scripts را از eval یا console فعال کنید تا DevTools اسکریپت‌های ناشناس بدون آدرس منبع را نادیده بگیرد.

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

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

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

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

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

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

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

ممیزی‌های Lighthouse برای صفحات غیر HTTP در حالت‌های timespan و snapshot

لایت‌هاوس اکنون می‌تواند گزارش‌هایی را برای صفحات غیر HTTP در حالت‌های timespan و snapshot تولید کند.

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

دسترسی‌پذیری

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

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

شماره کروم: ۳۷۲۴۱۱۰۹۰

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

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

  • تنظیمات تنظیم گلوگاه اکنون به درستی بین پنل‌های Performance و Network ( 370332090 ) همگام‌سازی شده‌اند.
  • برنامه > سرویس‌های پس‌زمینه > بارهای حدسی > قوانین اکنون یک دکمه {} pretty-print مشابه منابع > ویرایشگر ( 40279147 ) دارد.
  • عبارات زنده : فشردن کلید Tab پس از انتخاب گزینه تکمیل خودکار، اکنون به جای ایجاد تورفتگی در متن، از فیلد ویرایش خارج می‌شود ( ۳۴۹۹۳۹۵۵۱ ).
  • عناصر > سبک‌ها : anchor() و anchor-size() از سینتکس جدیدی پشتیبانی می‌کنند که در آن می‌توانید آرگومان‌ها را دوباره مرتب کنید و جهت anchor-size() را حذف کنید ( 343516786 ). علاوه بر این، رندرینگ جایگزین ( 365802559 ) اصلاح شد.
  • شبکه : پیش‌نمایش‌های GraphQL برطرف شد ( 369931288 ).
  • عملکرد : اکنون پیشرفت افزایشی ردیابی‌های بارگیری و پردازش را گزارش می‌دهد.
  • WebAuthn : اکنون به صورت پویا اعتبارنامه‌های اصلاح‌شده توسط روش‌های signal* ( 368467199 ) را به‌روزرسانی می‌کند.
  • WebAssembly: اکنون یک هشدار در کنسول به شما اطلاع می‌دهد که آیا چندین نماد اشکال‌زدایی برای یک ماژول WebAssembly موجود است و کدام یک در حال استفاده است ( 40879198 ، 369515221 ).
  • پوشش Core Web Vitals از تب رندرینگ ۳۲۸۴۸۷۸۹ حذف شده است.
  • ویژگی‌های هوش مصنوعی مولد اکنون نیازی به همگام‌سازی تنظیمات کروم ندارند.

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

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

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

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

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

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