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

Jecelyn Yeen

ویرایش استایل برای فریم‌ورک‌های CSS-in-JS

بخش استایل‌ها (Styles) اکنون پشتیبانی بهتری برای ویرایش استایل‌هایی که با APIهای مدل شیء CSS (CSSOM) ایجاد شده‌اند، دارد. بسیاری از فریم‌ورک‌ها و کتابخانه‌های CSS-in-JS از APIهای CSSOM در پشت صحنه برای ساخت استایل‌ها استفاده می‌کنند.

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

برای مثال، استایل‌های h1 که با CSSStyleSheet (CSSOM APIs) اضافه شده‌اند، قبلاً قابل ویرایش نبودند. اکنون در پنل استایل‌ها قابل ویرایش هستند:

مشکل کرومیوم شماره ۹۴۶۹۷۵

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

پنل Lighthouse اکنون Lighthouse 6 را اجرا می‌کند. برای خلاصه‌ای از تمام تغییرات عمده، به بخش «چه چیزهایی در Lighthouse 6.0 جدید است» و برای فهرست کامل تمام تغییرات ، به یادداشت‌های انتشار نسخه ۶.۰.۰ مراجعه کنید.

Lighthouse 6.0 سه معیار جدید را به گزارش اضافه می‌کند: بزرگترین رنگ محتوا (LCP)، تغییر چیدمان تجمعی (CLS) و زمان کل مسدودسازی (TBT). LCP و CLS دو مورد از Core Web Vitals جدید گوگل هستند و TBT یک پروکسی اندازه‌گیری آزمایشگاهی برای یکی دیگر از Core Web Vitals، یعنی First Input Delay، است.

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

مشکل کرومیوم شماره ۷۷۲۵۵۸

منسوخ شدن First Meaningful Paint (FMP)

First Meaningful Paint (FMP) در Lighthouse 6.0 منسوخ شده است. همچنین از پنل Performance حذف شده است. Largest Contentful Paint جایگزین پیشنهادی برای FMP است. برای توضیح دلیل منسوخ شدن آن، به First Meaningful Paint مراجعه کنید.

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

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

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

• تکمیل خودکار سینتکس زنجیره‌سازی اختیاری - تکمیل خودکار ویژگی در کنسول اکنون از سینتکس زنجیره‌سازی اختیاری پشتیبانی می‌کند، مثلاً name?. اکنون علاوه بر name. و name[ . نیز کار می‌کند.
• هایلایت کردن سینتکس برای فیلدهای خصوصی - فیلدهای کلاس خصوصی اکنون به درستی هایلایت شده و در پنل منابع به زیبایی چاپ می‌شوند.
• هایلایت کردن سینتکس برای عملگر ادغام تهی - DevTools اکنون عملگر ادغام تهی را به درستی در پنل منابع به صورت زیبا چاپ می‌کند.

مشکلات کرومیوم #1083214 ، #1073903 ، #1083797

هشدارهای میانبر برنامه جدید در صفحه مانیفست

میانبرهای برنامه به کاربران کمک می‌کنند تا به سرعت کارهای رایج یا توصیه‌شده را در یک برنامه وب شروع کنند.

اکنون پنجره Manifest در صورت وجود موارد زیر هشدارهایی را نشان می‌دهد:

• آیکون‌های میانبر برنامه کوچکتر از ۹۶x۹۶ پیکسل هستند
• آیکون‌های میانبر برنامه و آیکون‌های مانیفست مربع نیستند (زیرا نادیده گرفته می‌شوند)

مشکل کرومیوم شماره ۹۵۵۴۹۷

رویدادهای respondWith سرویس در تب زمان‌بندی

تب Timing در پنل Network اکنون شامل رویدادهای respondWith سرویس ورکر است. respondWith زمان بلافاصله قبل از اجرای کنترل‌کننده رویداد fetch سرویس ورکر تا زمانی است که وعده respondWith مربوط به کنترل‌کننده fetch برقرار می‌شود.

مشکل کرومیوم شماره ۱۰۶۶۵۷۹

نمایش یکنواخت پنجره Computed

بخش Computed در پنل Elements اکنون به طور یکنواخت در تمام اندازه‌های نمایشگر نمایش داده می‌شود. پیش از این، وقتی عرض نمایشگر DevTools کم بود، بخش Computed در داخل بخش Styles ادغام می‌شد.

مشکل کرومیوم شماره ۱۰۷۳۸۹۹

آفست‌های بایت‌کد برای فایل‌های WebAssembly

DevTools اکنون از آفست‌های بایت‌کد برای نمایش شماره خطوط در Wasm disassembly استفاده می‌کند. این امر باعث می‌شود که واضح‌تر به داده‌های دودویی نگاه کنید و با نحوه ارجاع زمان اجرای Wasm به مکان‌ها سازگارتر باشد.

مشکل کرومیوم شماره ۱۰۷۱۴۳۲

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

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

مشکل کرومیوم شماره ۸۰۰۰۲۸

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

لغو گروه‌بندی پیام‌های کنسول مشابه

گزینه «گروه‌بندی مشابه» در تنظیمات کنسول، اکنون برای پیام‌های تکراری اعمال می‌شود. قبلاً فقط برای پیام‌های مشابه اعمال می‌شد.

برای مثال، قبلاً، DevTools پیام‌های hello را از حالت گروه‌بندی خارج نمی‌کرد، حتی با اینکه گزینه‌ی Group similar تیک نخورده بود. حالا، پیام‌های hello از حالت گروه‌بندی خارج شده‌اند:

مشکل کرومیوم شماره ۱۰۸۲۹۶۳

تنظیمات فقط زمینه انتخاب شده را حفظ کنید

تنظیمات «فقط زمینه انتخاب‌شده» در تنظیمات کنسول اکنون حفظ شده است. پیش از این، تنظیمات هر بار که DevTools را می‌بستید و دوباره باز می‌کردید، بازنشانی می‌شدند. این تغییر، رفتار تنظیمات را با سایر گزینه‌های تنظیمات کنسول سازگار می‌کند.

مشکل کرومیوم شماره ۱۰۵۵۸۷۵

به‌روزرسانی‌های پنل عملکرد

اطلاعات حافظه نهان کامپایل جاوا اسکریپت در پنل Performance

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

مشکل کرومیوم شماره ۹۱۲۵۸۱

تنظیم زمان ناوبری در پنل Performance

پنل Performance قبلاً زمان‌ها را در خط‌کش‌ها بر اساس زمان شروع ضبط نشان می‌داد. اکنون این مورد برای ضبط‌هایی که کاربر در آن‌ها پیمایش می‌کند تغییر کرده است، جایی که DevTools اکنون زمان‌های خط‌کش را نسبت به پیمایش نشان می‌دهد.

ما همچنین زمان رویدادهای DOMContentLoaded ، First Paint، First Contentful Paint و Largest Contentful Paint را به‌روزرسانی کرده‌ایم تا نسبت به شروع پیمایش باشند، به این معنی که آنها با زمان‌بندی‌های گزارش شده توسط PerformanceObserver مطابقت دارند.

مشکل کرومیوم شماره ۹۷۴۵۵۰

آیکون‌های جدید برای نقاط توقف، نقاط توقف شرطی و نقاط ثبت وقایع

پنل منابع (Sources) طرح‌های جدیدی برای نقاط شکست (breakpoints)، نقاط شکست شرطی (conditional breakpoints) و نقاط ثبت وقایع (logpoints) دارد. نقاط شکست، طراحی پرچم (flag) به‌روز شده‌ای با رنگ‌های روشن‌تر و کاربرپسندتر دریافت می‌کنند. آیکون‌هایی برای تمایز نقاط شکست شرطی و نقاط ثبت وقایع اضافه شده‌اند.

مشکل کرومیوم شماره ۱۰۴۱۸۳۰

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

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

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

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

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

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

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