این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

Kayce Basques

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

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

بیان زنده در کنسول .
گره های DOM را در حین ارزیابی مشتاق برجسته کنید .
بهینه سازی پنل عملکرد
اشکال زدایی قابل اطمینان تر
throttling شبکه را از منوی فرمان فعال کنید .
تکمیل خودکار نقاط انفصال شرطی
شکستن رویدادهای AudioContext .
اشکال زدایی برنامه های Node.js با ndb .
نکته پاداش: تعاملات کاربر دنیای واقعی را با User Timing API اندازه گیری کنید .

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

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

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

روی Create Live Expression کلیک کنید . رابط کاربری Live Expression باز می شود.
شکل 1 . رابط کاربری Live Expression
عبارتی را که می خواهید نظارت کنید تایپ کنید.
شکل 2 . Date.now() را در رابط کاربری Live Expression تایپ کنید
برای ذخیره عبارت خود خارج از رابط کاربری Live Expression کلیک کنید.
شکل 3 . یک Live Expression ذخیره شده

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

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

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

توجه: گره هایلایت شده تنها زمانی که شما تایپ می کنید به روز می شود . در یک بازه زمانی به روز نمی شود. به عنوان مثال، اگر document.activeElement را تایپ کنید، که عنصر را در فوکوس ردیابی می کند، و سپس برگه را در صفحه قرار دهید، DevTools همچنان گره ای را که هنگام تایپ اولیه عبارت فعال بوده، برجسته می کند.

پس از تایپ 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 استفاده کنید.

پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
با استفاده از گزینه های بیشتر ، مشکل DevTools را گزارش کنید > راهنما > گزارش مشکلات DevTools در DevTools.
توییت در @ChromeDevTools .
نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.