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

کیسی باسکی

خوش آمدید! از آخرین به‌روزرسانی ما، که برای Chrome 68 بود، حدود 12 هفته می‌گذرد. ​​ما از Chrome 69 صرفنظر کردیم زیرا ویژگی‌های جدید یا تغییرات رابط کاربری کافی برای تضمین یک پست نداشتیم.

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

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

بیان زنده در کنسول

زمانی که می‌خواهید مقدار آن را در زمان واقعی کنترل کنید، یک Live Expression را به بالای کنسول خود سنجاق کنید.

  1. روی Create Live Expression کلیک کنید ایجاد Live Expression . رابط کاربری Live Expression باز می شود.

    رابط کاربری Live Expression

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

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

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

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

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

    یک Live Expression ذخیره شده

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

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

گره های DOM را در حین ارزیابی مشتاق برجسته کنید

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

پس از تایپ document.activeElement در کنسول، یک گره در viewport برجسته می شود.

شکل 4 . از آنجایی که عبارت فعلی به یک گره ارزیابی می شود، آن گره در viewport برجسته می شود

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

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

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

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

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

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

اشکال زدایی مطمئن تر

Chrome 70 برخی از باگ‌هایی را که باعث ناپدید شدن یا فعال نشدن نقاط شکست می‌شدند، برطرف می‌کند.

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

throttling شبکه را از منوی فرمان فعال کنید

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

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

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

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

از UI تکمیل خودکار برای تایپ کردن عبارت Conditional Breakpoint خود سریعتر استفاده کنید.

UI تکمیل خودکار

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

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

شکستن رویدادهای AudioContext

از پنجره Event Liner Breakpoints برای مکث در اولین خط کنترل کننده رویداد چرخه حیات AudioContext استفاده کنید.

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

رویدادهای AudioContext در قسمت Event Liner Breakpoints.

شکل 8 . رویدادهای AudioContext در قسمت Event Liner Breakpoints

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

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

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

رابط کاربری ndb.

شکل 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 به‌طور خودکار اندازه‌گیری‌های زمان‌بندی کاربر را در بخش زمان‌بندی کاربر ضبط‌های عملکرد شما علامت‌گذاری می‌کند.

بخش زمان بندی کاربر

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

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

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

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

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

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

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

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