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

آیا می خواهید اندازه گیری کنید که چقدر طول می کشد تا کاربران واقعی سفرهای مهم را در صفحات شما انجام دهند؟ در نظر بگیرید که کد خود را با 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 به‌طور خودکار اندازه‌گیری‌های زمان‌بندی کاربر را در بخش زمان‌بندی کاربر ضبط‌های عملکرد شما علامت‌گذاری می‌کند.

شکل 10 . بخش زمان بندی کاربر

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