این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

چیزهای جدید در DevTools (Chrome 123)

Sofia Emelianova

تخم مرغ عید پاک را پیدا کنید

برای جشن روز اول آوریل امسال، تیم DevTools یک تخم مرغ عید پاک را در جایی در DevTools پنهان کرده است.

برای پیدا کردن آن، به دنبال یک ایموجی 💫 رنگارنگ باشید.

به روز رسانی پنل عناصر

این نسخه چندین به روز رسانی را به پنل Elements می آورد.

یک صفحه متمرکز را در Elements > Styles شبیه سازی کنید

تب Elements > Styles اکنون دارای گزینه چک_باکس شبیه سازی صفحه متمرکز شده در زیر دکمه وضعیت عناصر Toggle ( :hov ) است. قبلا این گزینه را فقط در پنل Rendering پیدا می‌کردید.

اگر فوکوس را از صفحه به DevTools تغییر دهید، برخی از عناصر همپوشانی اگر با فوکوس فعال شوند به طور خودکار پنهان می شوند. به عنوان مثال، لیست های کشویی، منوها یا انتخابگرهای تاریخ. گزینه شبیه سازی صفحه متمرکز شده به شما امکان می دهد چنین عنصری را طوری اشکال زدایی کنید که گویی در فوکوس است.

قبل و بعد از شبیه سازی یک صفحه متمرکز در تب Styles.

شماره Chromium: 1468393 .

Color Picker، Angle Clock و Easing Editor در `var()` backbacks

برای ساده‌سازی ویرایش CSS، تب Elements > Styles اکنون به شما امکان می‌دهد از Color Picker ، Angle Clock و Easing Editor در var() backback استفاده کنید.

ابزارهای قبل و بعد از رندر Color Picker، Angle Clock و Easing Editor در var() backbacks.

شماره Chromium: 1520417 .

ابزار طول CSS منسوخ شده است

ابزار تألیف طول CSS به دلیل بازخوردی که گردش کار را کند می کند و ارزش زیادی اضافه نمی کند منسوخ شده است.

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

برای روشن کردن مجدد ابزار طول، تنظیمات را پاک کنید، تنظیمات > آزمایش‌ها > چک_باکس را حذف کنید ابزار تالیف <طول> CSS را در برگه سبک‌ها پاک کنید .

اگر همچنان می‌خواهید از این ابزار استفاده کنید، تیم DevTools مایل است نظر شما و اینکه چگونه ابزار طول به شما در گردش کارتان کمک می‌کند، بشنود. با خیال راحت در crbug/1522657 بازخورد بگذارید.

آزمایش منسوخ شدن خاموش است.

برای آسان‌تر کردن جستجو، نمودار شعله در عملکرد > آهنگ اصلی اکنون هنگام چرخش در نتایج جستجو، یک پاپاور در بالای رویداد مربوطه به شما نشان می‌دهد.

قبل و بعد از نشان دادن پاپاور روی نتیجه جستجوی انتخاب شده.

شماره Chromium: 1523279 .

به روز رسانی پنل شبکه

این نسخه چند به روز رسانی را به پنل شبکه می آورد.

دکمه پاک کردن و فیلتر جستجو را در تب Network > EventStream

تب Network > EventStream دریافت می کند:

یک دکمه پاک کردن بلوک که رویدادهای ثبت شده در جدول را پاک می کند.
یک فیلتر جستجو که عبارات منظم را درک می کند.

قبل و بعد از اضافه کردن دکمه پاک کردن و فیلتر جستجو.

تیم DevTools مایل است از Charles Vazac برای ارائه این ویژگی تشکر کند.

علاوه بر این، تب EventStream اکنون رویدادهایی را که سرورها از طریق fetch/XHR ارسال می‌کنند، نه تنها از EventSource API، ضبط می‌کند. آن را در این صفحه نمایشی امتحان کنید.

شماره Chromium: 1488863 ، 40659493 .

نکات ابزار با دلایل معافیت برای کوکی های شخص ثالث در Network > Cookies

تب Network > Cookies اکنون نکات ابزاری را با دلایل معافیت در کنار کوکی‌ها نشان می‌دهد که در غیر این صورت باید توسط مرحله حذف کوکی شخص ثالث مسدود می‌شدند.

قبل و بعد از نمایش یک راهنمای ابزار با دلیل معافیت برای یک کوکی شخص ثالث.

کوکی های شخص ثالث ممکن است به دلایل زیر مجاز باشند:

خط‌مشی Chrome Enterprise
Storage Access API یا Storage Access API سطح بالا
دوره آزمایشی منسوخ شدن تدریجی کوکی شخص ثالث یا دوره مهلت آن
اکتشافی حذف تدریجی کوکی شخص ثالث
اولویت کاربر

شماره Chromium: 41491846 .

تمام نقاط شکست در Sources را فعال و غیرفعال کنید

بخش Sources > Breakpoints گزینه‌های Enable and Disable all breakpoints را به منوی کشویی خود بازمی‌گرداند. پیش از این، این گزینه ها با طراحی مجدد نقاط شکست کنار گذاشته شدند.

برای فعال یا غیرفعال کردن تمام نقاط شکست، روی نقطه شکست در Sources > Breakpoints راست کلیک کرده و گزینه مربوطه را انتخاب کنید.

شماره Chromium: 1522037 .

مشاهده اسکریپت های بارگذاری شده در DevTools برای Node.js

DevTools برای Node.js اکنون اسکریپت های بارگذاری شده را در درخت پیمایش در Sources > Scripts نشان می دهد.

قبل و بعد از اضافه کردن تب اسکریپت ها با درختی از اسکریپت های بارگذاری شده.

شماره Chromium: 1518364 .

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

پنل Lighthouse اکنون Lighthouse 11.5.0 را اجرا می کند. لیست کامل تغییرات را ببینید.

در میان تغییرات قابل توجه، ممیزی جدید است که علل ریشه ای تغییرات طرح را برآورد می کند. این ممیزی جایگزین ممیزی layout-shift-elements می شود که فقط عناصری را که تحت تأثیر تغییرات طرح قرار می گیرند فهرست می کند.

ممیزی جدید که علل ریشه ای تغییرات طرح را تخمین می زند.

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

شماره Chromium: 772558 .

دسترسی

این نسخه دارای بهبودهای دسترسی زیر است:

خوانندگان صفحه اکنون اعلام می کنند:
- متن پیوند بیشتر بدانید در کنار انتخابگر انواع در پانل ضبط .
- وقتی هیچ آزمایشی با فیلتر مطابقت ندارد در تنظیمات > آزمایش‌ها .
- تأیید عملکرد هنگام حذف، تأیید یا بازیابی میانبر در تنظیمات > میانبرها .
جدول در تنظیمات تنظیمات > مکان‌ها اکنون به درستی به عنوان جدولی برای ابزارهای دسترس‌پذیری نمایش داده می‌شود.

مسائل Chromium: 1516957 , 324282443 , 324467508 , 324930007 .

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

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

فونت‌ها در DevTools برای مطابقت با Chrome به‌روزرسانی می‌شوند ( 1523538 ).
عملکرد : نمایش اسکرین شات ثابت هنگام نگه داشتن ماوس روی خط زمانی ( 1519469 ).
منابع : ارتفاع خط در ویرایشگر برای خوانایی بهتر کد افزایش یافته است ( 1523640 ).
Network > Responses : مشکلات مختلف نمایش را با فرمت‌ها و کدگذاری‌های مختلف برطرف کرد ( 1523128 ، 1509336 ، 1523128 ، 41481944 ، 1509336 ).

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

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

تماس با تیم Chrome DevTools

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

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