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

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

مجموعه رسمی برنامه‌های افزودنی Recorder زنده است

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

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

بهبود شبکه

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

دلیل شکست در ستون وضعیت

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

قبل و بعد از نشان دادن دلیل شکست در ستون وضعیت.

مسائل Chromium: 1506760 .

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

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

قبل و بعد از بهبود زیر منوی کپی.

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

مسائل Chromium: 1267033 ، 1276452 ، 798498 .

بهبود عملکرد

این نسخه تعدادی بهبود در پنل Performance به ارمغان می آورد.

خرده نان در جدول زمانی

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

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

مسائل Chromium: 1467739 .

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

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

  • باطل کردن سبک یا طرح -> محاسبه مجدد سبک ها یا طرح بندی
  • درخواست قاب انیمیشن -> قاب انیمیشن فعال شد
  • Request Idle Callback -> Fire Idle Callback
  • تایمر -> Timer Fired را نصب کنید
  • ایجاد WebSocket -> ارسال... و دریافت WebSocket Handshake یا نابود کردن WebSocket

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

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

مسائل Chromium: 1434596 .

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

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

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

مسائل Chromium: 1511813 .

بهبود عناصر

این نسخه تعدادی پیشرفت را در پنل Elements به ارمغان می آورد.

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

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

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

پشتیبانی قبل و بعد از ویرایش از شبه عناصر view-transition.

برای اطلاعات بیشتر، انتقال صاف و ساده با View Transitions API را ببینید.

مسائل Chromium: 1511233 .

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

ویژگی align-content اکنون با هر محفظه بلوکی از جمله table-caption و table-cell کار می کند. قبلا فقط با گرید و فلکس کار می کرد.

پشتیبانی قبل و بعد از تراز محتوا در ظروف بلوکی.

مسائل Chromium: 1500511 .

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

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

منوی فرمان فایل فعال جدید Reveal را در فرمان نوار کناری ناوبری دریافت می کند که همان گزینه مربوطه را در منوی کشویی ویرایشگر انجام می دهد.

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

مسائل Chromium: 1486933 ، 1467464 .

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

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

یک منوی کشویی با گزینه های وضعیت بدن.

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

شماره Chromium: 1066842 .

موضوع بندی پویا

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

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

DevTools با تم رنگی انتخاب شده در Appearance مطابقت دارد.

مسائل Chromium: 1483276 .

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

هر دو پانل شبکه و برنامه اکنون اخطارهایی را در کنار کوکی‌های تحت تأثیر محدودیت‌های شخص ثالث از «محافظت ردیابی» برجسته و نشان می‌دهند.

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

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

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

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

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

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

مسائل Chromium: 1506225 ، 1503961 .

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

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

ممیزی که کوکی های شخص ثالث را شناسایی می کند.

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

شماره Chromium: 772558 .

دسترسی

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

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

مسائل کروم: 1504938 ، 1499868 ، 1512161 ، 1515224 ، 1515418 ، 1516998 ، 1517015 .

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

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

  • تصاوير متحرك :
    • رفع اشکال با رندر خارج از محدوده پاپاور اسکرین شات ( 1506991 ).
    • رفع اشکال با گره های انیمیشن حذف شده که به عنوان حذف علامت گذاری نشده بودند ( 1506561 ).
  • شبکه :
    • لغو سرصفحه : یک اشکال با نماد نقطه بنفش کاذب در برگه سرصفحه ( 1507856 ) رفع شد.
    • پیش نمایش : رفع یک اشکال با رمزگشایی مضاعف غیر ضروری ( 1509336 ).
    • رفع اشکالی که به دلیل عدم نمایش درخواست‌های کوتاه ( 1509862 ).
  • Application > IndexedDB : دکمه‌های مرتب شده در نوار عمل برای سازگاری با سایر پانل‌ها ( 1393800 ).
  • حسگرها : رفع یک اشکال با موقعیت مکانی در دسترس نادرست پاسخ تماس موفق ( 1486859 ).
  • کارایی :
    • دکمه جمع آوری زباله اکنون یک نماد مناسب دارد، "مپ" به جای "بین" ( 1507530 ).
    • ردیابی عملکرد اکنون داده ها را هنگام پیمایش به about:blank ( 1509947 ) حفظ می کند.
کانال های پیش نمایش را دانلود کنید

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

تماس با تیم Chrome DevTools

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

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

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

کروم 126 کروم 125 کروم 124 کروم 123 کروم 122 کروم 121 کروم 120 کروم 119 کروم 118 کروم 117 کروم 116 کروم 115 کروم 114 کروم 113 کروم 112 کروم 111 کروم 110 کروم 109 کروم 108 کروم 107 کروم 106 کروم 105 کروم 104 کروم 103 کروم 102 کروم 101 کروم 100 کروم 99 کروم 98 کروم 97 کروم 96 کروم 95 کروم 94 کروم 93 کروم 92 کروم 91 کروم 90 کروم 89 کروم 88 کروم 87 کروم 86 کروم 85 کروم 84 کروم 83 کروم 82

Chrome 82 لغو شد .

کروم 81 کروم 80 کروم 79 کروم 78 کروم 77 کروم 76 کروم 75 کروم 74 Chrome 73 کروم 72 کروم 71 Chrome 70 کروم 68 کروم 67 کروم 66 کروم 65 کروم 64 کروم 63 کروم 62 کروم 61 کروم 60 کروم 59