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

Kayce Basques

قابلیت‌های جدید DevTools در کروم ۶۸:

• ارزیابی مشتاقانه . همزمان با تایپ عبارات، کنسول نتیجه را پیش‌نمایش می‌دهد.
• نکات مربوط به آرگومان . همانطور که توابع را تایپ می‌کنید، کنسول آرگومان‌های مورد انتظار برای آن تابع را به شما نشان می‌دهد.
• تکمیل خودکار تابع . پس از تایپ فراخوانی تابعی مانند document.querySelector('p') ، کنسول توابع و ویژگی‌هایی را که مقدار بازگشتی از آنها پشتیبانی می‌کند، به شما نشان می‌دهد.
• کلمات کلیدی ES2017 در کنسول . کلمات کلیدی مانند await اکنون در رابط کاربری تکمیل خودکار کنسول در دسترس هستند.
• لایت‌هاوس ۳.۰ در پنل حسابرسی . حسابرسی‌های سریع‌تر و منسجم‌تر، رابط کاربری جدید و حسابرسی‌های جدید.
• پشتیبانی BigInt . عدد صحیح با دقت دلخواه جدید جاوا اسکریپت را در کنسول امتحان کنید.
• افزودن مسیرهای ویژگی به پنل Watch . ویژگی‌های پنل Scope را به پنل Watch اضافه کنید.
• «نمایش مهرهای زمانی» به تنظیمات منتقل شد .

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

کنسول کمکی

کروم ۶۸ با چند ویژگی جدید کنسول مرتبط با تکمیل خودکار و پیش‌نمایش عرضه می‌شود.

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

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

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

برای فعال کردن ارزیابی مشتاقانه:

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

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

نکات استدلال

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

شکل ۲. نمونه‌های مختلف از نکات مربوط به آرگومان‌ها در کنسول

یادداشت‌ها:

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

تکمیل خودکار پس از اجرای توابع

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

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

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

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

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

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

کروم ۶۸ با Lighthouse 3.0 عرضه می‌شود. بخش‌های بعدی خلاصه‌ای از برخی از بزرگترین تغییرات است. برای مشاهده‌ی گزارش کامل به بخش «اعلام Lighthouse 3.0» مراجعه کنید.

حسابرسی‌های سریع‌تر و قابل اعتمادتر

لایت‌هاوس ۳.۰ یک موتور حسابرسی داخلی جدید با نام رمز لنترن دارد که حسابرسی‌های شما را سریع‌تر و با واریانس کمتر بین اجراها انجام می‌دهد.

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

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

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

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

لایت‌هاوس ۳.۰ همچنین با ۴ ممیزی جدید عرضه می‌شود:

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

پشتیبانی BigInt

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

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

مسیر ویژگی را برای تماشا اضافه کنید

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

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

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

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

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

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

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

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

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

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

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