موارد جدید در DevTools (Chrome 115)

سوفیا املیانوا
Sofia Emelianova
GitHub

بهبود عناصر

نشان جدید زیرشبکه CSS

پانل عناصر یک نشان subgrid جدید برای زیرشبکه دریافت می کند. این ویژگی در حال حاضر در Chrome Canary آزمایشی است.

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

نشان زیرشبکه و روکش در پنجره دید.

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

شماره Chromium: 1442536 .

ویژگی انتخابگر در راهنمای ابزار

در Elements > Styles ، نشانگر را روی نام انتخابگر نگه دارید تا وزن ویژه آن را در یک راهنمای ابزار ببینید.

یک راهنمای ابزار با وزن اختصاصی یک انتخابگر.

شماره Chromium: 1204932 .

مقادیر خصوصیات CSS سفارشی در راهنمای ابزار

در Elements > Styles ، نشانگر را روی نام ویژگی CSS سفارشی نگه دارید تا مقدار آن را در یک راهنمای ابزار ببینید.

راهنمای ابزار با مقدار خاصیت CSS سفارشی.

تیم DevTools مایل است از一丝 و Suyan برای ایجاد این پیشرفت تشکر کند.

موضوع Chromium: 1380779 .

بهبود منابع

برجسته کردن نحو CSS

پانل Sources برای فایل های CSS از پیش پردازش شده مانند SASS، SCSS و LESS موارد زیر را دریافت می کند:

  • برجسته سازی نحو.
  • ویرایشگرهای درون خطی پشتیبانی می کنند. این ویرایشگرها مشابه ویرایشگرهای Elements > Styles هستند، برای مثال Color Picker و Easing Editor .

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

مسائل Chromium: 1302261 ، 1392085 .

میانبر برای تنظیم نقاط شکست شرطی

اکنون می توانید با یک میانبر، نقاط شکست شرطی را سریعتر تنظیم کنید. برای باز کردن گفتگوی نقطه شکست، Command (MacOS) یا Control (ویندوز / لینوکس) را نگه دارید و روی شماره خط در ستون سمت چپ منابع > ویرایشگر کلیک کنید.

شماره خط در ستون سمت چپ و گفتگوی نقطه شکست.

شماره Chromium: 1405767 .

Application > Bounce Tracking Mitigations

آزمایش کاهش‌های ردیابی برگشتی در Chrome به شما امکان می‌دهد وضعیت سایت‌هایی را که به نظر می‌رسد با استفاده از تکنیک ردیابی پرش، ردیابی بین‌سایتی انجام می‌دهند شناسایی و حذف کنید. بخش Application > Background Services یک تب جدید Bounce Tracking Mitigations دریافت می‌کند که به شما امکان می‌دهد به‌طور دستی اقدامات کاهشی را ردیابی کنید و سایت‌هایی را که حالت‌های آنها حذف شده‌اند فهرست کنید.

این ویژگی امنیتی را بررسی کنید:

  1. کوکی‌های شخص ثالث را در Chrome مسدود کنید . پیمایش کنید و فعال کنید منوی سه نقطه > تنظیمات > امنیت. حریم خصوصی و امنیت > کوکی ها و سایر داده های سایت > دکمه رادیویی بررسی شد. کوکی های شخص ثالث را مسدود کنید .
  2. در chrome://flags ، آزمایش Bounce Tracking Mitigations را روی Enabled With Deletion تنظیم کنید.
  3. این صفحه نمایشی را بررسی کنید، Application > Services Background > Bounce Tracking Mitigations را باز کنید، روی پیوند پرش در صفحه کلیک کنید، منتظر بمانید (10 ثانیه) تا Chrome جهش را ضبط کند، و روی Force run کلیک کنید تا وضعیت بلافاصله حذف شود.

Bounce Tracking Mitigations یک حالت حذف را فهرست می کند.

علاوه بر این، برگه Issues به شما در مورد حذف وضعیت آتی هشدار می دهد.

شماره Chromium: 1432303 .

فانوس دریایی 10.2.0

پنل Lighthouse اکنون Lighthouse 10.2.0 را اجرا می کند. مهم‌تر از همه، بررسی Largest Contentful Paint یک جدول با محاسبات فاز برای شبیه‌سازی شده و DevTools دریافت می‌کند. همچنین لیست کامل تغییرات را ببینید.

جدول فاز LCP.

برای یادگیری اصول اولیه استفاده از پنل Lighthouse در DevTools، به Lighthouse: Optimize website speed مراجعه کنید.

شماره Chromium: 772558 .

به طور پیش فرض اسکریپت های محتوا را نادیده بگیرید

این تنظیمات. تنظیمات > فهرست نادیده گرفتن > چک باکس. اسکریپت های محتوای تزریق شده توسط برنامه های افزودنی اکنون به طور پیش فرض فعال است.

با فعال بودن این تنظیمات:

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

علاوه بر این، چک باکس ها در فهرست نادیده گرفتن متن واضح تری دریافت کردند.

مسائل Chromium: 1440958 ، 1364501 .

Network > Response beautiful-printing به طور پیش فرض

اکنون بخش Network > Response به صورت پیش‌فرض بدنه‌های پاسخ کوچک را به زیبایی چاپ می‌کند، مشابه پانل منابع .

چاپ زیبا در پنجره Response تب Network فعال شد.

علاوه بر این، فایل‌های SVG برجسته‌سازی نحوی می‌شوند.

برجسته سازی نحو SVG.

مسائل Chromium: 1382752 ، 1385374 .

نکات برجسته متفرقه

برخی از اصلاحات و بهبودهای قابل توجه در این نسخه عبارتند از:

  • تنظیمات. تنظیمات > دستگاه‌ها : فیسبوک برای اندروید نسخه 407 در پیکسل 6 به لیست رشته‌های عامل اضافه شد.
  • Network : میانبر Clear log network را اضافه کرد ( 1444991 ):
    • MacOS: Command + K
    • ویندوز/لینوکس: Control + L
  • گزینه کشویی Recorder > Recording N > Performance insights panel حذف شد ( 1414773 ).
  • برگه‌های سبکی که بارگیری نشدند اکنون از درخت ناوبر پنهان شده‌اند ( 1386059 ).
  • عملکرد : صفحه نمایش نادرست تراک Interactions قابل ارتقا ( 1432510 ) را برطرف کرد.
  • عناصر : صفحه‌های سبکی که بارگیری نشدند، اکنون با خطوط موج دار مشخص می‌شوند ( 1440626 ).
  • هنگامی که هیچ افزونه ای برای زبان مربوطه وجود ندارد، Debugger به طور خودکار وارد WebAssembly نمی شود ( 1443342 ).
  • میانبری که مکان نما را هر بار یک کلمه حرکت می دهد برای فایل های CSS در منابع > ویرایشگر ( 1241848 ) بازیابی می شود:
    • MacOS: Alt + Arrow
    • ویندوز/لینوکس: Ctrl + Arrow

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

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

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

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

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

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