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

جسلین ین

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

راه اندازی DevTools در حال حاضر ~37٪ سریعتر از نظر کامپایل جاوا اسکریپت است (از 6.9 به 5s)! 🎉

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

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

شماره Chromium: 1029427

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

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

زاویه CSS

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

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

مسائل Chromium: 1126178 ، 1138633

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

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>

تب Rendering را باز کنید، "Disable AVIF image format" را انتخاب کنید و صفحه را بازخوانی کنید. نشانگر را روی img src نگه دارید. تصویر فعلی src ( currentSrc ) اکنون تصویر بازگشتی WebP است.

شبیه سازی انواع تصاویر

شماره Chromium: 1130556

اندازه سهمیه ذخیره سازی را در قسمت Storage شبیه سازی کنید

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

به Application > Storage بروید، کادر بررسی Simulate custom storage quota را فعال کنید و هر عدد معتبری را برای شبیه سازی سهمیه ذخیره سازی وارد کنید.

اندازه سهمیه ذخیره سازی را شبیه سازی کنید

مسائل Chromium: 945786 ، 1146985

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

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

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

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

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

خط وب ویتالز

مشکل Chromium: غیر مجاز

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

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

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

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

خطاهای CORS

شماره Chromium: 1141824

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

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

وضعیت جدا شده از مبدا متقاطع اکنون در بخش Security & Isolation نمایش داده می شود.

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

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

اطلاعات مبدا متقابل

شماره Chromium: 1139899

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

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

در پانل Application ، یک فریم را با وب‌کارگر گسترش دهید، سپس یک worker را در زیر درخت Workers انتخاب کنید تا جزئیات وب‌کارگر را مشاهده کنید.

اطلاعات کارگران وب

مسائل Chromium: 1122507 ، 1051466

نمایش جزئیات قاب بازکن برای پنجره های باز

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

برای مشاهده جزئیات پنجره، پنجره باز شده را در زیر درخت Frames انتخاب کنید. روی پیوند Opener Frame کلیک کنید تا بازکننده در پنل Elements نمایان شود.

جزئیات قاب بازکن

شماره Chromium: 1107766

پنل Network را از قسمت Service Workers باز کنید

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

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

پنل Network را از Service Workers باز کنید

مشکل Chromium: N/A

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

کپی ارزش ملک

گزینه جدید "Copy value" در منوی زمینه به شما امکان می دهد ارزش ویژگی درخواست شبکه را کپی کنید.

کپی ارزش ملک

در پنل Network ، روی یک درخواست شبکه کلیک کنید تا پنجره Headers باز شود. روی یکی از خصوصیات زیر این بخش کلیک راست کنید: Request payload (JSON) Form Query Data Parameters String Request Headers Response Headers

سپس، می توانید مقدار Copy را انتخاب کنید تا مقدار ویژگی را در کلیپ بورد خود کپی کنید.

شماره Chromium: 1132084

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

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

stacktrace را کپی کنید

شماره کرومیوم: 1139615

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

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

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

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

پیش نمایش متغیر Wasm روی ماوس

مسائل Chromium: 1058836 ، 1071432

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

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

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

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

شماره Chromium: 1127914

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

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

شماره Chromium: 1035309

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

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

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

شماره Chromium: 1143833

ویژگی های تجربی

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

ابزارهای اشکال زدایی Flexbox در راه است!

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

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

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

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

  • flex-direction
  • direction
  • writing-mode

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

اشکال زدایی CSS Flex

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

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

مسائل Chromium: 1144090 ، 1139945

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

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

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

به Settings > Shortcuts بروید، ماوس را روی یک فرمان نگه دارید و روی دکمه Edit (نماد قلم) کلیک کنید تا میانبر آکوردها را سفارشی کنید.

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

شماره Chromium: 174309

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

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

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

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

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

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