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

منتشر شده: ۱۱ فوریه ۲۰۲۶

مشابه کروم ۱۳٩، برای کروم ۱۴٥ نیز تیم توسعه‌دهندگان کروم، برتری محصول، رسیدگی به مشکلات شناخته‌شده، یکپارچه‌سازی پیاده‌سازی‌های رابط کاربری و بهبود سلامت تست را در اولویت قرار داده است. اصلاحات و اصلاحات ظریف بی‌شماری که در پنل‌های مختلف از طریق این تلاش حاصل شده است، باید گردش‌های کاری روزانه اشکال‌زدایی و توسعه شما را روان‌تر، قابل اعتمادتر و پربارتر کند.

به‌روزرسانی‌های سرور DevTools MCP

سرور DevTools MCP به‌روزرسانی‌های قابل توجهی از نسخه ۰.۱۱.۰ به نسخه ۰.۱۴.۰ دریافت کرده است که قابلیت‌های کلیدی اتوماسیون و شبیه‌سازی را معرفی می‌کند.

  • اتصال خودکار: پرچم جدید --auto-connect به سرور اجازه می‌دهد تا به‌طور خودکار یک نمونه کروم در حال اجرا را کشف و به آن متصل شود و نیاز به کپی دستی URLهای WebSocket را از بین ببرد.
  • شبیه‌سازی یکپارچه: اکنون یک ابزار emulate واحد، موقعیت جغرافیایی، شرایط شبکه (آفلاین/3G کند)، تنظیم سرعت پردازنده و لغو تنظیمات عامل کاربر را مدیریت می‌کند.
  • گزارش‌های ذخیره‌شده: اکنون می‌توانید به درخواست‌های شبکه و پیام‌های کنسول در سراسر ناوبری‌ها دسترسی داشته باشید، که عملکرد «گزارش ذخیره‌شده» را در DevTools منعکس می‌کند.

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

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

اگر وب‌سایت شما از معماری برنامه تک صفحه‌ای (SPA) استفاده می‌کند، ناوبری نرم و نشانگرهای LCP نرم اکنون در نمای ردیابی پنل عملکرد قابل مشاهده هستند. این امر اشکال‌زدایی از عملکرد را در برنامه‌های وب مدرن که در آن‌ها ناوبری بدون بارگذاری مجدد کامل صفحه انجام می‌شود، به طور قابل توجهی آسان‌تر می‌کند.

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

یک نشانگر ناوبری نرم در پنل Performance با ردی از youtube.com.

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

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

پس از ثبت یک مسیر در پنل Performance ، پنل Sources زمان‌بندی‌های مشاهده‌شده در مسیر را به ازای هر خط نمایش می‌دهد. این به شما امکان می‌دهد دقیقاً مشخص کنید کدام خطوط کد بیشترین زمان اجرا را مصرف می‌کنند.

این ویژگی قبلاً دارای اشکالاتی بود که هنگام قالب‌بندی زیبا (با استفاده از دکمه {} ) یا هنگام استفاده از اسکریپت‌های نگاشت‌شده به منبع، آن را غیرقابل اعتماد می‌کرد. این مشکلات برطرف شده‌اند و پروفایلینگ سطح خط را دقیق و قابل استفاده برای کد کوچک‌شده و آماده برای تولید می‌کنند.

زمان‌بندی اجرا در کنار شماره خطوط در پنل منابع.

تعامل ردیابی سریع‌تر

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

مشکل کرومیوم: ۴۵۷۸۶۶۷۹۵

شناسایی منابع مسدودکننده رندر

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

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

مشکل کرومیوم: ۴۱۱۶۹۱۵۴

محدود کردن درخواست‌های شبکه به صورت جداگانه

پنل شرایط درخواست (که قبلاً مسدود کردن درخواست شبکه نام داشت) که در کروم ۱۴۴ معرفی شد، اکنون به طور پیش‌فرض قابلیت محدود کردن درخواست‌های تکی را دارد.

اگرچه این ویژگی در مرحله‌ی قبل معرفی شده بود، اما به دلیل یک پسرفت دیرهنگام غیرفعال شد. در کروم ۱۴۵، اکنون می‌توانید درخواست‌های خاص شبکه را به طور قابل اعتمادی کنترل کنید تا وابستگی‌های کند را شبیه‌سازی کنید یا نحوه‌ی مدیریت تأخیرهای منابع خاص توسط برنامه‌ی خود را آزمایش کنید.

برای شروع محدود کردن یا مسدود کردن الگوهای خاص، پنل را از > ابزارهای بیشتر > درخواست شرایط باز کنید.

بهبودهای اشکال‌زدایی برای @starting-style

پشتیبانی از اشکال‌زدایی قانون @starting-style در CSS اکنون به طور پیش‌فرض فعال شده است. این ویژگی به شما کمک می‌کند تا سبک‌های اعمال شده هنگام اولین رندر یک عنصر را بررسی کنید، که برای اشکال‌زدایی انیمیشن‌ها و انتقال‌های ورودی ضروری است.

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

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

  • ورودی چندوجهی: اکنون می‌توانید تصاویر را مستقیماً از کلیپ‌بورد خود در چت دستیار هوش مصنوعی پیست کنید تا در مورد مشکلات بصری سؤال بپرسید.

مشکل کرومیوم: ۴۷۰۹۹۷۶۹۹

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

  • عناصر: یک نشان جدید View source در کنار تگ ریشه <html> اضافه شده است که راهی سریع برای پرش به کد منبع سند فراهم می‌کند.
  • منابع: فایل‌های JSON قابل ویرایش اکنون از یک دکمه‌ی برگشت‌پذیر برای چاپ زیبا پشتیبانی می‌کنند که ویرایش داده‌ها را بدون از دست دادن قالب‌بندی اصلی آسان‌تر می‌کند.
  • شبکه: آیتم‌های منوی زمینه به‌روزرسانی شده‌اند تا برای خوانایی بهتر، از حالت جمله استفاده کنند.
  • کنسول: مشکلی که باعث می‌شد فیلترهای مربوط به استثنائاتِ نادیده گرفته شده پس از بارگذاری مجدد صفحه از بین بروند، برطرف شد.

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

اطلاعیه‌های دسترسی‌پذیری

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

  • جستجو: صفحه‌خوان‌ها اکنون هنگام استفاده از Ctrl+F تعداد نتایج جستجو (مثلاً «۱ از ۵») را اعلام می‌کنند.
  • ضبط‌کننده: صفحه‌خوان‌ها اکنون اعلام می‌کنند که چه زمانی یک ضبط با موفقیت حذف یا وارد شده است.
  • تنظیمات: صفحه‌خوان‌ها اکنون هنگام فیلتر کردن در برگه آزمایش‌ها، تعداد نتایج را اعلام می‌کنند.
  • حریم خصوصی: گروه Origin در پنل حریم خصوصی اکنون با استفاده از صفحه کلید کاملاً قابل دسترسی است.
  • رابط کاربری: بهبود قابلیت مشاهده‌ی آیکون‌های داک و غیرفعال شدن عناصر انتخابی برای کاربران در حالت‌های کنتراست بالا و رنگ‌های اجباری.

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