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

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

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

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

کروم 124

کروم 123

کروم 122

کروم 121

کروم 120

کروم 119

کروم 118

کروم 117

کروم 116

کروم 115

کروم 114

کروم 113

کروم 112

کروم 111

کروم 110

کروم 109

کروم 108

کروم 107

کروم 106

کروم 105

کروم 104

کروم 103

کروم 102

کروم 101

کروم 100

کروم 99

کروم 98

کروم 97

کروم 96

کروم 95

کروم 94

کروم 93

کروم 92

کروم 91

کروم 90

کروم 89

کروم 88

کروم 87

کروم 86

کروم 85

کروم 84

کروم 83

کروم 82

Chrome 82 لغو شد .

کروم 81

کروم 80

کروم 79

کروم 78

کروم 77

کروم 76

کروم 75

کروم 74

کروم 73

کروم 72

کروم 71

کروم 70

کروم 68

کروم 67

کروم 66

کروم 65

کروم 64

کروم 63

کروم 62

کروم 61

کروم 60

کروم 59