چیزهای جدید در 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 پوشش داده شده است.

کروم 126 کروم 125 کروم 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