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

Sofia Emelianova

بهبود عناصر

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

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

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

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

شماره Chromium: 1442536 .

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

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

شماره Chromium: 1204932 .

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

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

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

موضوع Chromium: 1380779 .

بهبود منابع

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

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

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

مسائل 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 کلیک کنید تا وضعیت بلافاصله حذف شود.

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

شماره Chromium: 1432303 .

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

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

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

شماره Chromium: 772558 .

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

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

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

• Debugger چنین اسکریپت هایی را نادیده می گیرد و روی استثناهایی که توسط آنها ایجاد می شود متوقف نمی شود.
• صفحه Sources > Call Stack از فریم های نادیده گرفته می گذرد. برای خاموش کردن پرش در اینجا، بررسی کنید نمایش قاب های فهرست شده نادیده گرفته شود .
• کنسول فریم های نادیده گرفته شده را در ردیابی پشته جمع می کند . برای بزرگ کردن، روی Show N more frame و برای جمع کردن دوباره Show less کلیک کنید.

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

مسائل Chromium: 1440958 ، 1364501 .

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

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

علاوه بر این، فایل‌های 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 استفاده کنید.

• بازخورد و درخواست های ویژگی را برای ما در crbug.com ارسال کنید.
• یک مشکل DevTools را با استفاده از more_vert گزینه های بیشتر > راهنما > گزارش مشکل DevTools در DevTools گزارش کنید.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد موارد جدید در ویدیوهای DevTools YouTube یا DevTools Tips ویدیوهای YouTube بگذارید.

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

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