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

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

بهبود عناصر

نشان جدید زیرشبکه 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 به لیست رشته‌های عامل اضافه شد.
  • شبکه : میانبر 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 پوشش داده شده است.

،

صوفیه املیانوا
Sofia Emelianova

بهبود عناصر

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

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

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

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

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

شماره کروم: 1442536 .

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

در عناصر > سبک ها ، برای دیدن وزن ویژگی آن در یک ابزار ابزار ، روی یک نام انتخابی حرکت کنید.

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

شماره کروم: 1204932 .

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

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

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

تیم DevTools دوست دارد از一丝 و سویان بخاطر فرود این پیشرفت ابراز قدردانی کند.

شماره کروم: 1380779 .

پیشرفت منابع

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

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

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

بهبود نحو CSS بهبود یافته و ویرایشگرهای درون خطی در منابع.

مشکلات کروم: 1302261 ، 1392085 .

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

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

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

شماره کروم: 1405767 .

برنامه> کاهش ردیابی گزاف گویی

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

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

  1. کوکی های شخص ثالث را در Chrome مسدود کنید . به سمت و فعال کردن منوی سه نقطه. > تنظیمات > امنیت. حریم خصوصی و امنیت > کوکی ها و سایر داده های سایت > دکمه رادیویی بررسی شد. کوکی های شخص ثالث را مسدود کنید .
  2. در chrome://flags ، آزمایش Mitigations Tracking Bounce را با حذف فعال کنید.
  3. بازرسی از این صفحه نمایشی ، باز کردن برنامه > خدمات پس زمینه > کاهش ردیابی گزاف گویی ، روی پیوند گزاف گویی در صفحه کلیک کنید ، صبر کنید (10 ثانیه) برای Chrome برای ضبط گزاف گویی ، و روی Force Run کلیک کنید تا فوراً حالت را حذف کند.

خطای ردیابی گزاف گویی لیست حذف حالت را نشان می دهد.

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

شماره کروم: 1432303 .

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

پانل فانوس دریایی اکنون 10.2.0 Lighthouse را اجرا می کند. مهمتر از همه ، بزرگترین بررسی رنگ با محتوا ، یک جدول با محاسبات فاز برای لرزش های شبیه سازی شده و devtools می گیرد. همچنین به لیست کامل تغییرات مراجعه کنید.

جدول فاز LCP.

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

شماره کروم: 772558 .

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

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

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

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

علاوه بر این ، کادر انتخاب در لیست نادیدها متن واضح تر شد.

مشکلات کروم: 1440958 ، 1364501 .

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

شبکه > صفحه پاسخ اکنون به طور پیش فرض ، شبیه به پانل منابع ، نهادهای پاسخ را به صورت پیش فرض می کند.

چاپ زیبا در پنجره پاسخ برگه شبکه.

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

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

مشکلات کروم: 1382752 ، 1385374 .

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

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

  • تنظیمات. تنظیمات > دستگاه ها : فیس بوک برای Android V407 در پیکسل 6 به لیست رشته های عامل اضافه شده است.
  • شبکه : میانبر Clear Network Log ( 1444991 ) اضافه شد:
    • MACOS: فرمان + k
    • ویندوز/لینوکس: کنترل + L
  • حذف ضبط > ضبط n > گزینه کشویی پانل عملکرد بینش ( 1414773 ).
  • شیوه های شیوه ای که در بارگیری ناکام بودند ، اکنون از درخت Navigator پنهان شده اند ( 1386059 ).
  • عملکرد : نمایش نادرست ثابت از آهنگ تعامل قابل ارتقاء ( 1432510 ).
  • عناصر : شیوه های شیوه ای که نتوانستند بارگیری کنند ، اکنون با خطوط موج دار ( 1440626 ) مورد تأکید قرار می گیرند.
  • هنگامی که هیچ افزونه ای برای زبان مربوطه وجود ندارد ( 1443342 ) ، اشکال زدایی به طور خودکار در WebAnsembly قدم نمی گذارد.
  • میانبر که مکان نما یک کلمه را در زمان حرکت می کند ، برای پرونده های CSS در منابع > ویرایشگر ( 1241848 ) بازیابی می شود:
    • MACOS: ALT + ARROW
    • Windows/Linux: Ctrl + Arrow

کانال های پیش نمایش را بارگیری کنید

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

در تماس با تیم Chrome Devtools

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

  • یک پیشنهاد یا بازخورد را از طریق Crbug.com به ما ارسال کنید.
  • با استفاده از گزینه های بیشتر ، یک مسئله DevTools را گزارش دهیدبیشتر > راهنما > گزارش مسائل DevTools در DevTools.
  • توییت در chromedevtools .
  • در مورد فیلم های YouTube DevTools یا نکات DevTools YouTube ، نظرات خود را در مورد Whats New در DevTools YouTube بگذارید.

آنچه در Devtools جدید است

لیستی از همه چیزهایی که در سری News in DevTools پوشش داده شده است.