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

جسلین ین

در حین رفع اشکال، قاب را مجدداً راه اندازی کنید

ویژگی Restart frame بازگشته است! وقتی در جایی در یک تابع مکث می شود، می توانید کد قبلی را دوباره اجرا کنید. پیش از این، این ویژگی در کروم 92 به دلیل مشکلات پایداری منسوخ و حذف شده بود.

در این مثال ، دیباگر ابتدا در نقطه شکست (خط 343) نزدیک انتهای تابع toggleColorScheme مکث کرد. برای راه اندازی مجدد اشکال زدایی از ابتدای تابع toggleColorScheme ، بخش Call stack را در قسمت Debugger گسترش دهید، روی toggleColorScheme کلیک راست کرده و Restart frame را انتخاب کنید.

در حین رفع اشکال، قاب را مجدداً راه اندازی کنید

شماره Chromium: 1303521

گزینه های پخش آهسته در پانل ضبط

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

پانل Recorder را باز کنید و ضبط جدیدی را شروع کنید . پس از اتمام ضبط، روی دکمه کشویی Replay کلیک کنید. سرعتی را برای شروع پخش مجدد انتخاب کنید.

گزینه های پخش آهسته در پانل ضبط

شماره Chromium: 1306756

یک پسوند برای پنل Recorder بسازید

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

برای نصب یک افزونه دمو، این مراحل را که در مستندات ذکر شده است دنبال کنید.

پسوند سفارشی برای پانل ضبط

شماره Chromium: 1325751

گروه بندی فایل ها توسط نویسنده / مستقر در پنل منابع

گزینه جدید Group files by Authored / Deployed را فعال کنید تا فایل های خود را در پنل Sources سازماندهی کنید. هنگام توسعه برنامه های کاربردی وب با فریمورک ها (به عنوان مثال React، Angular)، به دلیل فایل های کوچک شده تولید شده توسط ابزارهای ساخت (به عنوان مثال، Webpack، Vite) می توانید به فایل های منبع پیمایش کنید.

با استفاده از این چک باکس، می‌توانید فایل‌ها را به ۲ دسته برای جستجوی سریع‌تر فایل گروه‌بندی کنید:

  • تألیف شده است . مشابه فایل های منبعی که در IDE خود مشاهده می کنید. DevTools این فایل ها را بر اساس نقشه های منبع (ارائه شده توسط ابزارهای ساخت شما) تولید می کند.
  • مستقر شد . فایل های واقعی که مرورگر می خواند. معمولا این فایل ها Minified هستند.

خودتان با این نسخه ی نمایشی React آن را امتحان کنید!

گروه بندی فایل ها توسط نویسنده / مستقر در پنل منابع

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

آهنگ زمان‌بندی کاربر جدید در پانل بینش عملکرد

با آهنگ زمان‌بندی کاربر جدید در پانل بینش عملکرد، علامت‌های performance.measure() را در ضبط خود تجسم کنید.

برای مثال، این صفحه وب از متد performance.measure() برای محاسبه زمان سپری شده بارگذاری متن استفاده می کند.

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

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

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

شکاف اختصاص داده شده یک عنصر را نشان دهید

عناصر شکاف‌دار در پانل عناصر دارای نشان slot جدیدی هستند. هنگام اشکال‌زدایی مسائل طرح‌بندی، از این ویژگی برای شناسایی سریع‌تر عنصری که بر طرح‌بندی گره تأثیر می‌گذارد، استفاده کنید.

این مثال شامل کارت هایی با چند اسلات نامگذاری شده است. جایگاه person-occupation یک کارت را بررسی کنید، روی نشان slot در کنار آن کلیک کنید تا شکاف اختصاص داده شده آن مشخص شود.

یاد بگیرید که چگونه از عناصر <template> و <slot> برای ایجاد یک الگوی انعطاف پذیر استفاده کنید که سپس می تواند برای پر کردن DOM سایه یک جزء وب استفاده شود.

شکاف اختصاص داده شده یک عنصر را نشان دهید

شماره Chromium: 1018906

شبیه سازی همزمانی سخت افزار برای ضبط های عملکرد

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

برخی از برنامه ها از navigator.hardwareConcurrency برای کنترل میزان موازی بودن برنامه خود استفاده می کنند، به عنوان مثال، برای کنترل اندازه مخزن pthread Emscripten. با استفاده از این ویژگی، توسعه دهندگان می توانند عملکرد برنامه خود را با تعداد هسته های مختلف آزمایش کنند.

شبیه سازی همزمانی سخت افزار برای ضبط های عملکرد

شماره Chromium: 1297439

پیش نمایش مقدار غیر رنگی هنگام تکمیل خودکار متغیرهای CSS

هنگام تکمیل خودکار متغیرهای CSS، DevTools اکنون متغیر غیر رنگی را با مقدار معنی‌داری پر می‌کند تا بتوانید نوع تغییر مقدار را در گره پیش‌نمایش کنید.

پیش نمایش مقدار غیر رنگی هنگام تکمیل خودکار متغیرهای CSS

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

قاب‌های مسدودکننده را در پنجره کش Back/Forward شناسایی کنید

صفحه کش Back/Forward در پنل Application دارای بخش فریم های جدیدی است تا به شما کمک کند فریم های مسدود کننده ای را شناسایی کنید که ممکن است از واجد شرایط بودن صفحه برای bfcache جلوگیری کنند.

قاب‌های مسدودکننده را در پنجره کش Back/Forward شناسایی کنید

شماره Chromium: 1288158

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

تکمیل خودکار ویژگی های شی جاوا اسکریپت اکنون بر اساس این ترتیب نمایش داده می شود:

  1. دارای خواص بی شماری
  2. دارای ویژگی های غیرقابل شمارش
  3. خواص بی شماری به ارث برده است
  4. خواص غیرقابل شمارش ارثی

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

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

شماره Chromium: 1299241

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

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

  • اکنون نقاط شکست به صورت درون خطی <script> با حاشیه نویسی sourceURL کار می کنند.
  • اکنون اشکال‌زدا متغیرهای محدوده بلوک را در نمای Scope با نقشه‌های منبع حل می‌کند. متغیرهای محدوده بلوکی را حل می کند
  • اکنون اشکال زدا متغیرها را در توابع پیکان در نمای Scope با نقشه های منبع حل می کند. متغیرها را در توابع پیکان حل می کند

مسائل Chromium: 1329113 ، 1322115

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

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

  • تنظیم تکمیل خودکار برای پانل منابع برطرف شد. قبلاً، تکمیل خودکار همیشه حتی در تنظیمات غیرفعال است. ( 1323286 )
  • برگه Manifest را در پانل برنامه به‌روزرسانی کرد تا آخرین قالب طرح رنگ را تجزیه کند. ( 1318305 )
  • پیشنهادات مربوط به <script async> مشکلات مسدود کردن رندر را در پانل اطلاعات بینش عملکرد بهبود بخشید. پیش از این، DevTools پیشنهاد کرده بود که add async attribute to the script tag حتی اگر اسکریپت قبلاً به‌عنوان async علامت‌گذاری شده باشد. ( 1334096 )
  • پانل بینش عملکرد اکنون iframes را به‌عنوان دلایل بالقوه برای تغییر طرح‌بندی شناسایی می‌کند. می توانید جزئیات iframe را در قسمت جزئیات مشاهده کنید. ( 1328873 )
  • هنگامی که فایل در منوی Command باز می شود، فایل های تالیفی (فایل های تولید شده توسط نقشه های منبع) اکنون در رتبه های بالاتری قرار می گیرند بنابراین در بالای اسکریپت های مستقر با نام مشابه ظاهر می شوند. ( 1312929 )

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

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

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

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

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

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