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

Sofia Emelianova

بهبود عناصر

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

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

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

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

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

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

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

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

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

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

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

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

پیشرفت منابع

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

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

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

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

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

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

شماره کروم: 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 می گیرد. همچنین به لیست کامل تغییرات مراجعه کنید.

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

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

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

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

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

• اشکال زدایی چنین اسکریپت هایی را نادیده می گیرد و به استثنائی که توسط آنها پرتاب می شود متوقف نمی شود.
• منابع > Skips Pane Call Frames را نادیده گرفت. برای خاموش کردن اینجا ، بررسی کنید نمایش فریم های لیست شده را نادیده بگیرید .
• این کنسول فریم های نادیده گرفته شده در آثار پشته را نادیده می گیرد . برای گسترش ، روی Show N بیشتر فریم ها کلیک کنید و دوباره به سقوط دوباره نشان دهید .

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

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

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

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

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