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

جسلین ین

ویرایش سبک برای چارچوب های CSS-in-JS

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

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

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

Chromium شماره 946975

فانوس دریایی 6 در پنل Lighthouse

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

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

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

معیارهای عملکرد جدید در Lighthouse 6.0

Chromium شماره 772558

اولین منسوخ شدن رنگ معنی دار (FMP).

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

Chromium شماره 1096008

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

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

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

مسائل Chromium #1083214 , #1073903 , #1083797

هشدارهای میانبر برنامه جدید در قسمت Manifest

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

اکنون پنجره Manifest هشدارهایی را نشان می دهد اگر:

  • نمادهای میانبر برنامه کوچکتر از 96x96 پیکسل هستند
  • نمادهای میانبر برنامه و نمادهای مانیفست مربع نیستند (زیرا نادیده گرفته می شوند)

هشدارهای میانبر برنامه

Chromium شماره 955497

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

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

کارگر خدمات `respondWith`

Chromium شماره 1066579

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

صفحه Computed در پانل Elements اکنون به صورت یکپارچه در تمام اندازه‌های viewport نمایش داده می‌شود. قبلاً وقتی عرض نمای DevTools باریک بود، پنجره Computed در داخل صفحه Styles ادغام می شد.

Chromium شماره 1073899

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

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

افست بایت کد

Chromium شماره 1071432

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

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

Chromium شماره 800028

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

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

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

Chromium شماره 1082963

تداوم تنظیمات فقط زمینه انتخاب شده

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

فقط زمینه انتخاب شده

Chromium شماره 1055875

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

اطلاعات کش کامپایل جاوا اسکریپت اکنون همیشه در تب Summary پانل Performance نمایش داده می شود. قبلاً، اگر کش کد اتفاق نمی افتاد، DevTools هیچ چیز مربوط به کش کد را نشان نمی داد.

اطلاعات کش کامپایل جاوا اسکریپت

Chromium شماره 912581

تراز زمان بندی ناوبری در پانل عملکرد

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

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

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

Chromium شماره 974550

نمادهای جدید برای نقاط شکست، نقاط شکست شرطی و نقاط ورود

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

نقاط شکست

Chromium شماره 1041830

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

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

تماس با تیم Chrome DevTools

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

  • پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
  • با استفاده از گزینه های بیشتر ، مشکل DevTools را گزارش کنیدبیشتر > راهنما > گزارش مشکلات DevTools در DevTools.
  • توییت در @ChromeDevTools .
  • نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.
چیزهای جدید در DevTools

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

کروم 126 کروم 125 کروم 124 کروم 123 کروم 122 کروم 121 کروم 120 کروم 119 کروم 118 کروم 117 کروم 116 کروم 115 کروم 114 کروم 113 کروم 112 کروم 111 کروم 110 کروم 109 کروم 108 کروم 107 کروم 106 کروم 105 کروم 104 کروم 103 کروم 102 کروم 101 کروم 100 کروم 99 کروم 98 کروم 97 کروم 96 کروم 95 کروم 94 کروم 93 کروم 92 کروم 91 کروم 90 کروم 89 کروم 88 کروم 87 کروم 86 کروم 85 کروم 84 کروم 83 کروم 82

Chrome 82 لغو شد .

کروم 81 کروم 80 کروم 79 کروم 78 کروم 77 کروم 76 کروم 75 کروم 74 کروم 73 کروم 72 کروم 71 کروم 70 کروم 68 کروم 67 کروم 66 کروم 65 کروم 64 کروم 63 کروم 62 کروم 61 کروم 60 کروم 59