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

Matthias Rohmer

منتشر شده: ۲۵ آگوست ۲۰۲۶

کروم ۱۵۲ با ارسال مجدد درخواست و بررسی بار داده باینری، تزئین‌کننده‌های عناصر سفارشی و CSS تودرتوی بهبود یافته در Elements، Core Web Vitals برای پیمایش‌های نرم در Performance Live Metrics، خروجی‌گیری ساختاریافته جداول در کنسول و بهبودهایی برای سرور DevTools MCP، پیشرفت‌های قابل توجهی در اشکال‌زدایی شبکه به ارمغان می‌آورد.

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

جدیدترین نسخه v1.7.0 از سرور Chrome DevTools MCP، قابلیت‌های اشکال‌زدایی حافظه که قبلاً برای عامل‌های کدنویسی مانند Antigravity، Claude، Codex و دیگران معرفی شده بود را ایجاد می‌کند:

• جزئیات شیء اسنپ‌شات هیپ ( get_heapsnapshot_object_details ): ویژگی‌های دقیق شیء جاوا اسکریپت، نام کلاس‌ها و مسیرهای نگهدارنده ریشه GC را مستقیماً از اسنپ‌شات‌های هیپ بررسی کنید.
• فیلترینگ زمینه بومی V8: اشیاء اسنپ‌شات هیپ را بر اساس زمینه اجرایی بومی فیلتر کنید و زمینه‌های بومی را در خلاصه‌های اسنپ‌شات بررسی کنید.
• بهبود پایداری و چرخه حیات دیمن: اضافه شدن قابلیت محدود نگه‌داری درخواست شبکه به ازای هر ناوبری، اعتبارسنجی شناسه جلسه، هشدارهای عدم تطابق نسخه CLI-to-daemon و جداسازی آسان worker در هنگام حذف متن.

برای کسب اطلاعات بیشتر و شروع به کار، از مخزن DevTools for agents در GitHub دیدن کنید.

شبکه: ویرایش و ارسال مجدد درخواست‌ها، پیش‌بارگذاری بینش‌ها و رمزگشایی بار داده دودویی

• ارسال مجدد درخواست‌های fetch و XHR: گزینه منوی زمینه "Replay XHR" که قبلاً وجود داشت، اکنون Resend است. این گزینه اکنون از تمام درخواست‌های شبکه fetchable پشتیبانی می‌کند و درخواست‌های استاندارد را به فراخوانی‌های fetch() تبدیل می‌کند و در عین حال، صحت کامل replay را در کنار XHR حفظ می‌کند. درخواست‌ها همچنین زمینه اجرای خود و مبدأ کنسول را ردیابی و نمایش می‌دهند.
• ستون پیش‌بارگذاری‌شده و «کپی به عنوان عنصر پیش‌بارگذاری‌شده»: یک ستون اختصاصی جدید به نام «پیش‌بارگذاری‌شده » نمایش می‌دهد که آیا یک درخواست شبکه با استفاده از پیش‌بارگذاری احتمالی آغاز شده است یا خیر. همچنین می‌توانید روی هر درخواستی کلیک راست کرده و گزینه «کپی به عنوان عنصر پیش‌بارگذاری‌شده» را انتخاب کنید تا یک برچسب <link rel="preload"> ایجاد شود که آماده قرار دادن در HTML شما باشد. نکات اولیه اکنون در زیر ستون «آغازگر» طبقه‌بندی می‌شوند.
• نمایشگر دودویی برای بارهای درخواست: تب Payload اکنون شامل گزینه‌های روش رمزگشایی (Base64، Hex و UTF-8) برای بارهای درخواست دودویی و فشرده شده است که مشابه تب Response می‌باشد.
• ستون شماره درخواست پین شده: ستون # درخواست اکنون برای ارجاع آسان‌تر به درخواست، به اولین موقعیت در شبکه داده شبکه پین ​​شده است.
• فیلتر کردن میزبان‌های هم‌سایت: جستجوی دامنه‌ها، نام‌های میزبان یا پورت‌ها (مثلاً localhost یا example.com ) در نوار فیلتر شبکه، اکنون درخواست‌های هم‌سایت را به طور دقیق فیلتر می‌کند.
• رمزگشایی پارامترهای پیش‌فرض پرس‌وجو: پارامترهای پرس‌وجو و فرم در برگه‌ی Payload اکنون برای همه درخواست‌ها به‌طور خودکار رمزگشایی می‌شوند.

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

عناصر: تزئین‌کننده‌های سفارشی عناصر، تعاملات انتخابگر والد CSS تودرتو، و انتخاب شبه عنصر $0

بررسی و نوشتن کامپوننت‌های وب و CSS مدرن در پنل Elements سریع‌تر و شهودی‌تر است:

• نشان تزئین‌کننده عنصر سفارشی: عناصر HTML سفارشی (که با تگ‌های خط فاصله یا ویژگی‌های is="..." برای عناصر داخلی سفارشی مشخص می‌شوند) اکنون یک نشان تزئین‌کننده custom-element را در طرح کلی درخت DOM نمایش می‌دهند.
• تعاملات و ویژگی گزینشگر والد تودرتو CSS: با نگه داشتن ماوس روی گزینشگرهای والد در قوانین CSS تودرتو و قوانین تودرتوی ارثی، اکنون عناصر منطبق در صفحه برجسته می‌شوند و به فیلتر کردن تب Styles پاسخ می‌دهند. نمایش پاپ‌اوورهای راهنمای ابزار ویژگی برای قوانین @nested-declarations اضافه شده است.
• انتخاب شبه‌عنصر از طریق $0 : انتخاب شبه‌عنصرهایی مانند ::before یا ::after در درخت Elements DOM اکنون آنها را مستقیماً به متغیر کنسول $0 متصل می‌کند تا بررسی فوری جاوا اسکریپت انجام شود.
• تکمیل خودکار برای انواع text-wrap و <image> : پنجره Styles اکنون تمام مقادیر کلمات کلیدی برای text-wrap ( wrap ، nowrap ، balance ، pretty ، stable ) را پیشنهاد می‌دهد و ویژگی‌های CSS را که انواع داده <image> را می‌پذیرند، به صورت خودکار تکمیل می‌کند.
• آگاهی از اسکرول بار مدل جعبه‌ای: نمودار معیارهای مدل جعبه‌ای اکنون ابعاد جعبه محتوا را هنگامی که عناصر دارای اسکرول بار قابل مشاهده هستند، به طور دقیق محاسبه و رندر می‌کند.

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

عملکرد: معیارهای ناوبری نرم در Live Metrics و تنظیمات پیش‌فرض اسکرین‌شات سفارشی

• پشتیبانی از معیارهای زنده برای پیمایش‌های نرم: نمای معیارهای زنده اکنون به طور پیش‌فرض، با ارتقاء به web-vitals نسخه ۶.۰.۰، Core Web Vitals (مانند LCP و INP) را برای پیمایش‌های نرم سمت کلاینت در برنامه‌های تک صفحه‌ای ثبت و گزارش می‌کند.
• پیش‌تنظیمات سفارشی ضبط اسکرین‌شات: پیش‌تنظیمات قابل تنظیم اندازه فریم و تعداد فریم‌های اسکرین‌شات برای ردیابی CDP در پنل عملکرد برای سفارشی‌سازی دقت ضبط بصری در محدوده‌ی بودجه‌ی حافظه ارائه شده است.
• آشکارکننده‌ی ردیابی console.profileEnd() : فراخوانی console.profileEnd() در کد یا کنسول شما اکنون به طور خودکار ردیابی ضبط شده را در پنل Performance باز و آشکار می‌کند.
• خلاصه آهنگ‌های سفارشی API توسعه‌پذیری: خلاصه‌های ردیابی عملکرد اکنون گروه‌های آهنگ سفارشی ثبت‌شده با استفاده از API توسعه‌پذیری را پردازش و ارائه می‌دهند.

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

کنسول: جداول را به صورت Markdown یا CSV صادر کنید و از عوارض جانبی محافظت کنید

• کپی جداول کنسول به صورت Markdown یا CSV: جداول ثبت شده با استفاده از console.table() اکنون می‌توانند مستقیماً از منوی زمینه به عنوان جداول Markdown فرمت شده یا داده‌های CSV در کلیپ بورد شما کپی شوند.
• محافظت در برابر ارزیابی عوارض جانبی: ارزیابی شناور دیباگر اکنون در برابر عبارات حاوی new ، literals template tagged، عملگرهای dynamic import() و delete محافظت می‌کند و از جهش‌های تصادفی حالت در حین مکث جلوگیری می‌کند.

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

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

مجموعه‌ای از پیشرفت‌های قابل توجه در سایر زیرسیستم‌های DevTools:

• منابع : قابلیت Quick Open اکنون فایل‌های فضای کاری محلی را با افزایش امتیاز زیادی در اولویت قرار می‌دهد و باعث می‌شود فایل‌های فضای کاری در بالای منابع شبکه قرار گیرند. (شماره کروم: ۴۰۲۶۰۱۳۶ )
• حافظه : نمای خلاصه‌ی Heap Snapshot اکنون تعداد کل اشیاء را در کنار اندازه‌های سطحی تجمیع‌شده برای انواع انتخاب‌شده نمایش می‌دهد و شامل فیلترهای زمینه‌ی اجرای بومی است. (شماره کروم: 497855658 )
• کاربرد : پنل تبلیغات ، دکمه‌ی نمایش تبلیغات برجسته (Highlight ads) را مستقیماً به پنل منتقل کرد، شناسه‌های عنصر iframe تبلیغات قابل کلیک را برای نمایش فریم‌ها در سلسله مراتب اضافه کرد و یک جدول تجزیه معیارهای هر فریم را معرفی کرد. (شماره کرومیوم: 514957134 )
• کاربرد : بخش «پاک کردن داده‌های سایت» در پنل ذخیره‌سازی را به یک گروه یکپارچه و تجمیع‌شده (شماره کرومیوم: 375867286 ) بازطراحی کرد و ورودی‌های تکراری ذخیره‌سازی کش را پس از بازیابی‌های Back/Forward کش (شماره کرومیوم: 484693244 ) حل کرد.
• افزونه‌ها : متدهای ناهمگام در chrome.devtools.panels اکنون به صورت بومی، هنگام فراخوانی بدون فراخوانی مجدد، Promiseهای جاوا اسکریپت را برمی‌گردانند. (شماره کرومیوم: 496604551 )
• تنظیمات : تنظیمات پیش‌فرض کنترل شبکه و تنظیمات سفارشی کنترل را به بخش‌های جداگانه تقسیم کنید. (شماره کروم: 342409451 )
• فانوس دریایی : ماژول فانوس دریایی همراه به نسخه ۱۳.۴.۱ به‌روزرسانی شد. (شماره کرومیوم: ۴۰۵۴۳۶۵۱ )
• مشکلات : DevTools زمانی که تصویری با استفاده از loading="lazy" فاقد ابعاد width یا height صریح باشد، هشدار می‌دهد.
• حالت دستگاه : منوی سطح بزرگنمایی را با یک گزینه یکپارچه برای متناسب شدن با پنجره ساده کرده و گزینه نمایش قاب دستگاه را در صورت عدم دسترسی به گرافیک قاب غیرفعال کرده است.

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

کروم ۱۵۲ شامل بهبودهای دسترسی زیر است:

• عناصر و دسترسی‌پذیری : گزینه‌های منوی زمینه برای جابجایی یکپارچه بین درخت DOM عناصر و نمای درخت دسترسی‌پذیری، به علاوه «به داخل نما بروید» برای گره‌های دسترسی‌پذیری اضافه شده است. (مشکلات کروم: 417929842 )
• دسترسی‌پذیری : پشتیبانی از کپی کردن گره‌ها و زیرشاخه‌های درخت دسترسی‌پذیری به صورت متن ساده با استفاده از منوی زمینه اضافه شد. (شماره کرومیوم: 417929842 )
• عناصر : مشکل رنگ‌های برجسته جستجو با کنتراست پایین در پنل عناصر هنگام اجرا در حالت تاریک برطرف شد. (مشکل کرومیوم: ۴۹۱۷۱۸۸۹۸ )
• پیمایش : جدا کردن DevTools و انتقال آن به یک پنجره جداگانه یا اتصال مجدد آن به تب، دیگر تمرکز را روی دکمه منوی اصلی قرار نمی‌دهد.
• تنظیمات : متن توصیفی قابل دسترسی به دکمه‌های «نمایش بیشتر» و «نمایش کمتر» در تنظیمات هوش مصنوعی اضافه شد.