اشکالزدایی 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 یک انتخابگر رنگ در کنار آن نشان میدهد.
مشکلات کرومیوم: ۴۰۲۸۰۷۱۷ ، ۴۰۷۰۶۰۵۱ ، ۴۰۵۰۱۱۳۱ .
ممیزیهای Lighthouse برای صفحات غیر 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 است، استفاده کنید.
- بازخوردها و درخواستهای مربوط به ویژگیهای جدید را برای ما در crbug.com ارسال کنید.
- با استفاده از مشکل DevTools را گزارش دهید. گزینههای بیشتر > راهنما > گزارش مشکل DevTools در DevTools.
- توییت در @ChromeDevTools .
- نظرات خود را در مورد ویدیوهای یوتیوب «چه چیزهایی در DevTools جدید است» یا ویدیوهای یوتیوب «نکات DevTools» بنویسید.
قابلیتهای جدید در DevTools
فهرستی از تمام مواردی که در مجموعه «چه چیزهای جدیدی در DevTools» پوشش داده شده است.
- بهروزرسانیهای سرور DevTools MCP
- اشتراکگذاری ردیابی بهبود یافته
- پشتیبانی از @starting-style
- ابزارک ویرایشگر برای نمایش: masonry
- فانوس دریایی ۱۳
- پیشنهاد کد از Gemini
- بهبودهایی برای سرور DevTools MCP
- دسترسی سریعتر به کمک هوش مصنوعی
- اشکالزدایی ردیابی کامل عملکرد با Gemini
- تغییر جهت کشو
- برنامه توسعهدهندگان گوگل
- نکات برجسته متفرقه
- ابزارهای توسعه کروم (MCP) برای عامل هوش مصنوعی شما
- اشکالزدایی درخت وابستگی شبکه با Gemini
- چتهای خود را با Gemini صادر کنید
- پیکربندی مسیر ثابت در پنل عملکرد
- درخواستهای شبکه محافظتشده با IP را فیلتر کنید
- تب عناصر > طرحبندی، پشتیبانی از طرحبندی بنایی را اضافه میکند
- فانوس دریایی ۱۲.۸.۲
- نکات برجسته متفرقه
- با Gemini بینشهای بیشتری را اشکالزدایی کنید
- سربرگ «ذخیره-داده» را در «شرایط شبکه» شبیهسازی کنید
- وضعیت خط پایه را در راهنمای ابزار ویژگی CSS مشاهده کنید
- نادیده گرفتن فاکتورهای فرم در نکات کلاینت عامل کاربر
- فانوس دریایی ۱۲.۸.۰
- نکات برجسته متفرقه
- یک Chrome DevTools قابل اعتمادتر و پربازدهتر
- تصاویر را در دستیار هوش مصنوعی برای استایلدهی آپلود کنید
- هدرهای درخواست را به جدول در شبکه اضافه کنید
- نکات برجسته کنفرانس گوگل I/O 2025 را ببینید
- نکات برجسته متفرقه
- بهبود پنل عملکرد
- ریشههای از پیش متصل در بینش «درخت وابستگی شبکه»
- زمان پاسخ سرور و تغییر مسیر در بینش «تأخیر درخواست سند»
- تغییر مسیرها در خلاصه درخواستهای شبکه
- کاهش نویز در ردیابی عملکرد
- «غیرفعال کردن نمونههای جاوا اسکریپت» منسوخ شده
- پارامتر دقت موقعیت جغرافیایی در حسگرها
- بهبودهای پنل عناصر
- اشکالزدایی آسانتر مقادیر پیچیده CSS
- پشتیبانی از @function در عناصر > استایلها