موارد جدید در 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 استفاده کنید.

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

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

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

کروم 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