موارد جدید در DevTools، Chrome 128

صوفیا املیانووا
Sofia Emelianova
GitHub

بینش‌های کنسول توسط Gemini در بیشتر کشورهای اروپایی به صورت زنده در دسترس قرار می‌گیرد

این نسخه پشتیبانی از بینش‌های کنسول توسط Gemini را برای اکثر کشورهای اروپایی به ارمغان می‌آورد.

فهرست کشورهای اروپایی که به تازگی پشتیبانی می‌شوند

اتریش، بلژیک، بلغارستان، سوئیس، قبرس، جمهوری چک، آلمان، دانمارک، استونی، اسپانیا، فنلاند، فرانسه، بریتانیا، یونان، کرواسی، مجارستان، ایرلند، ایسلند، ایتالیا، لیختن‌اشتاین، لیتوانی، لوکزامبورگ، لتونی، مالت، هلند، نروژ، لهستان، پرتغال، رومانی، سوئد، اسلوونی، اسلواکی.

اگر در یکی از این کشورها هستید، اکنون می‌توانید از Gemini بخواهید که مستقیماً در کنسول ، بینش‌هایی ارائه دهد تا بتوانید خطاها و هشدارها را بهتر درک کنید.

بینشی از Gemini برای خطایی در کنسول.

به‌روزرسانی‌های پنل عملکرد

این به‌روزرسانی چند بهبود در پنل عملکرد (Performance ) ایجاد می‌کند.

مسیر شبکه پیشرفته

مسیر شبکه در پنل عملکرد بهبود یافته است تا اطلاعات حیاتی را از قبل نشان دهد، به عنوان مثال، مدت زمان دقیق‌تر و درخت آغازگر شبکه، و وضوح بیشتری در نشانه‌ها و رنگ‌های بصری ارائه دهد. بنابراین، دیگر لازم نیست بین پنل شبکه و تب Performance > Summary جابجا شوید. علاوه بر این، اگر هنوز نیاز به جابجایی به پنل شبکه دارید، ما این کار را برای شما آسان‌تر و سریع‌تر کرده‌ایم.

اکنون مسیر شبکه موارد زیر را انجام می‌دهد:

  • برای انواع درخواست، یک راهنمای رنگی نشان می‌دهد.
  • درخواست‌های مسدودکننده رندر را با مثلث‌های قرمز در گوشه بالا سمت راست علامت‌گذاری می‌کند.
  • درخواست آغازگر را پس از انتخاب با یک فلش نشان می‌دهد. این به شما کمک می‌کند تا درخت آغازگرهای شبکه را که قبلاً فقط در پنل شبکه موجود بود، درک کنید.
  • با نگه داشتن ماوس روی تصویر، یک راهنمای ابزار اصلاح‌شده، اکنون اطلاعات زمان‌بندی ساختاریافته، از جمله وضعیت مسدود شدن رندر و تغییرات در اولویت (در صورت وجود) را نشان می‌دهد.
  • تب خلاصه اکنون جزئیات زمان‌بندی‌ها را در ستونی در سمت راست نشان می‌دهد.

مسیر شبکه بهبود یافته با راهنماهای رنگی، راهنماهای ابزار، نشانگرهای مسدود شدن رندر و زمان‌بندی‌ها در برگه خلاصه.

علاوه بر این، اکنون می‌توانید روی درخواست در مسیر یا URL آن در برگه خلاصه کلیک راست کرده و از منوی کشویی ، گزینه Reveal in Network panel را انتخاب کنید. DevTools شما را به پنل Network می‌برد و درخواستی را که به دنبال آن هستید در جدول برجسته می‌کند.

منوی کلیک راست برای درخواست با گزینه «آشکارسازی در پنل شبکه».

داده‌های عملکرد را با API توسعه‌پذیر سفارشی کنید

این نسخه پشتیبانی از داده‌های افزونه را به پنل Performance اضافه می‌کند. اکنون می‌توانید Trackهای سفارشی با رویدادها و توضیحات tooltip را به performance trace، جزئیات را به تب Summary و موارد دیگر اضافه کنید. این ویژگی ممکن است برای توسعه‌دهندگان فریم‌ورک‌ها، کتابخانه‌ها و برنامه‌های پیچیده با ابزارهای سفارشی مفید باشد.

نمونه‌ای از یک مسیر سفارشی را در این صفحه آزمایشی ببینید. در بخش عملکرد > تنظیمات ضبط ، گزینه داده‌های افزونه فعال کنید. ضبط عملکرد را شروع کنید، در صفحه آزمایشی روی افزودن Corgi جدید کلیک کنید، سپس ضبط را متوقف کنید. در مسیر ردیابی، یک مسیر سفارشی مشاهده خواهید کرد که شامل رویدادهایی با نکات ابزار سفارشی و جزئیات در برگه خلاصه است.

یک آهنگ سفارشی در پنل Performance.

به طور خلاصه، برای گسترش داده‌های عملکرد، یک ساختار خاص را به پارامترهای measureOption.detail یا markOption.detail از فراخوانی‌های API مربوط به performance.measure() یا performance.mark() ارسال کنید.

جزئیات در مسیر زمان‌بندی‌ها

اگر شما یک توسعه‌دهنده وب هستید که از بخش زمان‌بندی کاربر در Performance API برای اضافه کردن ورودی‌ها به مسیر زمان‌بندی استفاده می‌کنید، اکنون می‌توانید جزئیات دلخواه خود را در تب خلاصه برای رویدادهای mark و measure و مهرهای زمانی آنها مشاهده کنید.

یک رویداد سفارشی در مسیر زمان‌بندی‌ها با یک مهر زمانی و جزئیات.

شماره کروم: ۳۴۵۴۱۸۹۱۵

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

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

گزینه‌ها را فقط برای درخواست‌های فهرست‌شده کپی کنید.

اسنپ‌شات‌های سریع‌تر از هیپ با تگ‌های HTML نامگذاری‌شده و بی‌نظمی کمتر

اسنپ‌شات‌های هیپ در پنل حافظه حتی سریع‌تر شده‌اند، اکنون اشیاء بر اساس تگ‌های HTML نامگذاری شده گروه‌بندی شده‌اند، با نمایش اشیاء داخلی کمتر، با معانی زبان جاوا اسکریپت بهتر مطابقت دارند و همیشه شامل مقادیر عددی هستند.

اشیاء گروه‌بندی‌شده بر اساس تگ‌های HTML نامگذاری‌شده.

عملکرد مقادیر عددی را در ضبط وارد کنید » افزایش یافته، به طور پیش‌فرض فعال شده و از پنل حافظه حذف شده است.

برای افزودن دستی اشیاء داخلی به اسنپ‌شات، ابتدا Settings > Experiments > Show option to reveal internals in heap snapshots را فعال کنید، سپس Expose internals (...) را در پنل Memory فعال کنید.

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

برای ضبط انیمیشن‌ها و ویرایش @keyframes به صورت زنده، پنل Animations را باز کنید.

پنل انیمیشن‌ها اکنون موارد زیر را انجام می‌دهد:

  • انیمیشن‌هایی را که هنگام باز کردن پنل در حال انجام هستند، ضبط می‌کند، بنابراین لازم نیست صفحه را برای ضبط انیمیشن‌ها رفرش کنید.
  • از ویرایش زنده‌ی @keyframes پشتیبانی می‌کند. به عبارت دیگر، انیمیشن ضبط شده را همزمان با ویرایش بخش @keyframes در Elements > Styles به‌روزرسانی می‌کند.

هر دو ویژگی را در ویدیوی زیر در عمل ببینید.

شماره کروم: 352718055

فانوس دریایی ۱۲.۱.۰

پنل Lighthouse اکنون Lighthouse 12.1.0 را اجرا می‌کند.

این به‌روزرسانی تعدادی تغییر را به همراه دارد، از جمله حذف معیار قدیمی First Meaningful Paint (FMP) به نفع Largest Contentful Paint (LCP) . لیست کامل تغییرات را ببینید.

برای یادگیری اصول اولیه استفاده از پنل Lighthouse در DevTools، به Lighthouse: Optimize website speed مراجعه کنید.

مشکل کروم: ۷۷۲۵۵۸

دسترسی‌پذیری

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

  • فشردن کلید Tab پس از تکمیل خودکار در فیلد ویرایش عبارات زنده، فوکوس را به نقطه فوکوس بعدی منتقل می‌کند. پیش از این، متن را تورفتگی می‌داد.
  • کلیک روی یک تغییر اندازه، فوکوس را روی آن قرار می‌دهد، بنابراین می‌توانید آن را با کلیدهای جهت‌نمای راست و چپ حرکت دهید.
  • یک صفحه‌خوان اکنون فیلد ویرایش عبارت ساعت «افزودن» را در «منابع» اعلام می‌کند و عبارت ساعت «حذف» اکنون هنگام پیمایش با صفحه‌کلید به وضوح قابل مشاهده است.

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

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

برخی از اصلاحات و بهبودهای قابل توجه در این نسخه عبارتند از:

  • عملکرد :
    • مسیر شبکه : رویدادهای اتصال WebSocket شماره ۳۳۱۳۵۱۹۷۹ اضافه شد.
    • پنل عملکرد اکنون به درستی روی شلوغ‌ترین فعالیت نخ اصلی یعنی ۳۴۵۵۹۹۳۵۶ زوم می‌کند.
    • اشکالی که باعث می‌شد انواع فایل‌های ردیابی اشتباه آپلود شوند، برطرف شد. اکنون از آپلود هر نوع فایلی به جز نوع صحیح .json یا .gz 349864878 جلوگیری می‌شود.
  • عناصر > سبک‌ها :
    • مقادیر ویژگی طول با قابلیت کشویی واحد اکنون منسوخ شده است ۴۱۴۹۵۶۱۸ .
    • رفع مشکل حل مشکلات مربوط به ویژگی‌های فعال برای at-rules تودرتو ۳۴۶۷۳۲۷۳۷ .
    • بخش‌های غیرفعال @position-try ‎ اکنون خاکستری شده‌اند ‎۴۰۲۴۶۴۹۳ ‎.
  • کاربرد :
    • کوکی‌ها : اشکالی که باعث می‌شد کوکی‌ها پس از کلیک روی «به‌روزرسانی» 348683488 به‌روزرسانی نشوند، برطرف شد.
    • ذخیره‌سازی محلی : اکنون می‌توانید بر اساس حروف الفبا مرتب‌سازی کنید ۳۴۱۱۲۹۵۸

دانلود کانال‌های پیش‌نمایش

استفاده از Chrome Canary ، Dev یا Beta را به عنوان مرورگر پیش‌فرض توسعه خود در نظر بگیرید. این کانال‌های پیش‌نمایش به شما امکان دسترسی به جدیدترین ویژگی‌های DevTools را می‌دهند، به شما امکان می‌دهند APIهای پلتفرم وب پیشرفته را آزمایش کنید و به شما کمک می‌کنند قبل از کاربران، مشکلات سایت خود را پیدا کنید!

با تیم Chrome DevTools تماس بگیرید

از گزینه‌های زیر برای بحث در مورد ویژگی‌های جدید، به‌روزرسانی‌ها یا هر چیز دیگری که مربوط به DevTools است، استفاده کنید.

قابلیت‌های جدید در DevTools

فهرستی از تمام مواردی که در مجموعه «چه چیزهای جدیدی در DevTools» پوشش داده شده است.