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

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

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

برای جشن روز اول آوریل امسال، تیم 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 بازخورد بگذارید.

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

Popover برای نتیجه جستجوی انتخاب شده در عملکرد > آهنگ اصلی

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

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

شماره Chromium: 1523279 .

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

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

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

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

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

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

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

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

شماره Chromium: 1488863 ، 40659493 .

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

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

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

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

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

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

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