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

جسلین ین

ویژگی پیش نمایش: پنل نمای کلی CSS جدید

از پانل جدید CSS Overview برای شناسایی پیشرفت های بالقوه CSS در صفحه خود استفاده کنید. پانل CSS Overview را باز کنید ، سپس بر روی Capture Overview کلیک کنید تا گزارشی از CSS صفحه شما ایجاد شود.

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

پانل CSS Overview یک ویژگی پیش نمایش است. تیم ما همچنان فعالانه روی آن کار می کند و ما به دنبال بازخورد شما برای پیشرفت های بیشتر هستیم.

برای کسب اطلاعات بیشتر در مورد پنل CSS Overview این مقاله را بخوانید.

پنل نمای کلی CSS

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

تجربه ویرایش و کپی طول CSS را بازیابی و بهبود بخشید

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

علاوه بر این، می توانید برای تنظیم مقدار واحد بکشید و نوع واحد را از طریق کشویی به روز کنید. این ویژگی طولانی نوشتن نباید بر ویرایش اولیه به عنوان تجربه متن تأثیر بگذارد.

لطفاً در صورت مشاهده هرگونه مشکل، از طریق goo.gle/length-feedback گزارش دهید.

می‌توانید آن را از طریق تنظیمات > آزمایش‌ها > فعال کردن ابزارهای نگارش طول CSS در کادر انتخاب Styles غیرفعال کنید.

مسائل Chromium: 1259088 ، 1172993

ارائه به‌روزرسانی‌های برگه

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

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

ویژگی ترجیحی-کنتراست رسانه برای تشخیص اینکه آیا کاربر کنتراست بیشتر یا کمتری را در صفحه درخواست کرده است استفاده می شود.

Command Menu را باز کنید، دستور Show Rendering را اجرا کنید و سپس ویژگی شبیه‌سازی رسانه CSS را در کرکره prefers-contrast تنظیم کنید.

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

ویژگی تم تاریک خودکار Chrome را شبیه‌سازی کنید

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

کروم 96 نسخه آزمایشی اولیه را برای تم تاریک خودکار در اندروید معرفی می کند. با استفاده از این ویژگی، زمانی که کاربر تم‌های تیره را در سیستم‌عامل انتخاب کرده باشد، مرورگر یک تم تیره به‌طور خودکار برای سایت‌های با مضمون روشن اعمال می‌کند.

Command Menu را باز کنید، دستور Show Rendering را اجرا کنید و سپس کشویی Emulate auto dark mode را تنظیم کنید.

ویژگی تم تاریک خودکار Chrome را شبیه‌سازی کنید

شماره Chromium: 1243309

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

دو گزینه جدید در منوی زمینه اضافه شده است تا بتوانید به راحتی قوانین CSS را به عنوان ویژگی های جاوا اسکریپت کپی کنید. این گزینه های میانبر به ویژه برای توسعه دهندگانی که با کتابخانه های CSS-in-JS کار می کنند مفید هستند.

در قسمت Styles ، روی یک قانون CSS کلیک راست کنید. می‌توانید برای کپی کردن یک قانون ، Copy declaration as JS یا Copy all declarations as JS را برای کپی کردن همه قوانین انتخاب کنید.

به عنوان مثال، مثال زیر paddingLeft: '1.5rem' را در کلیپ بورد کپی می کند.

اعلان را به صورت جاوا اسکریپت کپی کنید

شماره Chromium: 1253635

تب جدید Payload در پنل Network

هنگام بازرسی درخواست شبکه با بارگذاری، از تب جدید Payload در پانل شبکه استفاده کنید. قبلاً اطلاعات محموله در زیر تب Headers موجود بود.

تب Payload در پنل Network

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

نمایش خصوصیات را در قسمت Properties بهبود بخشید

اکنون پنجره Properties به جای نمایش تمام ویژگی های نمونه، فقط ویژگی های مرتبط را نشان می دهد. نمونه های اولیه و روش های DOM اکنون حذف شده اند.

همراه با پیشرفت‌های پنجره Properties در Chrome 95، اکنون می‌توانید ویژگی‌های مربوطه را راحت‌تر پیدا کنید.

نمایش خصوصیات در قسمت Properties

شماره Chromium: 1226262

به روز رسانی کنسول

گزینه ای برای پنهان کردن خطاهای CORS در کنسول

می توانید خطاهای CORS را در کنسول پنهان کنید. از آنجایی که خطاهای CORS اکنون در تب Issues گزارش می‌شوند، پنهان کردن خطاهای CORS در کنسول می‌تواند به کاهش درهم‌کاری کمک کند.

در کنسول ، روی نماد تنظیمات کلیک کنید و تیک گزینه Show CORS errors in console را بردارید.

گزینه ای برای پنهان کردن خطاهای CORS در کنسول

شماره Chromium: 1251176

پیش نمایش و ارزیابی مناسب اشیاء Intl در کنسول

اشیاء Intl اکنون پیش نمایش مناسبی دارند و مشتاقانه در کنسول ارزیابی می شوند. پیش از این، اشیاء Intl مشتاقانه ارزیابی نمی شدند.

اشیاء بین المللی در کنسول

شماره Chromium: 1073804

ردیابی پشته ناهمگام ثابت

کنسول اکنون ردیابی پشته async را برای توابع async گزارش می کند تا با سایر کارهای ناهمگام و مطابق با آنچه در پشته تماس نشان داده شده است، سازگار باشد.

ردیابی پشته ناهمگام

شماره Chromium: 1254259

نوار کناری کنسول را حفظ کنید

نوار کناری کنسول اینجا برای ماندن است. در کروم 94، منسوخ شدن آتی نوار کناری کنسول را اعلام کردیم و از توسعه دهندگان درخواست بازخورد و نگرانی کردیم.

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

نوار کناری کنسول

مسائل Chromium: 1232937 ، 1255586

پنجره کش برنامه منسوخ شده در پانل برنامه

اکنون با حذف پشتیبانی از AppCache از Chrome و سایر مرورگرهای مبتنی بر Chromium، صفحه کش برنامه در پانل برنامه حذف شده است.

شماره Chromium: 1084190

[تجربی] قاب API گزارش جدید در پانل برنامه

Reporting API برای کمک به نظارت بر نقض‌های امنیتی صفحه خود، تماس‌های API منسوخ شده و موارد دیگر طراحی شده است.

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

لطفاً توجه داشته باشید که بخش Endpoints در حال حاضر هنوز در حال توسعه فعال است (در حال حاضر هیچ نقطه پایانی گزارشی نشان داده نمی شود).

با این مقاله درباره گزارش API بیشتر بیاموزید.

گزارش صفحه API در پانل برنامه

شماره Chromium: 1205856

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

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

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

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

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

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