چیزهای جدید در 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 پوشش داده شده است.

،

جسلین ین

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

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

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

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

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

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

گزینه های صادراتی در صفحه ضبط

شماره کروم: 1257499

مشاهده لایه های آبشار در صفحه سبک

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

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

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

مشاهده لایه های آبشار در صفحه سبک

شماره کروم: 1240596

پشتیبانی از عملکرد رنگ HWB ()

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

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

از طرف دیگر ، می توانید قالب رنگ را به HWB در انتخاب رنگ تغییر دهید.

عملکرد رنگ HWB ()

نمایش ویژگی های خصوصی را بهبود بخشید

DevTools اکنون به طور صحیح دسترسی های خصوصی را ارزیابی و نمایش می دهد. پیش از این ، شما نمی توانید کلاس ها را با دسترسی های خصوصی در پانل کنسول و منابع گسترش دهید.

خصوصیات خصوصی در کنسول

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

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

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

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

[آزمایشی] حالت جدید و حالت عکس فوری در پانل فانوس دریایی

به غیر از حالت ناوبری موجود ، پانل Lighthouse اکنون از دو حالت دیگر در اندازه گیری جریان کاربر پشتیبانی می کند - Timespan و Snapshot .

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

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

حالت Timespan و Snapshot در پنل فانوس دریایی

شماره کروم: 772558

کانال های پیش نمایش را بارگیری کنید

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

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

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

آنچه در Devtools جدید است

لیستی از همه چیزهایی که در سری News in DevTools پوشش داده شده است.