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

Kayce Basques

خوش آمدید! حدود ۱۲ هفته از آخرین به‌روزرسانی ما که برای کروم ۶۸ بود، می‌گذرد. ​​ما کروم ۶۹ را منتشر نکردیم زیرا ویژگی‌های جدید یا تغییرات رابط کاربری کافی برای انتشار در این پست نداشتیم.

ویژگی‌های جدید و تغییرات عمده‌ای که در DevTools در کروم ۷۰ به وجود می‌آیند عبارتند از:

• عبارات زنده در کنسول .
• گره‌های DOM را در طول ارزیابی مشتاق (Eager Evaluation) برجسته کنید .
• بهینه‌سازی پنل عملکرد
• اشکال‌زدایی قابل اعتمادتر .
• فعال کردن قابلیت تنظیم سرعت شبکه از طریق منوی فرمان (Command Menu) .
• نقاط شکست شرطی تکمیل خودکار .
• وقفه در رویدادهای AudioContext .
• اشکال‌زدایی برنامه‌های Node.js با ndb .
• نکته‌ی اضافی: تعاملات کاربر در دنیای واقعی را با رابط برنامه‌نویسی کاربردی زمان‌بندی کاربر (User Timing API) اندازه‌گیری کنید .

ادامه مطلب را بخوانید، یا نسخه ویدیویی این سند را تماشا کنید:

عبارات زنده در کنسول

وقتی می‌خواهید مقدار یک عبارت زنده (Live Expression) را به صورت زنده مشاهده کنید، آن را به بالای کنسول خود پین کنید.

1. روی ایجاد حالت زنده کلیک کنید رابط کاربری Live Expression باز می‌شود.

   

   شکل 1. رابط کاربری Live Expression

2. عبارتی را که می‌خواهید مانیتور کنید تایپ کنید.

   

   شکل 2. تایپ کردن Date.now() در رابط کاربری Live Expression

3. برای ذخیره حالت چهره خود، در خارج از رابط کاربری Live Expression کلیک کنید.

   

   شکل ۳. یک Live Expression ذخیره شده

مقادیر Live Expression هر 250 میلی ثانیه به‌روزرسانی می‌شوند.

برجسته کردن گره‌های DOM در طول ارزیابی مشتاق

عبارتی را تایپ کنید که به یک گره DOM در کنسول ارزیابی می‌شود و ارزیابی مشتاق اکنون آن گره را در پنجره نمایش برجسته می‌کند.

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

در اینجا چند عبارت وجود دارد که ممکن است مفید بدانید:

• document.activeElement برای برجسته کردن گره‌ای که در حال حاضر فوکوس دارد.
• document.querySelector(s) برای برجسته کردن یک گره دلخواه، که در آن s یک انتخابگر CSS است. این معادل قرار گرفتن ماوس روی یک گره در درخت DOM است.
• $0 برای هایلایت کردن هر گره‌ای که در حال حاضر در درخت DOM انتخاب شده است.
• $0.parentElement برای هایلایت کردن والد گره انتخاب شده فعلی.

بهینه‌سازی پنل عملکرد

هنگام پروفایل کردن یک صفحه بزرگ، پنل Performance قبلاً ده‌ها ثانیه برای پردازش و تجسم داده‌ها زمان صرف می‌کرد. کلیک روی یک رویداد برای کسب اطلاعات بیشتر در مورد آن در تب Summary نیز گاهی اوقات چندین ثانیه طول می‌کشید تا بارگذاری شود. پردازش و تجسم در Chrome 70 سریع‌تر شده است.

شکل 5. پردازش و بارگذاری داده‌های عملکرد

اشکال‌زدایی قابل اعتمادتر

کروم ۷۰ برخی از اشکالاتی را که باعث ناپدید شدن یا عدم فعال شدن نقاط توقف می‌شدند، برطرف می‌کند.

همچنین اشکالات مربوط به نقشه‌های منبع را برطرف می‌کند. برخی از کاربران TypeScript به DevTools دستور می‌دادند که هنگام بررسی کد، یک فایل TypeScript خاص را نادیده بگیرد و در عوض DevTools کل فایل جاوا اسکریپت همراه آن را نادیده می‌گرفت. این اصلاحات همچنین مشکلی را که باعث می‌شد پنل Sources به طور کلی کند اجرا شود، برطرف می‌کند.

فعال کردن قابلیت تنظیم سرعت شبکه از طریق منوی فرمان (Command Menu)

اکنون می‌توانید از منوی فرمان، تنظیم سرعت شبکه را روی 3G سریع یا 3G کند تنظیم کنید.

شکل 6. دستورات کنترل شبکه در منوی فرمان

نقاط شکست شرطی تکمیل خودکار

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

شکل 7. رابط کاربری تکمیل خودکار

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

وقفه در رویدادهای AudioContext

از پنجره‌ی نقاط شکست شنونده‌ی رویداد (Event Listener Breakpoints) برای مکث در خط اول یک کنترل‌کننده‌ی رویداد چرخه‌ی حیات AudioContext استفاده کنید.

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

شکل 8. رویدادهای AudioContext در پنجره نقاط شکست شنونده رویداد

اشکال‌زدایی برنامه‌های Node.js با ndb

ndb یک دیباگر جدید برای برنامه‌های Node.js است. علاوه بر ویژگی‌های معمول دیباگ که از طریق DevTools دریافت می‌کنید ، ndb موارد زیر را نیز ارائه می‌دهد:

• تشخیص و اتصال به فرآیندهای فرزند
• قرار دادن نقاط توقف قبل از نیاز به ماژول‌ها.
• ویرایش فایل‌ها در رابط کاربری DevTools.
• نادیده گرفتن تمام اسکریپت‌های خارج از دایرکتوری کاری فعلی به طور پیش‌فرض.

شکل 9. رابط کاربری ndb

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

نکته اضافی: تعاملات کاربر در دنیای واقعی را با رابط برنامه‌نویسی زمان‌بندی کاربر (User Timing API) اندازه‌گیری کنید

می‌خواهید مدت زمانی را که طول می‌کشد تا کاربران واقعی، مراحل حساس را در صفحات شما طی کنند، اندازه‌گیری کنید؟ کد خود را با رابط برنامه‌نویسی کاربردی زمان‌بندی کاربر (User Timing API) مجهز کنید.

برای مثال، فرض کنید می‌خواهید مدت زمانی را که یک کاربر قبل از کلیک روی دکمه فراخوان (CTA) در صفحه اصلی شما صرف می‌کند، اندازه‌گیری کنید. ابتدا، باید ابتدای مسیر را در یک کنترل‌کننده رویداد مرتبط با رویداد بارگذاری صفحه، مانند DOMContentLoaded ، علامت‌گذاری کنید:

document.addEventListener('DOMContentLoaded', () => {
  window.performance.mark('start');
});

سپس، پایان سفر را علامت‌گذاری می‌کنید و مدت زمان آن را هنگام کلیک روی دکمه محاسبه می‌کنید:

document.querySelector('#CTA').addEventListener('click', () => {
  window.performance.mark('end');
  window.performance.measure('CTA', 'start', 'end');
});

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

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

DevTools به طور خودکار اندازه‌گیری‌های زمان‌بندی کاربر شما را در بخش زمان‌بندی کاربر از ضبط‌های عملکرد شما علامت‌گذاری می‌کند.

شکل ۱۰. بخش زمان‌بندی کاربر

این همچنین هنگام اشکال‌زدایی یا بهینه‌سازی کد مفید است. برای مثال، اگر می‌خواهید مرحله خاصی از چرخه عمر خود را بهینه کنید، تابع window.performance.mark() را در ابتدا و انتهای تابع چرخه عمر خود فراخوانی کنید. React این کار را در حالت توسعه انجام می‌دهد.

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

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

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

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

• بازخوردها و درخواست‌های مربوط به ویژگی‌های جدید را برای ما در crbug.com ارسال کنید.
• با استفاده از more_vert مشکل DevTools را گزارش دهید. گزینه‌های بیشتر > راهنما > گزارش مشکل DevTools در DevTools.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد ویدیوهای یوتیوب «چه چیزهایی در DevTools جدید است» یا ویدیوهای یوتیوب «نکات DevTools» بنویسید.

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

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