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

Jecelyn Yeen

راه‌اندازی سریع‌تر DevTools

راه‌اندازی DevTools اکنون از نظر کامپایل جاوا اسکریپت حدود ۳۷٪ سریع‌تر است (از ۶.۹ ثانیه به ۵ ثانیه)! 🎉

تیم بهینه‌سازی‌هایی را برای کاهش سربار عملکرد سریال‌سازی، تجزیه و حذف سریال‌سازی در طول راه‌اندازی انجام داد.

به زودی یک پست وبلاگ مهندسی منتشر خواهد شد که جزئیات پیاده‌سازی را توضیح می‌دهد. منتظر باشید!

مشکل کرومیوم: ۱۰۲۹۴۲۷

ابزارهای جدید تجسم زاویه CSS

DevTools اکنون پشتیبانی بهتری برای اشکال‌زدایی زاویه CSS دارد!

وقتی یک عنصر HTML در صفحه شما دارای زاویه CSS باشد (مثلاً background: linear-gradient(angle, color-stop1, color-stop2) , transform: rotate(angle) )، یک آیکون ساعت در کنار زاویه در پنل Styles نشان داده می‌شود. برای تغییر حالت ساعت، روی آیکون ساعت کلیک کنید. برای تغییر زاویه، در هر جایی از ساعت کلیک کنید یا سوزن را بکشید!

میانبرهای ماوس و صفحه کلید نیز برای تغییر مقدار زاویه وجود دارد، برای کسب اطلاعات بیشتر به مستندات ما مراجعه کنید!

مشکلات کرومیوم: ۱۱۲۶۱۷۸ ، ۱۱۳۸۶۳۳

انواع تصویر پشتیبانی نشده را شبیه‌سازی کنید

DevTools دو شبیه‌سازی جدید در تب Rendering اضافه کرده است که به شما امکان می‌دهد فرمت‌های تصویری AVIF و WebP را غیرفعال کنید. این شبیه‌سازی‌های جدید، آزمایش سناریوهای مختلف بارگذاری تصویر را بدون نیاز به تغییر مرورگر، برای توسعه‌دهندگان آسان‌تر می‌کند.

فرض کنید کد HTML زیر را برای نمایش یک تصویر با فرمت AVIF و WebP برای مرورگرهای جدیدتر و یک تصویر PNG جایگزین برای مرورگرهای قدیمی‌تر داریم.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

تب رندرینگ را باز کنید، «غیرفعال کردن فرمت تصویر AVIF» را انتخاب کنید و صفحه را رفرش کنید. نشانگر ماوس را روی img src نگه دارید. src تصویر فعلی ( currentSrc ) اکنون تصویر WebP جایگزین است.

مشکل کرومیوم: ۱۱۳۰۵۵۶

شبیه‌سازی اندازه سهمیه ذخیره‌سازی در پنل ذخیره‌سازی

اکنون می‌توانید اندازه سهمیه ذخیره‌سازی را در پنل Storage تغییر دهید. این ویژگی به شما امکان می‌دهد دستگاه‌های مختلف را شبیه‌سازی کرده و رفتار برنامه‌های خود را در سناریوهای کمبود دیسک آزمایش کنید.

به برنامه > ذخیره‌سازی بروید، کادر انتخاب شبیه‌سازی سهمیه ذخیره‌سازی سفارشی را فعال کنید و هر عدد معتبری را برای شبیه‌سازی سهمیه ذخیره‌سازی وارد کنید.

مشکلات کرومیوم: ۹۴۵۷۸۶ ، ۱۱۴۶۹۸۵

خط جدید Web Vitals در ضبط‌های پنل Performance

ضبط‌های عملکرد اکنون گزینه‌ای برای نمایش اطلاعات Web Vitals دارند.

پس از ثبت عملکرد بارگذاری خود، کادر انتخاب Web Vitals را در پنل Performance فعال کنید تا مسیر جدید Web Vitals را مشاهده کنید.

این خط در حال حاضر اطلاعات Web Vitals مانند First Contentful Paint (FCP)، Largest Contentful Paint (LCP) و Layout Shift (LS) را نمایش می‌دهد.

برای کسب اطلاعات بیشتر در مورد چگونگی بهینه‌سازی تجربه کاربری با استفاده از معیارهای Web Vitals، به web.dev/vitals مراجعه کنید.

مشکل کروم: نامشخص

گزارش خطاهای CORS در پنل شبکه

DevTools اکنون خطای CORS را هنگام عدم موفقیت درخواست شبکه به دلیل اشتراک‌گذاری منابع بین‌منبعی (CORS) نشان می‌دهد.

در پنل شبکه ، درخواست شبکه CORS ناموفق را مشاهده کنید. ستون وضعیت "خطای CORS" را نشان می‌دهد. با نگه داشتن ماوس روی خطا، اکنون راهنمای ابزار، کد خطا را نشان می‌دهد. پیش از این، DevTools فقط وضعیت عمومی "(failed)" را برای خطاهای CORS نشان می‌داد.

این، پایه و اساس پیشرفت‌های بعدی ما در ارائه توضیحات دقیق‌تر از مسائل CORS را بنا می‌نهد!

مشکل کرومیوم: ۱۱۴۱۸۲۴

به‌روزرسانی‌های نمای جزئیات قاب

اطلاعات ایزولاسیون بین مبدائی در نمای جزئیات Frame

وضعیت ایزوله بودن بین مبدا (cross-origin isolation) اکنون در بخش امنیت و ایزوله (Security & Isolation) نمایش داده می‌شود.

بخش جدیدِ در دسترس بودن API ، در دسترس بودن SharedArrayBuffer ها (SAB) و اینکه آیا می‌توان آنها را با استفاده از postMessage() به اشتراک گذاشت یا خیر را نمایش می‌دهد.

اگر SAB و postMessage() در حال حاضر در دسترس باشند، اما context ایزوله شده بین مبدا (cross-origin isolation) نباشد، یک هشدار منسوخ شدن نمایش داده می‌شود. برای کسب اطلاعات بیشتر در مورد ایزوله شدن بین مبدا و دلیل نیاز به آن برای ویژگی‌هایی مانند SharedArrayBuffers به این مقاله مراجعه کنید.

مشکل کرومیوم: ۱۱۳۹۸۹۹

اطلاعات جدید Web Workers در نمای جزئیات Frame

DevTools اکنون وب ورکرهای اختصاصی را در زیر فریمی که آنها را ایجاد می‌کند، نمایش می‌دهد.

در پنل Application ، یک قاب با web workerها را باز کنید، سپس یک worker را در زیر درخت Workers انتخاب کنید تا جزئیات web worker را مشاهده کنید.

مشکلات کرومیوم: ۱۱۲۲۵۰۷ ، ۱۰۵۱۴۶۶

نمایش جزئیات قاب بازشو برای پنجره‌های باز شده

اکنون می‌توانید جزئیات مربوط به اینکه کدام فریم باعث باز شدن پنجره دیگری شده است را مشاهده کنید.

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

مشکل کرومیوم: ۱۱۰۷۷۶۶

پنل شبکه را از پنل Service Workers باز کنید.

مشاهده اطلاعات مسیریابی درخواست‌های تمام سرویس ورکر (SW) با لینک جدید درخواست‌های شبکه . این قابلیت به توسعه‌دهندگان امکان می‌دهد تا هنگام اشکال‌زدایی SW، زمینه بیشتری را فراهم کنند.

به Application > Service Workers بروید، روی درخواست‌های شبکه یک SW کلیک کنید. پنل Network در پنل پایین باز می‌شود و تمام درخواست‌های مربوط به Service Worker را نمایش می‌دهد (درخواست‌های شبکه با عبارت "is:service-worker-intercepted" فیلتر می‌شوند).

مشکل کروم: نامشخص

گزینه‌های کپی جدید در پنل شبکه

کپی کردن مقدار ویژگی

گزینه جدید «کپی مقدار» در منوی زمینه به شما امکان می‌دهد مقدار ویژگی یک درخواست شبکه را کپی کنید.

در پنل شبکه ، روی یک درخواست شبکه کلیک کنید تا پنل هدرها باز شود. روی یکی از ویژگی‌های زیر این بخش کلیک راست کنید: درخواست بار داده (JSON) پارامترهای رشته پرس و جو داده‌های فرم هدرهای درخواست هدرهای پاسخ

سپس، می‌توانید گزینه‌ی «کپی مقدار» (Copy value) را انتخاب کنید تا مقدار ویژگی در کلیپ‌بورد شما کپی شود.

مشکل کرومیوم: ۱۱۳۲۰۸۴

کپی stacktrace برای آغازگر شبکه

روی یک درخواست شبکه کلیک راست کنید، سپس گزینه Copy stacktrace را انتخاب کنید تا stacktrace در کلیپ‌بورد شما کپی شود.

مشکل کرومیوم: ۱۱۳۹۶۱۵

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

پیش‌نمایش مقدار متغیر Wasm با بردن ماوس

وقتی در حالت توقف موقت در یک نقطه توقف، در فرآیند جداسازی WebAssembly (Wasm) نشانگر ماوس را روی یک متغیر نگه می‌دارید، DevTools اکنون مقدار فعلی متغیر را نشان می‌دهد.

در پنل منابع ، یک فایل Wasm باز کنید، یک نقطه توقف (breakpoint) قرار دهید و صفحه را رفرش کنید. برای دیدن مقدار، موس را روی یک متغیر نگه دارید.

مشکلات کرومیوم: ۱۰۵۸۸۳۶ ، ۱۰۷۱۴۳۲

متغیر Wasm را در کنسول ارزیابی کنید

اکنون می‌توانید متغیر Wasm را در کنسول در حالی که در یک نقطه توقف متوقف شده است، ارزیابی کنید.

در این مثال، ما یک نقطه توقف (breakpoint) روی خط local.get $input ‎ قرار می‌دهیم. هنگام اشکال‌زدایی، تایپ $input ‎ در کنسول مقدار فعلی متغیر را برمی‌گرداند که در این مورد 4 است.

مشکل کرومیوم: ۱۱۲۷۹۱۴

واحدهای اندازه‌گیری ثابت برای اندازه فایل/حافظه

DevTools اکنون به طور مداوم از kB برای نمایش اندازه فایل/حافظه استفاده می‌کند. قبلاً DevTools کیلوبایت (۱۰۰۰ بایت) و کیلوبایت (۱۰۲۴ بایت) را با هم ترکیب می‌کرد. برای مثال، پنل Network قبلاً از برچسب‌های "kB" استفاده می‌کرد اما در واقع محاسبات را با استفاده از KiB انجام می‌داد که باعث سردرگمی بی‌مورد می‌شد.

مشکل کرومیوم: ۱۰۳۵۳۰۹

عناصر شبه را در پنل عناصر برجسته کنید

DevTools کنتراست رنگ شبه عناصر را افزایش داده است تا به شما در تشخیص بهتر آنها کمک کند.

مشکل کرومیوم: ۱۱۴۳۸۳۳

ویژگی‌های آزمایشی

ابزارهای اشکال‌زدایی CSS Flexbox

ابزارهای اشکال‌زدایی Flexbox از راه می‌رسند!

برای شروع، DevTools اکنون برای عناصری که display: flex روی آنها اعمال شده است، یک نشان flex در پنل Elements نشان می‌دهد.

علاوه بر آن، آیکون‌های ترازبندی جدید در ویژگی‌های flexbox زیر اضافه شده‌اند:

• flex-direction
• align-items
• align-content
• align-self
• justify-items
• justify-content

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

• flex-direction
• direction
• writing-mode

این آیکون‌ها به شما کمک می‌کنند تا طرح‌بندی flexbox صفحه را بهتر تجسم کنید.

در اینجا سند طراحی ویژگی‌های ابزار Flexbox آمده است. به زودی ویژگی‌های بیشتری اضافه خواهد شد.

امتحانش کنید و نظرتان را با ما در میان بگذارید !

مشکلات کروم: ۱۱۴۴۰۹۰ ، ۱۱۳۹۹۴۵

میانبرهای صفحه کلید آکوردها را سفارشی کنید

DevTools از زمان آخرین انتشار، پشتیبانی آزمایشی برای سفارشی‌سازی میانبرهای صفحه‌کلید را اضافه کرده است.

اکنون می‌توانید آکوردها (یا همان میانبرهای چندکلید) را در ویرایشگر میانبر ایجاد کنید.

به تنظیمات > میانبرها بروید، نشانگر ماوس را روی یک دستور نگه دارید و روی دکمه ویرایش (آیکون خودکار) کلیک کنید تا میانبر آکوردها را سفارشی کنید.

مشکل کرومیوم: ۱۷۴۳۰۹

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

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

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

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

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

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

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