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

جسلین ین

ابزارهای جدید اشکال زدایی CSS flexbox

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

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

هنگامی که یک عنصر HTML در صفحه شما دارای display: flex یا display: inline-flex روی آن اعمال می شود، می توانید یک نشان flex را در کنار آن در پانل Elements مشاهده کنید. روی نشان کلیک کنید تا نمایش یک پوشش انعطاف پذیر در صفحه تغییر کند.

در قسمت Styles ، می‌توانید روی نماد جدید در کنار display: flex یا display: inline-flex تا ویرایشگر Flexbox باز شود. ویرایشگر Flexbox راهی سریع برای ویرایش ویژگی های flexbox ارائه می دهد. خودتان آن را امتحان کنید!

علاوه بر این، صفحه Layout دارای یک بخش Flexbox است که تمام عناصر flexbox را در صفحه نمایش می دهد. می توانید همپوشانی هر عنصر را تغییر دهید.

بخش Flexbox در قسمت Layout

مسائل Chromium: 1166710 ، 1175699

همپوشانی Core Web Vitals جدید

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

Core Web Vitals ابتکاری توسط Google برای ارائه راهنمایی یکپارچه برای سیگنال های با کیفیت است که برای ارائه یک تجربه کاربری عالی در وب ضروری است.

Command Menu را باز کنید، دستور Show Rendering را اجرا کنید و سپس کادر Core Web Vitals را فعال کنید.

پوشش در حال حاضر نمایش می دهد:

  • بزرگترین رنگ محتوایی (LCP) : عملکرد بارگذاری را اندازه گیری می کند. برای ارائه یک تجربه کاربری خوب، LCP باید در عرض 2.5 ثانیه از زمانی که صفحه برای اولین بار بارگذاری می شود، رخ دهد.
  • تاخیر ورودی اول (FID) : تعامل را اندازه می گیرد. برای ارائه یک تجربه کاربری خوب، صفحات باید FID کمتر از 100 میلی ثانیه داشته باشند.
  • تغییر چیدمان تجمعی (CLS) : ثبات بصری را اندازه گیری می کند. برای ارائه یک تجربه کاربری خوب، صفحات باید CLS کمتر از 0.1 داشته باشند.

همپوشانی Core Web Vitals

شماره Chromium: 1152089

مسائل به روز رسانی برگه

تعداد مشکلات به نوار وضعیت کنسول منتقل شد

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

تعداد مشکلات در نوار وضعیت کنسول

شماره Chromium: 1140516

مشکلات مربوط به فعالیت وب مورد اعتماد را گزارش کنید

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

یک فعالیت وب مورد اعتماد را باز کنید. سپس، با کلیک بر روی دکمه شمارش مشکلات در نوار وضعیت کنسول ، تب Issues را باز کنید تا مشکلات را مشاهده کنید. برای آشنایی بیشتر با نحوه ایجاد و استقرار Trusted Web Activity، این سخنرانی آندره را تماشا کنید.

مشکلات مربوط به فعالیت وب مورد اعتماد در برگه مسائل

شماره Chromium: 1147479

رشته ها را به صورت (معتبر) رشته های جاوا اسکریپت در کنسول قالب بندی کنید

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

رشته ها را به صورت (معتبر) رشته جاوا اسکریپت قالب بندی کنید

شماره Chromium: 1178530

پنل جدید Trust Tokens در پنل Application

DevTools اکنون تمام نشانه های اعتماد موجود را در زمینه مرور فعلی در صفحه جدید Trust Tokens ، در زیر پانل برنامه نمایش می دهد.

Trust Token یک API جدید برای کمک به مبارزه با کلاهبرداری و تشخیص ربات ها از انسان های واقعی، بدون ردیابی غیرفعال است. یاد بگیرید که چگونه با Trust Tokens شروع کنید .

قاب جدید Trust Tokens

شماره Chromium: 1126824

ویژگی رسانه رنگی CSS را شبیه سازی کنید

ویژگی رسانه رنگی CSS را شبیه سازی کنید

پرس و جو رسانه ای color-gamut به شما امکان می دهد محدوده تقریبی رنگ هایی را که توسط مرورگر و دستگاه خروجی پشتیبانی می شود، آزمایش کنید. به عنوان مثال، اگر پرس و جو رسانه color-gamut: p3 مطابقت داشته باشد، به این معنی است که دستگاه کاربر از فضای رنگی Display-P3 پشتیبانی می کند.

Command Menu را باز کنید، دستور Show Rendering را اجرا کنید و سپس کشویی Emulate CSS media feature color-gamut را تنظیم کنید.

شماره Chromium: 1073887

بهبود ابزار برنامه های وب پیشرفته

DevTools اکنون پیام هشدار نصب برنامه های پیشرفته وب پیشرفته (PWA) را با جزئیات بیشتر در کنسول به همراه پیوندی به مستندات نمایش می دهد.

هشدار نصب PWA

در صورتی که شرح مانیفست بیش از 324 کاراکتر باشد، پنجره Manifest اکنون یک پیام هشدار را نشان می دهد.

هشدار کوتاه کردن توضیحات PWA

علاوه بر این، در صورتی که اسکرین شات PWA با الزامات مطابقت نداشته باشد، صفحه Manifest اکنون یک پیام هشدار را نشان می دهد. در اینجا درباره ویژگی PWA screenshots و الزامات آن بیشتر بدانید.

هشدار اسکرین شات PWA

شماره Chromium: 1146450 , 1169689 , 965802

ستون جدید Remote Address Space در پانل Network

از ستون جدید Remote Address Space در پنل Network استفاده کنید تا فضای آدرس IP شبکه هر منبع شبکه را ببینید.

ستون جدید "فضای آدرس از راه دور".

شماره Chromium: 1128885

بهبود عملکرد

عملکرد بارگیری صفحه با DevTools باز شده اکنون بهبود یافته است. در برخی موارد شدید، شاهد بهبود عملکرد 10 برابری بودیم.

DevTools رد پشته‌ها را جمع‌آوری می‌کند و آن‌ها را به پیام‌های کنسول یا کارهای ناهمزمان متصل می‌کند تا در صورت بروز مشکل توسط توسعه‌دهنده مصرف شود. از آنجایی که این مجموعه باید به صورت همزمان در موتور مرورگر اتفاق بیفتد، جمع آوری ردیابی پشته آهسته می تواند به طور قابل توجهی سرعت صفحه را با DevTools باز کند. ما موفق شده‌ایم سربار مجموعه ردیابی پشته را به میزان قابل توجهی کاهش دهیم.

منتظر یک پست وبلاگ مهندسی دقیق تر باشید که در مورد پیاده سازی توضیح داده شده است.

مسائل Chromium: 1069425 ، 1077657

نمایش ویژگی های مجاز/غیر مجاز در نمای جزئیات قاب

نمای جزئیات قاب اکنون فهرستی از ویژگی های مجاز و غیرمجاز مرورگر را نشان می دهد که توسط خط مشی مجوزها کنترل می شود.

خط‌مشی مجوزها یک API پلتفرم وب است که به وب‌سایت این امکان را می‌دهد تا استفاده از ویژگی‌های مرورگر را در قاب خودش یا در iframe‌هایی که جاسازی می‌کند مجاز یا مسدود کند.

ویژگی‌های مجاز/غیر مجاز براساس خط‌مشی مجوز

شماره Chromium: 1158827

ستون SameParty جدید در قسمت Cookies

اکنون صفحه Cookies در پنل Application ویژگی SameParty کوکی ها را نشان می دهد. ویژگی SameParty یک ویژگی بولی جدید است که نشان می‌دهد آیا یک کوکی باید در درخواست‌های مبدا همان مجموعه‌های شخص اول گنجانده شود یا خیر.

ستون SameParty

شماره Chromium: 1161427

پشتیبانی غیر استاندارد fn.displayName منسوخ شده است

پشتیبانی از fn.displayName غیر استاندارد منسوخ شده است. به جای آن از fn.name استفاده کنید.

مثال استفاده از displayName

Chrome به طور سنتی از ویژگی غیر استاندارد fn.displayName به عنوان راهی برای توسعه دهندگان برای کنترل نام اشکال زدایی برای توابعی که در error.stack و در ردیابی پشته DevTools نشان داده می شوند، پشتیبانی می کند. در مثال بالا، Call Stack قبلاً noLongerSupport نشان می‌داد.

fn.displayName با fn.name استاندارد جایگزین کنید، که قابل تنظیم (از طریق Object.defineProperty ) در ECMAScript 2015 برای جایگزینی ویژگی غیر استاندارد fn.displayName است.

پشتیبانی از fn.displayName در موتورهای مرورگر غیرقابل اعتماد بوده است. این مجموعه ردیابی پشته را کند می کند، هزینه ای که توسعه دهندگان همیشه می پردازند صرف نظر از اینکه واقعاً از fn.displayName استفاده می کنند یا نه.

مثال استفاده از نام

شماره Chromium: 1177685

منسوخ شدن Don't show Chrome Data Saver warning

تنظیم Don't show Chrome Data Saver warning حذف شده است زیرا ذخیره‌کننده داده Chrome منسوخ شده است .

تنظیمات «هشدار بهینه‌سازی داده Chrome نشان داده نشود» منسوخ شده است

شماره Chromium: 1056922

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

گزارش خودکار مشکل کم کنتراست در برگه Issues

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

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

صفحه ای را با مشکلات کم کنتراست باز کنید (مثلاً این نسخه ی نمایشی ). سپس، با کلیک بر روی دکمه شمارش مشکلات در نوار وضعیت کنسول ، تب Issues را باز کنید تا مشکلات را مشاهده کنید.

گزارش خودکار مشکل با کنتراست کم

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

نمای درختی دسترسی کامل در پانل عناصر

اکنون می‌توانید برای مشاهده نمای درختی دسترسی کامل و جدید و بهبود یافته یک صفحه تغییر حالت دهید.

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

پس از فعال کردن آزمایش، یک دکمه جدید در پانل عناصر نشان داده می شود، برای جابجایی بین درخت DOM موجود و درخت دسترسی کامل کلیک کنید.

لطفا توجه داشته باشید که این یک آزمایش در مراحل اولیه است. ما قصد داریم عملکرد را در طول زمان بهبود بخشیده و گسترش دهیم.

نمای درختی دسترسی کامل

شماره Chromium: 887173

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

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

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

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

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

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