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

جسلین ین

پخش گام به گام در Recorder

اکنون می توانید یک نقطه شکست تنظیم کنید و یک جریان کاربر را مرحله به مرحله در پانل ضبط مجدد پخش کنید.

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

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

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

پخش گام به گام در Recorder

شماره Chromium: 1257499

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

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

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

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

پشتیبانی از ماوس روی رویداد در Recorder

شماره Chromium: 1257499

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

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

در یک ضبط عملکرد ، روی نشان LCP در Timeline کلیک کنید. در بخش جزئیات ، می توانید امتیاز LCP را مشاهده کنید، یاد بگیرید که چگونه منابعی را که سرعت LCP را کاهش می دهند، تعمیر کنید و مسیر حیاتی برای منبع LCP را ببینید.

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

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

شماره Chromium: 1326481

فلاش های متن (FOIT، FOUT) را به عنوان دلایل ریشه ای بالقوه برای تغییر چیدمان شناسایی کنید

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

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

برای یادگیری تکنیک جلوگیری از جابجایی طرح، به بارگذاری و رندر WebFont بهینه سازی مراجعه کنید.

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

مسائل Chromium: 1334628 ، 1328873

کنترل کننده های پروتکل در پنجره Manifest

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

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

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

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

کنترل کننده های پروتکل در پنجره Manifest

مسائل Chromium: 1300613

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

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

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

در این دمو ، روی Open dialog کلیک کنید.

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

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

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

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

شماره کرومیوم: 1313690

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

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

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

ALT_TEXT_HERE

شماره کرومیوم: 1341255

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

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

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

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

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

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

شماره کرومیوم: 1334484

مشاهده و ویرایش @scope در قوانین موجود در صفحه Styles

اکنون می توانید CSS @scope at-rules را در صفحه Styles مشاهده و ویرایش کنید.

@scope در قوانین بخشی از مشخصات CSS Cascading و Inheritance Level 6 است. این قوانین به توسعه دهندگان اجازه می دهد تا قوانین سبک را در CSS محدوده بندی کنند.

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

@scope در قوانین در پنجره Styles

شماره کرومیوم: 1337777

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

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

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

شماره Chromium: 1335338 ، 1333411

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

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

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

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

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

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

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

چیزهای جدید در DevTools

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