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

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

به‌روزرسانی‌های ضبط‌کننده

پشتیبانی از افزونه‌های بازپخش

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

افزونه‌ی نمونه را امتحان کنید. گزینه‌ی new custom replay را انتخاب کنید تا رابط کاربری custom replay باز شود.

رابط کاربری بازپخش سفارشی.

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

مشکل کروم: ۱۴۰۰۲۴۳

ضبط با انتخابگرهای سوراخ

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

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

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

شماره کروم: ۱۴۱۱۱۸۸ .

با استفاده از تحلیل Lighthouse، اسکریپت را به صورت Puppeteer خروجی بگیرید

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

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

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

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

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

دریافت افزونه‌ها

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

گزینه‌ی «دریافت افزونه‌ها» در منوی کشویی «صادرات».

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

مشکلات کروم: ۱۴۱۷۱۰۴ ، ۱۴۱۳۱۶۸ .

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

مستندات CSS

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

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

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

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

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

شماره کروم: 1401107

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

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

شماره کروم: 1172985

علامت‌گذاری نقاط ثبت وقایع و نقاط توقف شرطی در کنسول

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

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

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

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

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

مشکل کروم: ۱۰۲۷۴۵۸

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

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

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

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

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

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

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

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

منسوخ شدن JavaScript Profiler آغاز شد

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

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

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

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

برای کسب اطلاعات بیشتر و ارائه بازخورد، به RFC مربوطه و crbug.com/1354548 مراجعه کنید.

شماره کروم: ۱۴۱۷۶۴۷ .

کنتراست کاهش یافته را شبیه‌سازی کنید

تب رندرینگ (Rendering) گزینه جدیدی به فهرست کمبودهای بینایی اضافه می‌کند - کنتراست کاهش‌یافته (Reduced contrast ). با این گزینه، می‌توانید بفهمید که وب‌سایت شما برای افرادی که حساسیت کنتراست کمتری دارند، چگونه به نظر می‌رسد.

گزینه کنتراست کاهش‌یافته که در بخش «شبیه‌سازی نقص‌های بینایی» انتخاب شده است.

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

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

مشکلات کرومیوم: ۱۴۱۲۷۱۹ ، ۱۴۱۲۷۲۱ .

فانوس دریایی ۱۰

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

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

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

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

لایت‌هاوس ۱۰ اکنون از موتو جی پاور به عنوان دستگاه شبیه‌سازی پیش‌فرض استفاده می‌کند. DevTools این دستگاه را به تنظیمات. تنظیمات > دستگاه‌ها .

موتو جی پاور در فهرست دستگاه‌ها.

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

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

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

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

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

شماره کروم: ۱۳۴۷۳۱۹

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

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

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

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

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

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

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

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

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