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

جسلین ین

وارد کردن و صادر کردن جریان های کاربر ضبط شده به عنوان یک فایل JSON

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

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

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

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

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

گزینه ها را در پانل ضبط صادر کنید

شماره Chromium: 1257499

لایه‌های آبشاری را در قسمت Styles مشاهده کنید

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

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

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

لایه‌های آبشاری را در قسمت Styles مشاهده کنید

شماره Chromium: 1240596

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

اکنون می توانید فرمت رنگ HWB را در DevTools مشاهده و ویرایش کنید.

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

همچنین، می‌توانید قالب رنگ را در انتخابگر رنگ به HWB تغییر دهید.

تابع رنگ hwb().

نمایش املاک خصوصی را بهبود بخشید

DevTools اکنون دسترسی های خصوصی را به درستی ارزیابی و نمایش می دهد. قبلاً نمی‌توانستید کلاس‌ها را با دسترسی‌های خصوصی در کنسول و پنل منابع گسترش دهید.

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

مشکلات Chromium: 1296855 ، https://crbug.com/1303407

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

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

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

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

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

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

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

حالت Timespan و Snapshot در پنل هاوس Lighthouse

شماره Chromium: 772558

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

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

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

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

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

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