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

Jecelyn Yeen

پنل رسانه‌های جدید

DevTools اکنون اطلاعات پخش‌کننده‌های رسانه را در پنل Media نمایش می‌دهد.

قبل از پنل رسانه جدید در DevTools، اطلاعات ثبت وقایع و اشکال‌زدایی مربوط به پخش‌کننده‌های ویدیو را می‌شد در chrome://media-internals پیدا کرد.

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

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

گرفتن اسکرین‌شات از گره‌ها از طریق منوی زمینه پنل Elements

اکنون می‌توانید از طریق منوی زمینه در پنل Elements، از گره‌ها اسکرین‌شات بگیرید.

برای مثال، می‌توانید با کلیک راست روی عنصر و انتخاب گزینه Capture node screenshot از فهرست مطالب، اسکرین‌شات بگیرید.

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

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

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

مشکلات کوکی‌های شخص ثالث اکنون به طور پیش‌فرض در برگه «مشکلات» پنهان هستند. برای مشاهده آنها، کادر انتخاب جدید «شامل مشکلات کوکی شخص ثالث» را فعال کنید.

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

فونت‌های محلی از دست رفته را شبیه‌سازی کنید

تب Rendering را باز کنید و از ویژگی جدید Disable local fonts برای شبیه‌سازی منابع local() از دست رفته در قوانین @font-face استفاده کنید.

برای مثال، وقتی فونت "Rubik" روی دستگاه شما نصب شده باشد و دستور @font-face src ‎ از آن به عنوان یک فونت local() ‎ استفاده کند، کروم از فایل فونت محلی دستگاه شما استفاده می‌کند.

وقتی غیرفعال کردن فونت‌های محلی فعال باشد، DevTools فونت‌های local() را نادیده می‌گیرد و آنها را از شبکه دریافت می‌کند.

اغلب اوقات، توسعه‌دهندگان و طراحان در طول توسعه از دو نسخه مختلف از یک فونت استفاده می‌کنند:

• یک فونت محلی برای ابزارهای طراحی شما، و
• یک فونت وب برای کد شما

غیرفعال کردن فونت‌های محلی، انجام کارهای زیر را برای شما آسان‌تر می‌کند:

• اشکال‌زدایی و اندازه‌گیری عملکرد بارگذاری و بهینه‌سازی فونت‌های وب
• صحت قوانین CSS @font-face خود را تأیید کنید
• کشف هرگونه تفاوت بین فونت‌های وب و نسخه‌های محلی آنها

مشکل کرومیوم: ۳۸۴۹۶۸

تقلید از کاربران غیرفعال

API تشخیص حالت بیکاری به توسعه‌دهندگان اجازه می‌دهد تا کاربران غیرفعال را شناسایی کرده و به تغییرات حالت بیکاری واکنش نشان دهند. اکنون می‌توانید از DevTools برای شبیه‌سازی تغییرات حالت بیکاری در تب Sensors برای هر دو حالت کاربر و صفحه نمایش استفاده کنید، به جای اینکه منتظر تغییر حالت بیکاری واقعی باشید. می‌توانید تب Sensors را از Drawer باز کنید.

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

شبیه‌سازی prefers-reduced-data

کوئری رسانه‌ای prefers-reduced-data تشخیص می‌دهد که آیا کاربر ترجیح می‌دهد محتوای جایگزینی که از داده‌های کمتری برای رندر صفحه استفاده می‌کند، دریافت کند یا خیر.

اکنون می‌توانید از DevTools برای شبیه‌سازی کوئری رسانه‌ای prefers-reduced-data استفاده کنید.

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

پشتیبانی از ویژگی‌های جدید جاوا اسکریپت

DevTools اکنون پشتیبانی بهتری از برخی از جدیدترین ویژگی‌های زبان جاوا اسکریپت دارد:

• عملگرهای انتساب منطقی - DevTools اکنون از انتساب منطقی با عملگرهای جدید &&= ، ||= و ??= در پنل‌های Console و Sources پشتیبانی می‌کند.
• چاپ زیبا جداکننده‌های عددی - DevTools اکنون جداکننده‌های عددی را در پنل منابع به درستی چاپ زیبا می‌کند.

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

فانوس دریایی ۶.۲ در پنل فانوس دریایی

پنل Lighthouse اکنون Lighthouse 6.2 را اجرا می‌کند. برای مشاهده لیست کامل تغییرات ، یادداشت‌های انتشار را بررسی کنید.

ممیزی‌های جدید در Lighthouse 6.2:

• از وظایف طولانی نخ اصلی اجتناب کنید . طولانی‌ترین وظایف روی نخ اصلی را گزارش می‌دهد که برای شناسایی بدترین عوامل مؤثر در تأخیر ورودی مفید است.
• لینک‌ها قابل خزش هستند . بررسی کنید که آیا ویژگی href عناصر لنگر به مقصد مناسبی لینک می‌دهد یا خیر، تا بتوان لینک‌ها را کشف کرد.
• عناصر تصویر بدون اندازه - بررسی کنید که آیا width و height صریح برای عناصر تصویر تنظیم شده است یا خیر. اندازه صریح تصویر می‌تواند تغییرات طرح‌بندی را کاهش داده و CLS را بهبود بخشد.
• از انیمیشن‌های غیرکامپوزیتی اجتناب کنید . انیمیشن‌های غیرکامپوزیتی که بی‌کیفیت به نظر می‌رسند و CLS را کاهش می‌دهند، گزارش می‌دهد.
• به رویدادهای unload گوش می‌دهد . رویداد unload را گزارش می‌دهد. به جای آن، استفاده از رویدادهای pagehide یا visibilitychange در نظر بگیرید زیرا رویداد unload به طور قابل اعتمادی اجرا نمی‌شود.

ممیزی‌های به‌روزرسانی‌شده در Lighthouse 6.2:

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

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

منسوخ شدن فهرست «سایر خاستگاه‌ها» در پنل Service Workers

DevTools اکنون لینکی برای مشاهده لیست کامل سرویس ورکرها از سایر منابع در یک تب جدید مرورگر ارائه می‌دهد - chrome://serviceworker-internals/?devtools .

پیش از این، DevTools فهرستی را به صورت تو در تو در زیر پنل Application > Service worker نمایش می‌داد.

مشکل کرومیوم: ۸۰۷۴۴۰

نمایش خلاصه پوشش برای موارد فیلتر شده

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

در مثال زیر توجه کنید که چگونه خلاصه در ابتدا می‌گوید 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. و سپس می‌گوید 57 kB of 604 kB (10%) used so far. 546 kB unused. پس از اعمال فیلتر CSS.

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

نمای جزئیات فریم جدید در پنل برنامه

DevTools اکنون نمای دقیقی از هر فریم را نشان می‌دهد. با کلیک روی یک فریم در منوی Frames در پنل Application به آن دسترسی پیدا کنید.

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

جزئیات قاب برای پنجره‌های باز

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

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

اطلاعات امنیتی و ایزوله (COEP / COOP)

DevTools اکنون جزئیات چارچوب امن، سیاست جاسازی متقابل مبدا (COEP) و سیاست بازکننده متقابل مبدا (COOP) را نمایش می‌دهد.

به زودی اطلاعات امنیتی بیشتری به نمای جزئیات قاب اضافه خواهد شد.

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

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

پیشنهاد رنگ قابل دسترسی در پنل استایل‌ها

DevTools اکنون برای متن با کنتراست رنگی پایین، پیشنهادهای رنگی ارائه می‌دهد.

در مثال زیر، متن h1 کنتراست پایینی دارد. برای رفع این مشکل، انتخابگر رنگ ویژگی color را در پنل Styles باز کنید. پس از باز کردن بخش نسبت کنتراست ، DevTools پیشنهادهای رنگی AA و AAA را ارائه می‌دهد. برای اعمال رنگ، روی رنگ پیشنهادی کلیک کنید.

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

بازگرداندن پنل Properties در پنل Elements

پنل Properties برگشته است، در کروم ۸۴ منسوخ شده بود. در نسخه بعدی DevTools، ما قصد داریم گردش کار را برای بررسی ویژگی‌های عناصر بهبود بخشیم.

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

مقادیر هدر X-Client-Data قابل خواندن توسط انسان در پنل شبکه

هنگام بررسی یک منبع شبکه در پنل Network، DevTools اکنون هر مقدار هدر X-Client-Data را در پنل Headers به ​​عنوان کد قالب‌بندی می‌کند.

هدر HTTP مربوط به X-Client-Data شامل فهرستی از شناسه‌های آزمایش و پرچم‌های کروم است که در مرورگر شما فعال شده‌اند. مقادیر خام هدر، از آنجایی که بافرهای پروتکل سریالی شده و کدگذاری شده با پایه ۶۴ هستند، مانند رشته‌های مات به نظر می‌رسند. برای شفاف‌تر کردن محتوا برای توسعه‌دهندگان، DevTools اکنون مقادیر رمزگشایی شده را نشان می‌دهد.

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

تکمیل خودکار فونت‌های سفارشی در پنل استایل‌ها

فونت‌های وارد شده اکنون هنگام ویرایش ویژگی font-family در پنجره‌ی Styles به فهرست تکمیل خودکار CSS اضافه می‌شوند.

در این مثال، 'Noto Sans' یک فونت سفارشی است که در دستگاه محلی نصب شده است. این فونت در لیست تکمیل CSS نمایش داده می‌شود. قبلاً اینطور نبود.

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

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

DevTools اکنون به طور مداوم همان نوع منبع را به عنوان درخواست شبکه اصلی نمایش می‌دهد و هنگام تغییر مسیر (وضعیت 302) مقدار / Redirect را به ستون Type اضافه می‌کند.

پیش از این، DevTools گاهی اوقات نوع را به Other تغییر می‌داد.

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

دکمه‌های پاک کردن در پنل‌های Elements و Network

کادرهای متنی فیلتر در پنل Styles و پنل Network ، و همچنین کادر متنی جستجوی DOM در پنل Elements ، اکنون دارای دکمه‌های Clear هستند. کلیک بر روی Clear، هر متنی را که وارد کرده‌اید حذف می‌کند.

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

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

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

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

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

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

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

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