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

Sofia Emelianova

مجموعه رسمی افزونه‌های ضبط‌کننده منتشر شد

مجموعه رسمی افزونه‌های ضبط‌کننده‌ی خروجی و پخش مجدد اکنون در دسترس است.

برای باز کردن مجموعه مستقیماً از ضبط‌کننده ، در نوار عملیات بالای پنل ضبط‌کننده، گزینه دانلود، صادرات > دریافت افزونه‌ها... را انتخاب کنید.

بهبودهای شبکه

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

دلیل خطا در ستون وضعیت

ستون وضعیت اکنون همیشه دلیل شکست را نشان می‌دهد. قبلاً، باید تیک گزینه‌ی « رکوردهای درخواست بزرگ» را فعال می‌کردید یا درخواست را در جدول انتخاب می‌کردید.

مشکلات کروم: ۱۵۰۶۷۶۰

زیرمنوی کپی بهبود یافته

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

علاوه بر این، گزینه Copy as cURL اکنون دستور صحیح را در کلیپ بورد ویندوز کپی می‌کند.

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

بهبود عملکرد

این نسخه بهبودهای زیادی را در پنل عملکرد (Performance) به همراه دارد.

خرده نان‌ها در تایم‌لاین

اکنون Timeline در بالای پنل Performance به شما امکان می‌دهد تا breadcrumbs را تنظیم کرده و بین آنها جابجا شوید.

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

مشکلات کروم: ۱۴۶۷۳۳۹

آغازگران رویداد در مسیر اصلی

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

• نامعتبرسازی سبک یا طرح‌بندی -> محاسبه مجدد سبک‌ها یا طرح‌بندی
• درخواست فریم انیمیشن -> فریم انیمیشن اجرا شد
• درخواست پاسخ به تماس در حالت آماده به کار -> فعال کردن پاسخ به تماس در حالت آماده به کار
• نصب تایمر -> فعال کردن تایمر
• ایجاد WebSocket -> ارسال... و دریافت WebSocket Handshake یا از بین بردن WebSocket

برای دیدن فلش‌ها، چنین رویدادی را در مسیر پیدا کنید و روی آن کلیک کنید. پیش از این، این ویژگی یک آزمایش بود.

مشکلات کروم: ۱۴۳۴۵۹۶

منوی انتخاب نمونه ماشین مجازی جاوا اسکریپت برای Node.js DevTools

در پنل Performance در Node.js DevTools، اکنون می‌توانید یک نمونه ماشین مجازی جاوا اسکریپت را از منوی کشویی مربوطه در نوار عملیات انتخاب کنید. ویژگی مشابهی در JavaScript Profiler که به زودی منسوخ خواهد شد، موجود بود.

مشکلات کروم: ۱۵۱۱۸۱۳

بهبود عناصر

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

علاوه بر دو ویژگی بعدی، پنل Elements اکنون آخرین تبی که باز کرده‌اید، مثلاً Computed یا Properties را به خاطر می‌سپارد.

شبه عنصر ::view-transition اکنون در Styles قابل ویرایش است.

اکنون می‌توانید شبه‌عناصر CSS مربوط به ::view-transition را در بخش Styles با استفاده از شیوه‌نامه‌ی inspector ویرایش کنید.

برای اطلاعات بیشتر، به بخش «انتقال‌های روان و ساده با استفاده از View Transitions API» مراجعه کنید.

مشکلات کروم: ۱۵۱۱۲۳۳

پشتیبانی از ویژگی align-content برای کانتینرهای بلاک

ویژگی align-content اکنون با هر بلوکی از جمله table-caption و table-cell کار می‌کند. پیش از این، فقط با grid و flex کار می‌کرد.

مشکلات کروم: ۱۵۰۰۵۱۱

میانبر و دستور جدید در Sources

اکنون می‌توانید با فشردن کلیدهای Cmd (Mac) / Ctrl (Win) + Shift + click روی شماره خط در Sources ، یک نقطه ثبت ایجاد کنید. این میانبر علاوه بر میانبر Cmd (Mac) / Ctrl (Win) + click که از قبل برای نقاط شکست شرطی وجود داشت، اضافه شده است.

منوی فرمان، فرمان جدید «آشکار کردن فایل فعال در نوار کناری ناوبری» را دریافت می‌کند که همان کار گزینه‌ی مربوطه در منوی کشویی ویرایشگر را انجام می‌دهد.

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

پشتیبانی از وضعیت بدن برای دستگاه‌های تاشوی شبیه‌سازی‌شده

حالت دستگاه اکنون به شما امکان می‌دهد وضعیت یک دستگاه تاشوی شبیه‌سازی‌شده را تنظیم کنید: پیوسته یا تاشده . وضعیت پیوسته به موقعیت «مسطح» اشاره دارد و تاشده زاویه‌ای بین بخش‌های صفحه نمایش تشکیل می‌دهد.

علاوه بر این، لیست دستگاه‌ها یک دستگاه تاشوی شبیه‌سازی شده جدید را دریافت می‌کند: ایسوس زنبوک فولد.

مشکل کروم: ۱۰۶۶۸۴۲

قالب‌بندی پویا

DevTools اکنون به طور خودکار با تم رنگی کروم مطابقت دارد. برای تنظیم تم:

1. یک برگه جدید باز کنید و در گوشه پایین سمت راست، روی ویرایش، سفارشی‌سازی کروم، کلیک کنید.
2. در بخش ظاهر، از طریق تصویر زمینه، یک تم انتخاب کنید. تم‌ها را تغییر دهید یا یک پالت رنگ انتخاب کنید.

مشکلات کروم: ۱۴۸۳۲۷۶

هشدارهای حذف تدریجی کوکی‌های شخص ثالث در پنل‌های شبکه و برنامه

هر دو پنل شبکه و برنامه اکنون هایلایت شده و هشدارهایی را در کنار کوکی‌هایی که تحت تأثیر محدودیت‌های شخص ثالث از Tracking Protection قرار گرفته‌اند، نشان می‌دهند.

در شبکه ، درخواستی را با نماد هشدار پیدا کنید، روی آن کلیک کنید و برگه کوکی‌ها را باز کنید.

در برنامه ، به Storage > Cookies بروید و روی یک دامنه کلیک کنید. کوکی‌هایی که با رنگ زرد مشخص شده‌اند، در مرورگر ذخیره نمی‌شوند.

برای مشاهده‌ی راهنمای ابزار که مشکلات را شرح می‌دهد، نشانگر ماوس را روی نماد هشدار نگه دارید و برای باز کردن برگه‌ی مشکلات با اطلاعات بیشتر، روی نماد کلیک کنید.

علاوه بر این، کوکی‌های موجود در جدول اکنون به طور پیش‌فرض بر اساس نام مرتب شده‌اند.

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

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

پنل Lighthouse اکنون Lighthouse 11.4.0 را اجرا می‌کند. لیست کامل تغییرات را ببینید. از جمله تغییرات قابل توجه، ممیزی جدیدی است که به شما امکان می‌دهد تشخیص دهید که آیا وب‌سایت شما هنوز از کوکی‌های شخص ثالث استفاده می‌کند یا خیر.

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

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

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

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

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

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

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

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

• انیمیشن‌ها :
  • اشکال مربوط به رندر شدن تصویر پاپ‌اوور خارج از محدوده ( 1506991 ) برطرف شد.
  • اشکال مربوط به گره‌های انیمیشن حذف‌شده که به عنوان حذف‌شده علامت‌گذاری نشده بودند، برطرف شد ( 1506561 ).
• شبکه :
  • لغو سربرگ‌ها : اشکال مربوط به آیکون نقطه بنفش کاذب در تب سربرگ‌ها ( 1507856 ) برطرف شد.
  • پیش‌نمایش : اشکالی که منجر به رمزگشایی دوگانه غیرضروری می‌شد ( 1509336 ) برطرف شد.
  • اشکالی که باعث می‌شد درخواست‌های کوتاه نمایش داده نشوند ( 1509862 ) برطرف شد.
• برنامه > IndexedDB : دکمه‌های نوار اکشن برای هماهنگی با سایر پنل‌ها ( ۱۳۹۳۸۰۰ ) دوباره مرتب شده‌اند.
• حسگرها : اشکال مربوط به عدم دسترسی به موقعیت مکانی و عدم موفقیت در فراخوانی مجدد ( 1486859 ) برطرف شد.
• عملکرد :
  • دکمه‌ی جمع‌آوری زباله حالا آیکون مناسبی دارد، «مُپ» به جای «سطل زباله» ( 1507530 ).
  • ردیابی عملکرد اکنون هنگام پیمایش به about:blank ( 1509947 ) داده‌ها را حفظ می‌کند.

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

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

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

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

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

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

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