چیزهای جدید در DevTools (Chrome 105)

جسلین یین

پخش مرحله به مرحله در ضبط کننده

اکنون می‌توانید یک نقطه توقف تنظیم کنید و جریان کاربر را گام به گام در پنل ضبط‌کننده تکرار کنید.

برای تنظیم یک نقطه توقف، روی نقطه آبی کنار یک مرحله کلیک کنید. جریان کاربری خود را دوباره پخش کنید، پخش قبل از اجرای مرحله متوقف می‌شود. از اینجا می‌توانید پخش را ادامه دهید، یک مرحله را اجرا کنید یا پخش را لغو کنید.

با این ویژگی، می‌توانید جریان کاربری خود را به راحتی به طور کامل تجسم و اشکال‌زدایی کنید.

برای اطلاعات بیشتر به مرجع ویژگی‌های ضبط‌کننده مراجعه کنید.

پخش مرحله به مرحله در ضبط کننده

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

پشتیبانی از رویداد ماوس روی پنل ضبط کننده

اکنون ضبط‌کننده از اضافه کردن دستی مرحله‌ی بردن ماوس روی (هاور) در یک ضبط پشتیبانی می‌کند.

این دمو یک منوی پاپ‌آپ را با نگه داشتن ماوس روی آن نشان می‌دهد. سعی کنید جریان کاربری را ضبط کنید و روی یک آیتم منو کلیک کنید.

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

پشتیبانی از رویداد ماوس روی ضبط کننده

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

بزرگترین رنگ محتوا (LCP) در پنل بینش‌های عملکرد

LCP یک معیار مهم و کاربر محور برای اندازه‌گیری سرعت بارگذاری ادراک‌شده است. اکنون می‌توانید مسیرهای بحرانی و علل ریشه‌ای بزرگترین رنگ محتوا (LCP) را بیابید.

در یک ضبط عملکرد ، روی نشان LCP در جدول زمانی کلیک کنید. در قسمت جزئیات ، می‌توانید امتیاز LCP را مشاهده کنید، نحوه رفع منابعی که LCP را کند می‌کنند را بیاموزید و مسیر بحرانی منبع LCP را ببینید.

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

LCP در پنل بینش‌های عملکرد

مشکل کرومیوم: ۱۳۲۶۴۸۱

شناسایی جرقه‌های متن (FOIT، FOUT) به عنوان دلایل ریشه‌ای بالقوه برای تغییرات طرح‌بندی

پنل بینش‌های عملکرد اکنون نمایش ناگهانی متن نامرئی (FOIT) و نمایش ناگهانی متن بدون استایل (FOUT) را به عنوان دلایل اصلی بالقوه برای تغییرات طرح‌بندی تشخیص می‌دهد.

برای مشاهده دلایل ریشه‌ای احتمالی تغییر طرح‌بندی، روی تصویر صفحه در مسیر تغییرات طرح‌بندی کلیک کنید.

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

FOUT در پنل بینش‌های عملکرد

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

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

اکنون می‌توانید از DevTools برای آزمایش ثبت نام کنترل‌کننده پروتکل URL برای برنامه‌های وب پیش‌رونده (PWA) استفاده کنید.

ثبت نام کنترل کننده پروتکل URL به PWA های نصب شده اجازه می دهد تا لینک هایی را که از یک پروتکل خاص (مثلاً magnet ، web+example ) استفاده می کنند، برای یک تجربه یکپارچه تر، مدیریت کنند.

از طریق پنجره Application > Manifest به بخش Protocol Handlers بروید. می‌توانید تمام پروتکل‌های موجود را در اینجا مشاهده و آزمایش کنید.

برای مثال، این PWA آزمایشی را نصب کنید. در بخش Protocol Handlers ، عبارت «americano» را تایپ کنید و روی Test protocol کلیک کنید تا صفحه مربوط به قهوه در PWA باز شود.

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

مشکلات کروم: ۱۳۰۰۶۱۳

نشان لایه بالا در پنل عناصر

از نشان لایه بالایی برای درک مفهوم لایه بالایی و تجسم چگونگی تغییر محتوای لایه بالایی استفاده کنید.

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

در این نسخه آزمایشی ، روی باز کردن کادر محاوره‌ای کلیک کنید.

برای کمک به بصری‌سازی عناصر لایه بالایی، DevTools یک کانتینر لایه بالایی ( #top-layer ) به درخت DOM اضافه می‌کند. این کانتینر بعد از تگ بسته </html> قرار می‌گیرد.

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

در کنار عنصر درخت لایه بالایی (برای مثال، عنصر گفتگو)، روی نشان لایه بالایی کلیک کنید تا به کانتینر لایه بالایی بروید.

نشان لایه بالا در پنل عناصر

مشکل کرومیوم: ۱۳۱۳۶۹۰

اطلاعات اشکال‌زدایی Wasm را در زمان اجرا پیوست کنید

اکنون می‌توانید اطلاعات اشکال‌زدایی DWARF را برای wasm در زمان اجرا پیوست کنید. پیش از این، پنل Sources فقط از پیوست کردن نقشه‌های منبع به فایل‌های JavaScript و Wasm پشتیبانی می‌کرد.

یک فایل Wasm را در پنل منابع باز کنید. در ویرایشگر کلیک راست کرده و گزینه Add DWARF debugging info… را انتخاب کنید تا اطلاعات اشکال‌زدایی در صورت نیاز پیوست شود.

متن جایگزین اینجا

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

پشتیبانی از ویرایش زنده در حین اشکال‌زدایی

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

در کروم ۱۰۴، DevTools ویژگی فریم راه‌اندازی مجدد را بازگردانده است. با این حال، شما قادر به ویرایش تابعی که در حال حاضر در آن متوقف شده‌اید، نبودید. برای توسعه‌دهندگان رایج است که یک تابع را باز کنند و سپس آن تابع را در حالی که متوقف شده است، ویرایش کنند.

با این به‌روزرسانی، اشکال‌زدا به‌طور خودکار تابع را با محدودیت‌های زیر مجدداً راه‌اندازی می‌کند:

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

ویرایش زنده در حین اشکال‌زدایی

مشکل کرومیوم: ۱۳۳۴۴۸۴

مشاهده و ویرایش قوانین ‎@scope at در پنل استایل‌ها

اکنون می‌توانید قوانین @scope در CSS را در قسمت Styles مشاهده و ویرایش کنید.

قوانین @scope در CSS بخشی از مشخصات سطح ۶ وراثت و آبشاری CSS است. این قوانین به توسعه‌دهندگان اجازه می‌دهند تا قوانین استایل‌دهی را در CSS محدود کنند.

این صفحه آزمایشی را باز کنید و پیوند درون عنصر <div class=”dark-theme”> را بررسی کنید. در قسمت Styles ، @scope at-rules را مشاهده کنید. برای ویرایش آن، روی اعلان قانون کلیک کنید.

‎@scope در قوانین موجود در پنل Styles

مشکل کرومیوم: ۱۳۳۷۷۷۷۷

بهبودهای نقشه منبع

در اینجا چند اصلاحیه در مورد نقشه‌های منبع برای بهبود تجربه کلی اشکال‌زدایی ارائه شده است:

  • DevTools اکنون به درستی شناسه‌های نقشه منبع را با علائم نگارشی حل می‌کند. برخی از کوچک‌کننده‌های مدرن (به عنوان مثال، esbuild ) نقشه‌های منبعی تولید می‌کنند که شناسه‌ها را با علائم نگارشی بعدی (ویرگول، پرانتز، نقطه ویرگول) ادغام می‌کنند.
  • DevTools اکنون نام‌های نقشه منبع را برای سازنده‌ها با یک فراخوانی super call) حل می‌کند. متن جایگزین اینجا
  • رفع مشکل ایندکس‌گذاری URL در نقشه منبع برای URLهای کنونیکال تکراری. پیش از این، نقاط توقف در برخی فایل‌ها به دلیل URLهای کنونیکال تکراری فعال نمی‌شد.

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

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

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

  • هنگام حذف یک جفت کلید-مقدار از حافظه محلی، آن را به درستی از جدول موجود در پنل Application > Local Storage حذف کنید. ( 1339280 )
  • پیش‌نمایش‌های رنگ اکنون هنگام مشاهده فایل‌های CSS در پنل منابع به درستی نمایش داده می‌شوند. پیش از این، موقعیت آنها اشتباه بود. ( 1340062 )
  • آیتم‌های CSS flex و grid را به طور مداوم در پنل Layout و همچنین به عنوان نشان در پنل Elements نمایش دهید. پیش از این، آیتم‌های flex و grid به طور تصادفی در هر دو مکان وجود نداشتند. ( 1340441 ، 1273992 )
  • اگر DevTools اسکریپتی را پیدا کند که باعث شده فریم به عنوان تبلیغ برچسب گذاری شود، یک لینک جدید Creator Ad Script برای فریم‌های تبلیغاتی در دسترس است. می‌توانید یک فریم را از طریق Application > Frames باز کنید. ( 1217041 )

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

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

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

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

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

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