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

Jecelyn Yeen

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

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

در این مثال ، یک ضبط را شروع کنید و سعی کنید مراحل زیر را انجام دهید:

• روی کارت دوبار کلیک کنید تا بزرگ شود
• روی کارت کلیک راست کرده و یک عمل را از منوی زمینه انتخاب کنید

برای درک نحوه ثبت این رویدادها توسط Recorder ، مراحل را گسترش دهید:

• دوبار کلیک به عنوان type: doubleClick .
• رویداد کلیک راست به‌عنوان type: click اما با ویژگی button روی secondary تنظیم شده است. مقدار button یک کلیک معمولی ماوس primary است.

مسائل Chromium: 1300839 , 1322879 , 1299701 , 1323688

بازه زمانی جدید و حالت عکس فوری در پنل Lighthouse

اکنون می توانید از Lighthouse برای اندازه گیری عملکرد وب سایت خود فراتر از بارگذاری صفحه استفاده کنید.

پنل Lighthouse اکنون از 3 حالت اندازه گیری جریان کاربر پشتیبانی می کند:

• گزارش های ناوبری بارگذاری یک صفحه را تجزیه و تحلیل می کند. ناوبری رایج ترین نوع گزارش است. همه گزارش های Lighthouse قبل از نسخه فعلی، گزارش های ناوبری هستند.
• گزارش‌های Timespans یک دوره زمانی دلخواه را تحلیل می‌کنند که معمولاً شامل تعاملات کاربر است.
• گزارش‌های Snapshots صفحه را در یک وضعیت خاص، معمولاً پس از تعامل کاربر با آن، تجزیه و تحلیل می‌کنند.

برای مثال، بیایید عملکرد افزودن موارد به سبد خرید را در این صفحه نمایشی اندازه‌گیری کنیم. حالت Timespan را انتخاب کنید و روی Start Timespan کلیک کنید. اسکرول کنید و چند مورد را به سبد خرید اضافه کنید. پس از اتمام کار، روی End timesp کلیک کنید تا گزارش Lighthouse از تعاملات کاربر ایجاد شود.

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

شماره Chromium: 1291284

به‌روزرسانی‌های Performance Insights

کنترل زوم بهبود یافته در پانل Performance Insights

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

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

شماره Chromium: 1313382

برای حذف عملکرد ضبط شده، تأیید کنید

DevTools اکنون یک گفتگوی تأیید را قبل از حذف عملکرد ضبط شده نشان می دهد.

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

ترتیب پانل ها را در پانل عناصر تغییر دهید

اکنون می توانید بر اساس اولویت خود، پانل ها را در پانل Elements تغییر ترتیب دهید.

به عنوان مثال، وقتی DevTools را در یک صفحه باریک باز می‌کنید، پنجره Accessibility در زیر دکمه Show more پنهان می‌شود. اگر اغلب مشکلات دسترسی را اشکال زدایی می کنید، اکنون می توانید برای دسترسی آسان تر، صفحه را به جلو بکشید.

شماره Chromium: 1146146

انتخاب رنگ خارج از مرورگر

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

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

شماره Chromium: 1245191

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

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

در این مثال، تابع double دارای یک پارامتر ورودی a و یک متغیر x است. یک نقطه شکست در خط return قرار دهید و کد را اجرا کنید. پیش نمایش درون خطی مقادیر a و x را به درستی نشان می دهد. قبلاً، دیباگر مقدار x را در پیش نمایش درون خطی نشان نمی داد.

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

پشتیبانی از حباب های بزرگ برای احراز هویت مجازی

اکنون برگه WebAuthn دارای چک باکس جدید پشتیبانی از حباب بزرگ برای احراز هویت مجازی است.

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

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

میانبرهای صفحه کلید جدید در پانل منابع

دو میانبر صفحه کلید جدید اکنون در پانل منابع موجود است:

• نوار کناری ناوبری (چپ) را با Control / Command + Shift + Y تغییر دهید
• نوار کناری دیباگر (راست) را با Control / Command + Shift + H تغییر دهید

مسائل Chromium: 1226363

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

پیش از این، توسعه‌دهندگان شکست تصادفی را در طی موارد زیر تجربه می‌کردند:

• اشکال زدایی با مثال Codepen
• شناسایی محل منبع مسائل مربوط به عملکرد در یک مثال Codepen
• وقتی React DevTools فعال است، تب Component وجود ندارد

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

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

مسائل Chromium: 1319828 ، 1318635 ، 1305475

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

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

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

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

• بازخورد و درخواست های ویژگی را برای ما در crbug.com ارسال کنید.
• یک مشکل DevTools را با استفاده از more_vert گزینه های بیشتر > راهنما > گزارش مشکل DevTools در DevTools گزارش کنید.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد موارد جدید در ویدیوهای DevTools YouTube یا DevTools Tips ویدیوهای YouTube بگذارید.

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

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