در کروم ۱۴۴، تیم توسعهدهنده یک ویژگی بسیار مورد انتظار را به سرور Chrome DevTools MCP اضافه کرد: پنل جدید شرایط درخواست و بهبودهایی برای اشکالزدایی فونتها و شیوهنامههای اتخاذ شده.
این پایان فهرست قابل توجه ویژگیهایی است که ما در طول سال ۲۰۲۵ ارائه دادیم. میخواهید ببینید آیا چیزی را از قلم انداختهاید؟ پس نکات برجسته زیر را بررسی کنید یا نسخههای قبلی ما از «چه چیزهایی در DevTools جدید است» را مرور کنید.
بهروزرسانیهای سرور DevTools MCP
ما اصلاحات مختلفی را برای سرور DevTools MCP انجام دادیم و نسخه ۰.۱۲.۱ را منتشر کردیم. این نسخه یک ویژگی جدید و کلیدی، اتصال خودکار، را معرفی میکند که به شما امکان میدهد از یک جلسه مرورگر موجود دوباره استفاده کنید . با اتصال خودکار، میتوانید خودتان اشکالزدایی را در Chrome شروع کنید و سپس DevTools MCP را به همان نمونه Chrome هدایت کنید تا از جایی که متوقف شدهاید، ادامه یابد.
برای کسب اطلاعات بیشتر در مورد اتصال خودکار برای DevTools MCP به پست وبلاگ مربوطه مراجعه کنید. برای مشاهده لیست کامل تغییرات و رفع اشکالات، به گزارش تغییرات عمومی در GitHub مراجعه کنید.
محدود کردن درخواستهای شبکه به صورت جداگانه
پنل مسدود کردن درخواست شبکه به شرایط درخواست تغییر نام داده است. در کنار مسدود کردن درخواستها، این پنل اکنون به شما امکان میدهد درخواستهای فردی را نیز محدود کنید .
پنل را از ⋮ > ابزارهای بیشتر > شرایط درخواست باز کنید. برای فعال کردن مسدود کردن درخواست، کادر انتخاب «فعال کردن مسدود کردن و محدود کردن» را علامت بزنید. برای افزودن الگوی متنی جدید، روی دکمه + کلیک کنید. برای لغو همه قوانین، روی نماد کلیک کنید.
بیاموزید که چگونه درخواستهای شبکهی جداگانه را در اسناد بهروز شده کنترل کنید.
ویرایش قوانین @font-face و @font-feature-values
@font-face و @font-feature-values اکنون در پنل Styles نمایش داده میشوند و از آنجا قابل ویرایش هستند.
شیوهنامههای پذیرفتهشده در پنل عناصر
پنل عناصر اکنون استایلشیتهای پذیرفتهشده را در زیر ریشههای سایه و ریشههای سند نشان میدهد. این امر باعث میشود کسانی که با استایلشیتهای ساختهشده کار میکنند، راحتتر بتوانند استایلشیتهایی را که بر عناصرشان تأثیر میگذارند پیدا کنند و استایلها را اشکالزدایی کنند، بهخصوص زمانی که بهطور غیرمنتظرهای اعمال نمیشوند.
چه چیزهایی در DevTools 2025 جدید بود؟
نوآوریهای هوش مصنوعی
با شروع از Console insights ، نوآوریهای هوش مصنوعی اکنون به بخش جداییناپذیری از Chrome DevTools تبدیل شدهاند و پنل دستیار هوش مصنوعی، مرکز اصلی اشکالزدایی مبتنی بر هوش مصنوعیِ آگاه از متن است. DevTools با پیشنهادهای کد در پنلهای Console و Sources و حاشیهنویسیهای خودکار از Gemini در ردیابیهای عملکرد شما، مجموعهای جامع از ابزارهای مبتنی بر هوش مصنوعی را برای سادهسازی گردش کار شما ارائه میدهد.
- اصلاحات استایلدهی سرتاسری: از Gemini بخواهید مشکلات CSS را برطرف کند و در ترکیب با Workspaces، آن تغییرات را مستقیماً در فایلهای منبع شما روی دیسک ذخیره کند.
- درباره عملکرد بپرسید: اکنون میتوانید با کمک هوش مصنوعی، یک ردیابی عملکرد کامل را مورد بحث قرار دهید، یا به طور عمیق به هرگونه بینش عملکردی بپردازید، یا از Gemini برای حاشیهنویسی یک ردیابی استفاده کنید.
- اشکالزدایی بصری: پنل دستیار هوش مصنوعی چندوجهی شد و به شما امکان میدهد تصاویر را بارگذاری کنید یا از صفحه عکس بگیرید تا به Gemini در درک و رفع اشکالات بصری کمک کند.
عملکرد
ما پنل عملکرد را دوباره طراحی کردیم تا اشکالزدایی عملکرد کمتر طاقتفرسا و عملیتر شود. به عنوان مثال، یک ردیابی ضبطشده اکنون با بینشهای برگزیده ارائه میشود که به شما کمک میکند گلوگاهها را سریعتر شناسایی کنید و ردیابیها را سریعتر پیمایش کنید. سایر پیشرفتها شامل موارد زیر است:
- بینشهای کاربردی: ما مجموعهای قوی از بینشهای عملکردی را معرفی کردیم که مشکلات خاصی مانند LCP را به صورت مرحلهای ، عوامل مؤثر در تغییر طرحبندی و تأخیر درخواست سند را شناسایی میکند.
- زمینه دنیای واقعی: ما دادههای میدانی و دادههای CrUX را مستقیماً در پنل عملکرد ادغام کردیم و به شما امکان میدهیم نتایج آزمایشگاهی را در برابر تجربیات واقعی کاربر اعتبارسنجی کنید.
- زمینه فریمورک: Angular نسخه ۲۰ و React نسخه ۱۹.۲ اکنون از API توسعهپذیری استفاده میکنند. درک گلوگاههای نخ اصلی با مشاهده مستقیم درخت کامپوننت شما آسانتر میشود. از همکاری ما با تیم Angular و React متشکریم!
- همکاری بهبود یافته: اشتراکگذاری ردپاها با قابلیت حاشیهنویسی ردپاها و گزینههایی برای خروجی گرفتن از محتوای منابع و نقشههای منبع ، آسانتر شده است و تضمین میکند که یک همکار یا خودِ آیندهتان تمام زمینه مورد نیاز خود را در اختیار داشته باشد.
پلتفرم وب
DevTools همگام با تکامل پلتفرم وب پیش میرفت و ابزارهای اختصاصی برای جدیدترین مشخصات CSS اضافه میکرد و در عین حال تجربه توسعهدهنده را برای ویژگیهای تثبیتشده بهبود میبخشید.
ما ردیابی عمیق برای زنجیرههای متغیر CSS پیچیده ، دسترسی به خط پایه برای راهنماییهای ابزار ویژگیها و اخیراً پشتیبانی اشکالزدایی برای انیمیشنهای ورودی پیچیده با استفاده از قانون @starting-style و یک ویرایشگر تصویری برای طرحبندی جدید display: masonry را اضافه کردهایم.
دانلود کانالهای پیشنمایش
استفاده از Chrome Canary ، Dev یا Beta را به عنوان مرورگر پیشفرض توسعه خود در نظر بگیرید. این کانالهای پیشنمایش به شما امکان دسترسی به جدیدترین ویژگیهای DevTools را میدهند، به شما امکان میدهند APIهای پلتفرم وب پیشرفته را آزمایش کنید و به شما کمک میکنند قبل از کاربران، مشکلات سایت خود را پیدا کنید!
با تیم Chrome DevTools تماس بگیرید
از گزینههای زیر برای بحث در مورد ویژگیهای جدید، بهروزرسانیها یا هر چیز دیگری که مربوط به DevTools است، استفاده کنید.
- بازخوردها و درخواستهای مربوط به ویژگیهای جدید را برای ما در crbug.com ارسال کنید.
- با استفاده از مشکل DevTools را گزارش دهید. گزینههای بیشتر > راهنما > گزارش مشکل DevTools در DevTools.
- توییت در @ChromeDevTools .
- نظرات خود را در مورد ویدیوهای یوتیوب «چه چیزهایی در DevTools جدید است» یا ویدیوهای یوتیوب «نکات DevTools» بنویسید.