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

Jecelyn Yeen

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

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

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

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

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

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

پوشش جدید Core Web Vitals

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

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

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

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

• بزرگترین رنگ محتوا (LCP) : عملکرد بارگذاری را اندازه‌گیری می‌کند. برای ارائه یک تجربه کاربری خوب، LCP باید ظرف ۲.۵ ثانیه از زمان شروع بارگذاری صفحه رخ دهد.
• تأخیر ورودی اول (FID) : میزان تعامل را اندازه‌گیری می‌کند. برای ارائه یک تجربه کاربری خوب، صفحات باید FID کمتر از ۱۰۰ میلی‌ثانیه داشته باشند.
• تغییر چیدمان تجمعی (CLS) : پایداری بصری را اندازه‌گیری می‌کند. برای ارائه یک تجربه کاربری خوب، صفحات باید CLS کمتر از 0.1 را حفظ کنند.

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

مشکلات مربوط به به‌روزرسانی تب‌ها

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

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

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

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

تب «مسائل» اکنون مشکلات مربوط به فعالیت وب قابل اعتماد (Trusted Web Activity) را گزارش می‌دهد. هدف از این کار کمک به توسعه‌دهندگان برای درک و رفع مشکلات فعالیت وب قابل اعتماد سایت‌هایشان و بهبود کیفیت برنامه‌هایشان است.

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

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

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

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

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

صفحه جدید توکن‌های اعتماد در پنل برنامه‌ها

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

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

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

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

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

منوی Command را باز کنید، دستور Show Rendering را اجرا کنید و سپس منوی کشویی مربوط به ویژگی Emulate CSS media را تنظیم کنید.

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

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

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

اگر توضیحات مانیفست از ۳۲۴ کاراکتر بیشتر شود، پنجره مانیفست اکنون یک پیام هشدار نشان می‌دهد.

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

شماره کروم: ۱۱۴۶۴۵۰ ، ۱۱۶۹۶۸۹ ، ۹۶۵۸۰۲

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

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

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

بهبود عملکرد

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

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

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

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

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

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

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

مشکل کرومیوم: ۱۱۵۸۸۲۷

ستون جدید SameParty در پنل کوکی‌ها

بخش کوکی‌ها در پنل Application اکنون ویژگی SameParty کوکی‌ها را نمایش می‌دهد. ویژگی SameParty یک ویژگی بولی جدید است که نشان می‌دهد آیا یک کوکی باید در درخواست‌های ارسالی به مبداهای مجموعه‌های First-Party یکسان گنجانده شود یا خیر.

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

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

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

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

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

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

مشکل کرومیوم: ۱۱۷۷۶۸۵

منسوخ شدن Don't show Chrome Data Saver warning در منوی تنظیمات

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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