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

Jecelyn Yeen

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

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

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

• برای بزرگنمایی کارت، روی آن دوبار کلیک کنید
• روی کارت کلیک راست کرده و از منوی زمینه، یک اقدام را انتخاب کنید

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

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

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

حالت جدید timepan و snapshot در پنل Lighthouse

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

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

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

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

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

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

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

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

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

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

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

تأیید حذف ضبط اجرا

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

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

تغییر ترتیب پنل‌ها در پنل Elements

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

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

مشکل کرومیوم: ۱۱۴۶۱۴۶

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

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

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

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

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

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

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

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

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

تب WebAuthn اکنون دارای کادر انتخاب جدید Supports large blob برای احراز هویت‌های مجازی است.

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

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

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

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

• نوار کناری ناوبری (سمت چپ) را با کنترل / فرمان + شیفت + Y تغییر دهید
• نوار کناری اشکال‌زدا (سمت راست) را با کنترل / فرمان + شیفت + H تغییر وضعیت دهید

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

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

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

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

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

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

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

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

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

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

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

• بازخوردها و درخواست‌های مربوط به ویژگی‌های جدید را برای ما در crbug.com ارسال کنید.
• با استفاده از more_vert مشکل DevTools را گزارش دهید. گزینه‌های بیشتر > راهنما > گزارش مشکل DevTools در DevTools.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد ویدیوهای یوتیوب «چه چیزهایی در DevTools جدید است» یا ویدیوهای یوتیوب «نکات DevTools» بنویسید.

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

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