موارد جدید در DevTools (Chrome 112)

سوفیا املیانوا
Sofia Emelianova
GitHub
جسلین ین

به روز رسانی ضبط

پشتیبانی از برنامه های افزودنی پخش مجدد

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

پسوند نمونه را امتحان کنید. برای باز کردن UI سفارشی پخش مجدد، گزینه new custom replay را انتخاب کنید.

UI پخش مجدد سفارشی.

برای سفارشی کردن Recorder بر اساس نیازهای خود و ادغام آن با ابزارهای خود، برنامه افزودنی خود را توسعه دهید: chrome.devtools.recorder API را کاوش کنید و نمونه های برنامه افزودنی بیشتری را بررسی کنید.

شماره Chromium: 1400243 .

با انتخابگرهای پیرس ضبط کنید

علاوه بر انتخابگرهای سفارشی، CSS، ARIA، متن و XPath ، اکنون می‌توانید با استفاده از انتخابگرهای سوراخ کردن ضبط کنید. این انتخابگرها مانند نمونه های CSS رفتار می کنند، اما می توانند ریشه های سایه را نیز سوراخ کنند.

یک ضبط جدید در صفحه ای با سایه DOM شروع کنید و بررسی کنید چک باکس. برای ضبط، انواع انتخابگر را سوراخ کنید . تعامل خود با عناصر را در سایه DOM ثبت کنید و مرحله مربوطه را بررسی کنید.

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

شماره Chromium: 1411188 .

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

Recorder یک گزینه صادرات جدید را معرفی می کند: Puppeteer (از جمله تجزیه و تحلیل Lighthouse) . با Puppeteer می‌توانید Chrome را خودکار و کنترل کنید. با Lighthouse ، می توانید عملکرد وب سایت خود را به تصویر بکشید و بهبود بخشید.

ضبط خود را باز کنید، کلیک کنید صادرات. صادر کنید ، گزینه جدید را انتخاب کنید و فایل .js را ذخیره کنید.

Export Puppeteer (از جمله تجزیه و تحلیل Lighthouse).

برای دریافت گزارش Lighthouse در فایل flow.report.html اسکریپت Puppeteer را اجرا کنید .

گزارش Lighthouse در کروم باز شد.

پسوندها را دریافت کنید

برای سفارشی کردن تجربه ضبط خود، به عنوان مثال، با گزینه های صادرات سفارشی، گزینه ها را کاوش کنید. با کلیک کردن بر روی دکمه افزودنی برای ضبط کننده دریافت کنید صادرات. صادرات > دریافت برنامه های افزودنی در یک ضبط.

گزینه Get extensions در منوی کشویی Export.

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

مسائل Chromium: 1417104 ، 1413168 .

عناصر > به‌روزرسانی‌های سبک

مستندات CSS

چند بار در روز اسناد مربوط به ویژگی های CSS را جستجو می کنید؟ اکنون پنجره Elements > Styles زمانی که ماوس را روی یک ویژگی می‌برید، توضیح کوتاهی را به شما نشان می‌دهد.

راهنمای ابزار با مستندات در یک ویژگی CSS.

راهنمای ابزار همچنین دارای یک پیوند بیشتر بدانید که شما را به یک مرجع MDN CSS در این ویژگی می برد.

اگر CSS را خوب بلد باشید، ممکن است نکات ابزار برای شما آزاردهنده باشد. برای خاموش کردن همه آنها، بررسی کنید چک باکس. نشون نده

برای روشن کردن مجدد آنها، بررسی کنید تنظیمات. تنظیمات > تنظیمات > عناصر > چک باکس. نمایش راهنمای ابزار مستندات CSS .

شماره Chromium: 1401107 .

پشتیبانی از تودرتو CSS

اکنون پنجره Elements > Styles دستور CSS Nesting را تشخیص می‌دهد و سبک‌های تودرتو را برای عناصر مناسب اعمال می‌کند.

شماره Chromium: 1172985 .

علامت گذاری نقاط ورود و خروج شرطی در کنسول

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

تغییراتی در نحوه نمایش کنسول اکنون پیام‌های ایجاد شده توسط نقاط شکست: با نمادها و پیوند منبع مناسب.

کنسول اکنون به جای اسکریپت‌های VM<number> که Chrome برای اجرای هر قطعه جاوا اسکریپت در V8 ایجاد می‌کند، پیوندهای لنگر مناسبی را به نقاط شکست در فایل‌های منبع می‌دهد.

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

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

شماره Chromium: 1027458 .

اسکریپت های نامربوط را در حین اشکال زدایی نادیده بگیرید

برای کمک به تمرکز بر روی مهم‌ترین بخش‌های کدتان، اکنون می‌توانید اسکریپت‌های نامربوط را مستقیماً از درخت فایل در صفحه منابع > صفحه به فهرست نادیده‌گیری اضافه کنید.

روی هر اسکریپت یا پوشه کلیک راست کرده و یکی از گزینه های مربوط به نادیده گرفتن را انتخاب کنید. ممکن است گزینه هایی برای افزودن یا حذف اسکریپت یا پوشه به لیست و از آن مشاهده کنید. Debugger اسکریپت های اضافه شده به لیست را نادیده می گیرد و آنها را در پشته تماس حذف می کند.

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

تمام اسکریپت‌ها و پوشه‌های فهرست‌شده نادیده گرفته شده در درخت فایل خاکستری می‌شوند.

اسکریپت ها و پوشه های فهرست شده نادیده گرفته شده اند خاکستری هستند، می توانید آنها را با یک گزینه آزمایشی در منوی کشویی گزینه های بیشتر پنهان کنید.

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

شماره Chromium: 883325 .

منسوخ شدن JavaScript Profiler شروع شد

در اوایل Chrome 58 ، تیم DevTools قصد داشت در نهایت JavaScript Profiler را منسوخ کند و توسعه دهندگان Node.js و Deno از پنل Performance برای پروفایل عملکرد CPU جاوا اسکریپت استفاده کنند.

این نسخه DevTools (112) منسوخ شدن چهار فاز JavaScript Profiler را آغاز می کند. پانل JavaScript Profiler اکنون بنر هشدار مربوطه را نشان می دهد.

بنر منسوخ در بالای Profiler.

به جای Profiler ، از پنل Performance برای پروفایل CPU استفاده کنید.

بیشتر بیاموزید و بازخورد خود را در RFC و crbug.com/1354548 مربوطه ارائه دهید.

شماره Chromium: 1417647 .

تقلید کنتراست کاهش یافته

برگه Rendering گزینه جدیدی را به فهرست نقص‌های دید شبیه‌سازی می‌افزاید — کنتراست کاهش یافته . با استفاده از این گزینه، می توانید متوجه شوید که وب سایت شما برای افرادی که حساسیت کنتراست کمتری دارند چگونه به نظر می رسد.

گزینه کنتراست کاهش‌یافته تحت عملکرد «Emulate vision Deficiencies» انتخاب شده است.

توجه داشته باشید که گزینه‌های فهرست به‌روزرسانی شده‌اند تا به شما بگوییم که گزینه‌ها چه رنگی را نشان می‌دهند.

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

مسائل Chromium: 1412719 ، 1412721 .

فانوس دریایی 10

پنل Lighthouse اکنون Lighthouse 10.0.1 را اجرا می کند. برای جزئیات بیشتر، موارد جدید در Lighthouse 10.0.1 را ببینید.

برای یادگیری اصول اولیه استفاده از پنل Lighthouse در DevTools، به Lighthouse: Optimize website speed مراجعه کنید.

فانوس دریایی > تنظیمات. > کادر انتخاب خالی ناوبری قدیمی اکنون به طور پیش فرض غیرفعال است. این گزینه از پیکربندی قدیمی Lighthouse در حالت ناوبری استفاده می کند.

ناوبری قدیمی غیرفعال شد.

Lighthouse 10 اکنون از Moto G Power به عنوان دستگاه شبیه سازی پیش فرض استفاده می کند. DevTools این دستگاه را به تنظیمات. تنظیمات > دستگاه‌ها

Moto G Power در لیست دستگاه ها.

شماره Chromium: 772558 .

یک اخطار کنسول برای حذف کنترلر واکشی کارگر سرویس بدون عملیات

Chrome 112 از کنترل‌کننده‌های واکشی کارگر سرویس بدون عملیات (بدون عملیات) صرف نظر می‌کند زیرا ممکن است پیمایش را کند کنند اما هدفی را دنبال نمی‌کنند. برای واجد شرایط بودن وب سایت شما به عنوان یک برنامه وب پیشرو ، دیگر نیازی به چنین کنترل کننده هایی نیست.

کنسول اکنون در صورت یافتن یک کنترل کننده واکشی بدون عملیات در وب سایت شما یک هشدار نشان می دهد. حذف آن را در نظر بگیرید.

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

شماره Chromium: 1347319 .

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

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

  • صفحه Sources > Breakpoints اکنون مسیرهای فایل متمایز کننده را در کنار نام فایل های مبهم نشان می دهد ( 1403924 ).
  • بخش اصلی در نمودار شعله پانل عملکرد اکنون CpuProfiler::StartProfiling به عنوان Profiler Overhead تعیین می کند ( 1358602 ).
  • DevTools تکمیل خودکار را بهبود بخشید:
    • منابع : تکمیل پیوسته هر کلمه ( 1320204 ).
    • کنسول : Arrow down اولین پیشنهاد را انتخاب می‌کند و پیشنهادها نکات Tab را دریافت می‌کنند ( 1276960 ).
  • DevTools یک نقطه انفصال شنونده رویداد اضافه کرد تا به شما اجازه دهد هنگام باز کردن یک پنجره تصویر در تصویر سند ( 1315352 ) مکث کنید.
  • DevTools راه‌حلی راه‌اندازی می‌کند که مصنوعات بسته وب Vue2 را به‌درستی به‌عنوان جاوا اسکریپت نمایش می‌دهد ( 1416562 ).
  • یک تنظیم کنسول نام بهتری پیدا می‌کند: پیام‌های console.trace() به طور خودکار گسترش یابد. ( 1139616 ).

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

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

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

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

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

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