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

کیسی باسکی

جدید در DevTools در Chrome 68:

نسخه ویدیویی یادداشت‌های انتشار را در زیر بخوانید یا تماشا کنید.

کنسول کمکی

Chrome 68 با چند ویژگی جدید کنسول مربوط به تکمیل خودکار و پیش نمایش ارائه می شود.

ارزیابی مشتاق

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

کنسول در حال چاپ نتیجه عملیات sort() قبل از اجرای صریح است.

شکل 1 . کنسول در حال چاپ نتیجه عملیات sort() قبل از اجرای صریح است.

برای فعال کردن Eager Evaluation:

  1. کنسول را باز کنید.
  2. تنظیمات کنسول را باز کنید دکمه تنظیمات کنسول .
  3. کادر بررسی Eager ارزیابی را فعال کنید.

DevTools مشتاق ارزیابی نمی کند که آیا عبارت باعث عوارض جانبی می شود یا خیر.

نکات استدلالی

همانطور که شما در حال تایپ توابع هستید، کنسول اکنون آرگومان هایی را که تابع انتظار دارد به شما نشان می دهد.

نکات استدلال در کنسول.

شکل 2 . نمونه های مختلفی از نکات استدلال در کنسول

یادداشت ها:

  • علامت سوال قبل از arg، مانند ?options ، نشان دهنده یک arg اختیاری است.
  • یک بیضی قبل از arg، مانند ...items ، نشان دهنده یک گسترش است.
  • برخی از توابع، مانند CSS.supports() ، چندین امضای آرگومان را می پذیرند.
تکمیل خودکار پس از اجرای تابع

پس از فعال کردن Eager Evaluation، کنسول اکنون به شما نشان می دهد که پس از تایپ یک تابع، کدام ویژگی ها و عملکردها در دسترس هستند.

پس از اجرای document.querySelector('p')، کنسول اکنون می تواند ویژگی ها و توابع موجود برای آن عنصر را به شما نشان دهد.

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

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

کلمات کلیدی ES2017، مانند await ، اکنون در رابط کاربری تکمیل خودکار کنسول در دسترس هستند.

کنسول اکنون «انتظار» را در رابط کاربری تکمیل خودکار خود پیشنهاد می‌کند.

شکل 4 . اکنون کنسول پیشنهاد می‌کند در رابط کاربری تکمیل خودکار خود await

ممیزی سریعتر و قابل اعتمادتر، UI جدید و ممیزی های جدید

Chrome 68 با Lighthouse 3.0 عرضه می شود. بخش های بعدی خلاصه ای از برخی از بزرگترین تغییرات است. برای داستان کامل به Announcing Lighthouse 3.0 مراجعه کنید.

ممیزی سریعتر و قابل اعتمادتر

Lighthouse 3.0 دارای یک موتور حسابرسی داخلی جدید با نام رمز Lantern است که ممیزی های شما را سریعتر و با واریانس کمتری بین اجراها تکمیل می کند.

رابط کاربری جدید

Lighthouse 3.0 همچنین به لطف همکاری بین تیم Lighthouse و Chrome UX (تحقیق و طراحی) یک رابط کاربری جدید به ارمغان می آورد.

رابط کاربری گزارش جدید در Lighthouse 3.0.

شکل 5 . رابط کاربری گزارش جدید در Lighthouse 3.0

ممیزی های جدید

Lighthouse 3.0 همچنین با 4 ممیزی جدید عرضه می شود:

  • اولین رنگ محتوایی
  • robots.txt معتبر نیست
  • از فرمت های ویدئویی برای محتوای متحرک استفاده کنید
  • از سفرهای رفت و برگشت متعدد و پرهزینه به هر مقصدی خودداری کنید
پشتیبانی BigInt

کروم 68 از یک عدد ابتدایی جدید به نام BigInt پشتیبانی می کند. BigInt به شما امکان می دهد اعداد صحیح را با دقت دلخواه نمایش دهید. آن را در کنسول امتحان کنید:

نمونه ای از BigInt در کنسول.

شکل 6 . نمونه ای از BigInt در کنسول

مسیر ملک را برای تماشا اضافه کنید

در حالی که در یک نقطه شکست متوقف شده‌اید، روی یک ویژگی در پنجره Scope کلیک راست کرده و گزینه Add property path to watch را انتخاب کنید تا آن ویژگی را به صفحه Watch اضافه کنید.

نمونه ای از مسیر افزودن ویژگی به تماشا.

شکل 7 . نمونه ای از مسیر افزودن ویژگی به تماشا

"نمایش مهرهای زمانی" به تنظیمات منتقل شد

چک باکس نمایش مهرهای زمانی قبلاً در تنظیمات کنسول دکمه تنظیمات کنسول به تنظیمات منتقل شده است.

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

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

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

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

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

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