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

Sofia Emelianova

بهبود عناصر

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

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

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

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

شماره کروم: ۱۴۴۲۵۳۶

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

در بخش عناصر > سبک‌ها ، ماوس را روی نام یک انتخابگر نگه دارید تا میزان ویژگی آن را در یک راهنما (tooltip) مشاهده کنید.

مشکل کروم: ۱۲۰۴۹۳۲

مقادیر ویژگی‌های CSS سفارشی در tooltipها

در بخش عناصر > سبک‌ها ، ماوس را روی نام یک ویژگی CSS سفارشی نگه دارید تا مقدار آن را در یک راهنمای ابزار مشاهده کنید.

تیم DevTools مایل است از一丝 و Suyan برای ارائه این بهبود، قدردانی کند.

شماره کروم: ۱۳۸۰۷۷۹ .

بهبود منابع

برجسته‌سازی سینتکس CSS

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

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

مشکلات کروم: ۱۳۰۲۲۶۱ ، ۱۳۹۲۰۸۵ .

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

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

شماره کروم: ۱۴۰۵۷۶۷

کاربرد > کاهش ردیابی پرش

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

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

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

علاوه بر این، برگه «مشکلات» در مورد حذف قریب‌الوقوع ایالت به شما هشدار می‌دهد.

شماره کروم: ۱۴۳۲۳۰۳

فانوس دریایی ۱۰.۲.۰

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

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

مشکل کروم: ۷۷۲۵۵۸

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

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

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

• اشکال‌زدا چنین اسکریپت‌هایی را نادیده می‌گیرد و به استثنائاتی که توسط آنها ایجاد می‌شود بسنده نمی‌کند.
• بخش Sources > Call Stack فریم‌های نادیده گرفته شده را رد می‌کند. برای غیرفعال کردن رد شدن در اینجا، تیک بزنید نمایش فریم‌های نادیده گرفته شده .
• کنسول، فریم‌های نادیده گرفته شده در ردگیری‌های پشته را جمع می‌کند . برای باز شدن، روی «نمایش تعداد فریم‌های بیشتر» و برای جمع شدن دوباره روی «نمایش تعداد فریم‌های کمتر» کلیک کنید.

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

مشکلات کروم: ۱۴۴۰۹۵۸ ، ۱۳۶۴۵۰۱

شبکه > چاپ زیبا به صورت پیش‌فرض در پاسخ

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

علاوه بر این، فایل‌های SVG از قابلیت برجسته‌سازی سینتکس (syntax highlighting) بهره‌مند می‌شوند.

مشکلات کروم: ۱۳۸۲۷۵۲ ، ۱۳۸۵۳۷۴ .

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

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

• تنظیمات > دستگاه‌ها : نسخه ۴۰۷ فیسبوک برای اندروید در پیکسل ۶ به فهرست رشته‌های عامل اضافه شد.
• شبکه : میانبر پاک کردن گزارش شبکه ( 1444991 ) اضافه شد:
  • مک او اس: فرمان + K
  • ویندوز/لینوکس: کنترل + L
• گزینه کشویی پنل بینش‌های عملکرد ( 1414773 ) از بخش ضبط > ضبط N حذف شد.
• استایل‌شیت‌هایی که بارگذاری نشدند، اکنون از درخت ناوبری پنهان شده‌اند ( 1386059 ).
• عملکرد : مشکل نمایش نادرست مسیر تعاملات قابل ارتقا ( 1432510 ) برطرف شد.
• عناصر : استایل‌شیت‌هایی که بارگذاری نشدند، اکنون با خطوط موج‌دار زیرشان خط کشیده شده است ( 1440626 ).
• وقتی افزونه‌ای برای زبان مربوطه ( 1443342 ) وجود نداشته باشد، اشکال‌زدا به طور خودکار وارد WebAssembly نمی‌شود.
• میانبری که مکان‌نما را کلمه به کلمه حرکت می‌دهد، برای فایل‌های CSS در Sources > Editor ( 1241848 ) بازیابی شده است:
  • مک او اس: Alt + جهت‌نما
  • ویندوز/لینوکس: Ctrl + جهت‌نما

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

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

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

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

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

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

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