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

جسلین یین

وارد کردن و صادر کردن جریان‌های کاربری ثبت‌شده به عنوان یک فایل JSON

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

برای مثال، این فایل JSON را دانلود کنید. می‌توانید آن را با دکمه‌ی import وارد کنید و جریان کاربر را دوباره پخش کنید .

جدا از آن، می‌توانید ضبط را نیز صادر کنید. پس از ضبط جریان کاربر ، روی دکمه صادرات کلیک کنید. 3 گزینه صادرات وجود دارد:

  • خروجی به صورت فایل JSON . فایل ضبط شده را به صورت فایل JSON دانلود کنید.
  • فایل ضبط شده را به عنوان اسکریپت Puppeteer/replay@ صادر کنید . فایل ضبط شده را به عنوان اسکریپت Puppeteer Replay دانلود کنید.
  • به عنوان اسکریپت Puppeteer خروجی بگیرید . فایل ضبط شده را به عنوان اسکریپت Puppeteer دانلود کنید.

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

گزینه‌های خروجی گرفتن در پنل ضبط‌کننده

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

مشاهده لایه‌های آبشاری در پنل استایل‌ها

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

در این مثال ، ۳ لایه آبشاری تعریف شده است: page ، component و base . در پنل Styles ، می‌توانید هر لایه و سبک‌های آن را مشاهده کنید.

برای مشاهده ترتیب لایه‌ها، روی نام لایه کلیک کنید. لایه page بالاترین ویژگی را دارد، بنابراین پس‌زمینه box سبز است.

مشاهده لایه‌های آبشاری در پنل استایل‌ها

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

پشتیبانی از تابع رنگ hwb()

اکنون می‌توانید قالب رنگ HWB را در DevTools مشاهده و ویرایش کنید.

در پنل Styles ، کلید Shift را نگه دارید و روی هر پیش‌نمایش رنگی کلیک کنید تا فرمت رنگ تغییر کند. فرمت رنگ HWB اضافه می‌شود.

روش دیگر این است که می‌توانید فرمت رنگ را در انتخابگر رنگ به HWB تغییر دهید.

تابع رنگ hwb()‎

نمایش املاک خصوصی بهبود یافته است

DevTools اکنون به درستی accessor های خصوصی را ارزیابی و نمایش می‌دهد. پیش از این، نمی‌توانستید کلاس‌هایی را که accessor های خصوصی داشتند در پنل Console و Sources گسترش دهید.

ویژگی‌های خصوصی در کنسول

مشکلات کرومیوم: ۱۲۹۶۸۵۵ ، https://crbug.com/1303407

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

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

  • حافظه پنهان Back/forward اکنون شناسه افزونه‌ای را که bfcache را مسدود کرده است، در صورت وجود، نمایش می‌دهد. ( 1284548 )
  • رفع مشکل تکمیل خودکار برای اشیاء آرایه مانند، نام کلاس‌های CSS، map.get و تگ‌های HTML ( 1297101 ، 1297491 ، 1293807 ، 1296983 )
  • هایلایت‌های نادرست هنگام دوبار کلیک کردن روی کلمات و لغو تکمیل خودکار برطرف شد. ( 1298437 ، 1298667 )
  • میانبر صفحه کلید برای کامنت در پنل منابع ( 1296535 ) اصلاح شد.
  • پشتیبانی از استفاده از کلید Alt (گزینه‌ها) برای انتخاب چندگانه در پنل منابع را دوباره فعال کنید. ( 1304070 )

[آزمایشی] حالت جدید timepan و snapshot در پنل Lighthouse

جدا از حالت ناوبری موجود، پنل Lighthouse اکنون از دو حالت دیگر برای اندازه‌گیری جریان‌های کاربری پشتیبانی می‌کند - timespan و snapshot .

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

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

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

مشکل کرومیوم: ۷۷۲۵۵۸

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

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

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

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

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

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