ویژگی‌های جدید DevTools (کروم ۱۵۰)

Matthias Rohmer

منتشر شده: ۳۰ ژوئن ۲۰۲۶

کروم ۱۵۰ اشکال‌زدایی حافظه بهبود یافته‌ای را برای DevTools برای عامل‌ها به ارمغان می‌آورد، پشتیبانی هوش مصنوعی را با ویجت‌های بیشتر بهبود می‌بخشد و قابلیت‌های ویرایش کامل را برای CSS @container و قوانین @function معرفی می‌کند.

ابزارهای توسعه برای عامل‌ها

در نسخه‌های اخیر تا نسخه ۱.۴.۰ ، Chrome DevTools برای agentها، قابلیت‌های خودکارسازی و اشکال‌زدایی مرورگر agentic خود را به طور قابل توجهی گسترش داده است.

ویژگی‌های کلیدی و بهبودهای صورت گرفته از آخرین نسخه عبارتند از:

• مجموعه اشکال‌زدایی حافظه ( --experimentalMemory ): اکنون عامل‌ها می‌توانند اسنپ‌شات‌های پشته V8 را مستقیماً ضبط و تجزیه و تحلیل کنند تا نشت حافظه جاوا اسکریپت را تشخیص داده و سلسله مراتب نگهداری اشیاء را تجزیه و تحلیل کنند.
• مدیریت افزونه‌های کروم ( --categoryExtensions ): عامل‌ها می‌توانند چرخه عمر افزونه‌ها (نصب، حذف نصب، بارگذاری مجدد، فهرست کردن) را مدیریت کنند و گزارش‌های کنسول سرویس‌دهنده‌های پس‌زمینه را برای تشخیص ضبط کنند.
• مهارت‌های عامل همراه: دایرکتوری skills/ اکنون مستقیماً در توزیع بسته npm منتشر شده است و به عامل‌های کلاینت MCP این امکان را می‌دهد که به طور خودکار گردش‌های کاری تخصصی مرور و اشکال‌زدایی را کشف و اجرا کنند.
• بهینه‌سازی توکن و خروجی: محدود کردن ابعاد اسکرین‌شات در منبع، مصرف توکن را کاهش می‌دهد و پشتیبانی آزمایشی از TOON (نشانه‌گذاری شیءگرای توکن) قالب‌بندی داده‌های ساختاریافته را بهینه می‌کند.
• ناوبری و زمینه بهبود یافته: list_pages اکنون شامل عناوین صفحه در کنار URLها و شناسه‌های هدف برای بهبود انتخاب زمینه چند برگه‌ای است، در حالی که گزینه‌های پیکربندی allowedUrlPattern و blockedUrlPattern امنیت دقیق دامنه مرور را اعمال می‌کنند.

برای جدیدترین به‌روزرسانی‌ها در مورد DevTools برای نمایندگان و برای مشارکت، از مخزن GitHub دیدن کنید.

بینش عمیق‌تر در کمک‌های هوش مصنوعی

پنل دستیار هوش مصنوعی همچنان در حال تکامل است و جزئیات بیشتری را در راهنمای گام به گام Agent ارائه می‌دهد. اکنون نه ویجت اضافی، داده‌هایی از پنل‌های Lighthouse، Network، Sources و Performance را ارائه می‌دهند. این ویجت‌ها به شما کمک می‌کنند تا داده‌های مورد استفاده Gemini را هنگام فراخوانی ابزارهای Agent برای بازیابی رویدادهای عملکرد، محتوای منابع، درخواست‌های شبکه و موارد دیگر، بهتر درک کنید.

مشکلات کروم: ۴۶۰۷۶۳۹۹۵

پشتیبانی کامل از ویرایش برای قوانین بیشتر CSS

تب Styles در پنل Elements قابلیت‌های جدیدی برای نوشتن ویژگی‌های مدرن CSS ارائه می‌دهد:

• ویرایش درون‌برنامه‌ای قاعده @container : اکنون می‌توانید نام کانتینرها و شرایط کوئری را مستقیماً در قواعد CSS @container ویرایش کنید و امکان آزمایش یکپارچه با طرح‌های کوئری واکنش‌گرای کانتینر را فراهم کنید.
• ویرایش قانون @function در CSS: پشتیبانی کامل از ویرایش برای قوانین @function سفارشی CSS اضافه شد.
• ویرایش قانون @counter-style : تکمیل کد برای ویژگی‌های list-style-type اضافه شد و آنها را مستقیماً به تعاریف @counter-style مربوطه‌شان پیوند داد.
• جمع کردن قوانین غیرمشارکتی: یک تنظیم ترجیحی جدید به شما امکان می‌دهد قوانین سبک CSS غیرمشارکتی را جمع کنید و پنجره سبک‌ها را صرفاً روی سبک‌های فعال متمرکز نگه دارید.

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

نقاط شکست حذف‌شده و پشتیبانی از نگاشت منبع بازگشتی در Sources

پنل منابع (Sources) دقت اشکال‌زدایی بهبود یافته‌ای را در میان خطوط ساخت (build pipelines) مدرن و پیچیده ارائه می‌دهد:

• رفع تکرار نقاط شکست منطقی: نشانگرهای نقاط شکست در حاشیه اکنون با استفاده از نگاشت نزدیکترین مکان حل شده، در بسته‌های تقسیم کد و قالب‌های کامپایل شده SSR/client از تکرار خارج می‌شوند. این امر از تکرار نشانگرهای نقاط شکست هنگام اشکال‌زدایی کد مشترک در چندین بخش یا محیط جلوگیری می‌کند.
• نقشه‌های منبع بازگشتی EvalOrigin و تودرتو: این دیباگر اکنون از ساختارهای بازگشتی EvalOrigin و زنجیره‌های ترجمه تودرتو در سراسر نقشه‌های منبع پشتیبانی می‌کند و ردیابی دقیق پشته و رفتار مرحله‌ای را در گردش‌های کاری کامپایل چند مرحله‌ای تضمین می‌کند.
• میانبر صفحه‌کلید «برو به خط»: برای جلوگیری از تداخل با میانبر جدید Gemini در کروم، ALT + G به عنوان یک میانبر صفحه‌کلید اضافی برای پیمایش «برو به خط» در ویرایشگر اضافه شده است.
• قالب‌بندی ویژگی‌های وارد کردن: تجزیه‌کننده‌ی اصلی Acorn به‌روزرسانی شد تا از قالب‌بندی pretty-print برای سینتکس ویژگی‌های وارد کردن استاندارد جاوا اسکریپت پشتیبانی کند.

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

امنیت و مقاوم‌سازی بین مبدایی در سراسر DevTools

مانند بسیاری از محصولات نرم‌افزاری دیگر، اخیراً شاهد افزایش گزارش‌های امنیتی بودیم که بسیاری از آنها با کمک هوش مصنوعی پیدا شدند. تیم توسعه‌دهنده دائماً در حال بررسی و رفع این مشکلات است تا DevTools را ایمن نگه دارد:

• محافظت در برابر حملات خود-XSS برای Live Expressions: هنگام ایجاد Live Expressions در کنسول، پنجره‌های هشدار و مکانیسم‌های محافظتی در برابر حملات خود-XSS اضافه شده است.
• فهرست‌های مجاز ناوبری ضبط‌کننده و تأیید بازپخش: پنل ضبط‌کننده اکنون فهرست‌های مجاز ناوبری دقیقی را اعمال می‌کند تا از پیمایش به صفحات با امتیاز بالا جلوگیری شود، در کنار آن، تأیید دقیق مبدأ افزونه در بخش‌های بازپخش نیز اعمال می‌شود.
• محدودیت‌های لغو شبکه افزونه: لغوهای شبکه‌ای که توسط افزونه‌ها مدیریت می‌شوند، اکنون سیاست‌های میزبان runtime_blocked_hosts را به شدت اعمال می‌کنند.
• ساختار ایمن @font-face : تولید قانون @font-face با استفاده از API CSSStyleSheet و رشته‌بندی ایمن URL برای جلوگیری از تزریق CSS از طریق URLهای داده، بازسازی شده است.

سایر نکات برجسته

مجموعه‌ای از بهبودهای کوچک‌تر و رفع اشکالات در این نسخه:

• عملکرد : مشکل تورم اندازه انتقال TraceTree برای درخواست‌های شبکه ذخیره‌شده با اعمال محدودیت اندازه انتقال به ۰ بایت در موارد شناسایی‌شده در حافظه پنهان، برطرف شد.
• عملکرد : قالب‌بندی‌های عملکرد به‌روزرسانی شده‌اند تا از داده‌های فیلد deviceScope به Chrome UX Report (CrUX) که اختیاری است، پشتیبانی کنند.
• عملکرد : پیمایش افقی در جداول درخت فراخوانی فعال شد تا از حذف و حذف حروف در URL های طولانی فایل جلوگیری شود.
• عملکرد : مشکل رندر مجدد ناقص و خرابی وضعیت DOM در نوار کناری Insights در چندین فایل ردیابی برطرف شد.
• عملکرد : تنظیمات ردیابی نامعتبرسازی جدول زمانی و حالت اشکال‌زدایی از پرچم‌های آزمایشی به تنظیمات استاندارد DevTools منتقل شد.
• شبکه : تغییر نام نادرست ستون برای بازیابی ستون Has overrides و اصلاح منطق مرتب‌سازی برای overrideهای سربرگ و محتوا، برگردانده شد.
• شبکه : مشکل استایل‌دهی attr() در CSS در نوارهای آبشاری Server-Timing برطرف شد، بنابراین رنگ‌های تولید شده برای هر ردیف به درستی رندر می‌شوند.
• شبکه : مشکل کپی به عنوان تولید دستور cURL برای کوکی‌های بی‌نام برطرف شد.
• برنامه : موارد ذخیره‌سازی محلی و جلسه‌ای در پنل برنامه با استفاده از زیرساخت جدید StorageAgent متصل شده‌اند.
• کاربرد : مشکل بارگذاری اولویت وضعیت توسط Speculative برطرف شد، به طوری که URLهایی که هم در پیش‌واکشی و هم در پیش‌رندر موفق می‌شوند، دقیقاً به صورت «پیش‌رندر شده» نمایش داده می‌شوند.
• کاربرد : نمایش نکات راهنمای مقدار دقیق بایت در ستون‌های مختلف در نماهای Heap Snapshot.
• مشکلات : هر زمان که ناوبری برگشت، ورودی‌های تبلیغات را رد می‌کرد، با مشکل نوع BackUINavigationWouldSkipAd مواجه می‌شدیم.
• مشکلات : پشتیبانی برای نمایش مشکلات درخواست تأیید ایمیل ( EmailVerificationRequestIssue ) اضافه شد.
• فانوس دریایی : یک کادر انتخاب دسته‌بندی مرور Agentic (که به طور پیش‌فرض غیرفعال است) در پنل پیکربندی فانوس دریایی اضافه شد و موتور فانوس دریایی همراه آن به نسخه ۱۳.۳.۰ به‌روزرسانی شد.

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

بهبودهای دسترسی

کروم ۱۵۰ چندین بهبود در اعلان‌های صفحه‌خوان، ساختارهای ویجت و معناشناسی ARIA در سراسر DevTools به ارمغان می‌آورد:

• اعلان‌های صفحه‌خوان هنگام انتخاب تب‌ها و پیمایش بخش‌ها در تب استایلز بهبود یافته است.
• نکات راهنمای توصیفی روی آیکون‌های بستن پنجره اضافه شد و جزئیات ARIA و ویژگی‌های توصیفی روی نکات راهنما مجاز شدند.
• برای بهبود ناوبری در فناوری‌های کمکی، نقش‌های سختگیرانه‌ی ARIA برای آیتم‌های menuitem زمینه اعمال شد.

مشکلات کرومیوم: ۵۱۰۰۱۳۷۸۸