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

Sofia Emelianova

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

برای جشن گرفتن روز اول آوریل امسال، تیم DevTools یک Easter egg (نکته مخفی) را در جایی از DevTools پنهان کرده است.

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

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

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

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

تب Elements > Styles اکنون گزینه‌ی « شبیه‌سازی یک صفحه‌ی متمرکز» (Emulate a focus page) را در زیر دکمه‌ی «تغییر وضعیت عناصر» ( :hov ) دارد. پیش از این، این گزینه را فقط می‌توانستید در پنل رندرینگ (Rendering ) پیدا کنید.

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

شماره کروم: ۱۴۶۸۳۹۳

انتخابگر رنگ، ساعت زاویه و ویرایشگر کاهش در var() fallbackها

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

شماره کروم: ۱۵۲۰۴۱۷

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

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

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

برای فعال کردن مجدد ابزار طول، تنظیمات را پاک کنید. تنظیمات > آزمایش‌ها > کادر انتخاب ابزار نوشتن <طول> CSS را در برگه سبک‌ها (Styles) غیرفعال کنید .

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

نمایش نتایج جستجوی انتخاب شده در مسیر Performance > Main track

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

شماره کروم: ۱۵۲۳۲۷۹ .

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

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

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

تب Network > EventStream شامل موارد زیر است:

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

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

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

شماره کروم: ۱۴۸۸۸۶۳ ، ۴۰۶۵۹۴۹۳ .

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

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

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

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

شماره کروم: ۴۱۴۹۱۸۴۶

فعال و غیرفعال کردن همه نقاط توقف در منابع

بخش منابع > نقاط شکست، گزینه‌های فعال و غیرفعال کردن همه نقاط شکست را به منوی کشویی خود بازگردانده است. پیش از این، این گزینه‌ها با طراحی مجدد نقاط شکست، حذف شده بودند.

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

شماره کروم: ۱۵۲۲۰۳۷

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

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

شماره کروم: ۱۵۱۸۳۶۴ .

فانوس دریایی ۱۱.۵.۰

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

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

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

مشکل کروم: ۷۷۲۵۵۸

دسترسی‌پذیری

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

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

مشکلات کرومیوم: ۱۵۱۶۹۵۷ ، ۳۲۴۲۸۲۴۴۳ ، ۳۲۴۴۶۷۵۰۸ ، ۳۲۴۹۳۰۰۰۷ .

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

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

• فونت‌های موجود در DevTools برای مطابقت با کروم ( 1523538 ) به‌روزرسانی شده‌اند.
• عملکرد : مشکل نمایش اسکرین‌شات هنگام نگه داشتن ماوس روی تایم‌لاین ( ۱۵۱۹۴۶۹ ) برطرف شد.
• منابع : ارتفاع خط در ویرایشگر برای خوانایی بهتر کد افزایش یافته است ( 1523640 ).
• شبکه > پاسخ‌ها : مشکلات مختلف نمایش با فرمت‌ها و کدگذاری‌های مختلف ( ۱۵۲۳۱۲۸ ، ۱۵۰۹۳۳۶ ، ۱۵۲۳۱۲۸ ، ۴۱۴۸۱۹۴۴ ، ۱۵۰۹۳۳۶ ) برطرف شد.

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

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

با تیم Chrome DevTools تماس بگیرید

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

• بازخوردها و درخواست‌های مربوط به ویژگی‌های جدید را برای ما در crbug.com ارسال کنید.
• با استفاده از more_vert مشکل DevTools را گزارش دهید. گزینه‌های بیشتر > راهنما > گزارش مشکل DevTools در DevTools.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد ویدیوهای یوتیوب «چه چیزهایی در DevTools جدید است» یا ویدیوهای یوتیوب «نکات DevTools» بنویسید.

قابلیت‌های جدید در DevTools

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