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

جسلین ین

ویژگی پیش نمایش: درخت دسترسی تمام صفحه

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

در پانل عناصر ، پنجره Accessibility را باز کرده و کادر فعال کردن درخت دسترسی تمام صفحه را انتخاب کنید. سپس DevTools را مجدداً بارگیری کنید و یک دکمه دسترسی جدید را در پنل Elements خواهید دید.

می‌توانید روی آن کلیک کنید تا به نمای درخت دسترسی کامل صفحه بروید. می‌توانید گره‌ها را گسترش دهید یا برای دیدن جزئیات در صفحه دسترسی کلیک کنید.

یک گره را انتخاب کنید و به نمای درختی DOM برگردید. گره DOM مربوطه اکنون انتخاب شده است. این یک راه عالی برای درک نگاشت بین گره DOM و گره درخت دسترسی آن است. این برای درخت DOM ⬌ نمای درخت دسترسی نیز کار می کند!

قبلاً درخت دسترسی در قسمت Accessibility موجود بود. دید محدود است، فقط به شما امکان می دهد یک گره و اجداد آن را کشف کنید.

تیم ما همچنان فعالانه روی این ویژگی پیش نمایش کار می کند. ما به دنبال بازخورد شما برای پیشرفت بیشتر هستیم!

درخت دسترسی تمام صفحه

شماره Chromium: 887173

تغییرات دقیق تر در تب تغییرات

تغییر کد در تب Changes به صورت خودکار زیبا چاپ می شود.

پیش از این، ردیابی تغییرات واقعی کد منبع کوچک شده دشوار بود زیرا همه کدها در یک خط نشان داده می شوند.

تب تغییرات

مشکلات Chromium: 1238818 ، 1268754 ، 1086491

زمان طولانی تری را برای ضبط جریان کاربر تنظیم کنید

اکنون می توانید تنظیمات Timeout را در ضبط کننده برای همه مراحل یا یک مرحله خاص تنظیم کنید. این به ویژه برای صفحات با درخواست های شبکه کند و انیمیشن طولانی مفید است.

به عنوان مثال، من یک جریان کاربری را در این صفحه نمایشی ضبط کردم تا بارگذاری شود و روی آیتم منو کلیک کنید. با این حال، بارگذاری آیتم های منو کند است (6 ثانیه طول می کشد). پخش مجدد این جریان کاربر ناموفق بود زیرا از 5 ثانیه بیشتر شد (مدت زمان پیش فرض).

برای رفع این مشکل می توانیم از تنظیمات Timeout جدید استفاده کنیم. مرحله ای را که روی آیتم منو کلیک می کنیم باز کنید. مرحله را با Add timeout ویرایش کنید و آن را روی 6000 میلی ثانیه (برابر 6 ثانیه) تنظیم کنید.

به صورت اختیاری، می توانید Timeout را در تنظیمات Replay برای همه مراحل تنظیم کنید. تنظیمات Replay را گسترش دهید و مقدار Timeout را ویرایش کنید.

تنظیمات زمان برای ضبط جریان کاربر

شماره Chromium: 1257499

مطمئن شوید که صفحات شما با برگه Back/Forward cache قابل کش هستند

کش عقب/ جلو (یا bfcache) یک بهینه سازی مرورگر است که پیمایش فوری به عقب و جلو را امکان پذیر می کند.

برگه جدید Back/Forward cache می تواند به شما کمک کند صفحات خود را آزمایش کنید تا مطمئن شوید برای bfcache بهینه شده اند و هر مشکلی را که ممکن است مانع از واجد شرایط بودن آنها شود را شناسایی کنید.

برای آزمایش یک صفحه خاص، در Chrome به آن بروید و سپس در DevTools به Application > Back-Forward Cache بروید. در مرحله بعد، روی دکمه Test back/forward cache کلیک کنید و DevTools سعی می‌کند برای تعیین اینکه آیا صفحه را می‌توان از bfcache بازیابی کرد یا خیر، حرکت را دور و برگرداند.

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

برگه کش Back/Forward

شماره Chromium: 1110752

فیلتر پنجره Properties جدید

اگر می‌خواهید روی یک ویژگی خاص در پنجره Properties تمرکز کنید، اکنون می‌توانید نام یا مقدار آن ویژگی را در کادر متنی Filter جدید تایپ کنید.

به طور پیش فرض، ویژگی هایی که مقدار آنها null یا undefined نشان داده نمی شوند. چک باکس Show all را برای مشاهده همه ویژگی ها فعال کنید.

این پیشرفت‌ها به شما امکان می‌دهند سریع‌تر به خواصی که از آن‌ها مراقبت می‌کنید برسید و در نتیجه بهره‌وری خود را افزایش دهید!

فیلتر پنجره ویژگی ها

شماره Chromium: 1269674

ویژگی رسانه رنگ های اجباری CSS را شبیه سازی کنید

ویژگی رسانه‌ای CSS با رنگ‌های اجباری برای تشخیص اینکه آیا عامل کاربر حالت رنگ‌های اجباری را فعال کرده است (مثلاً حالت کنتراست بالا ویندوز) استفاده می‌شود که در آن یک پالت رنگ محدود انتخاب شده توسط کاربر را در صفحه اعمال می‌کند.

Command Menu را باز کنید، دستور Show Rendering را اجرا کنید، و سپس گزینه Emulate CSS media forced-colors را تنظیم کنید.

ویژگی رسانه با رنگ های اجباری CSS

شماره Chromium: 1130859

نمایش خط کش ها در فرمان شناور

اکنون می توانید Command Menu را باز کرده و فرمان Show rulers on hover را اجرا کنید. خط کش های صفحه اندازه گیری عرض و ارتفاع یک عنصر را آسان تر می کنند.

قبلاً، فقط می‌توانید خط‌کش‌های صفحه را از طریق Settings > Show rulers فعال کنید.

نمایش خط کش ها در فرمان شناور

شماره Chromium: 1270562

در ویرایشگر Flexbox row-reverse و column-reverse پشتیبانی کنید

ویرایشگر Flexbox دو دکمه جدید را برای پشتیبانی row-reverse و column-reverse در flex-direction اضافه کرد.

ویرایشگر Flexbox

شماره Chromium: 1263866

میانبرهای صفحه کلید جدید برای پخش مجدد XHR و گسترش همه نتایج جستجو

میانبرهای صفحه کلید برای پخش مجدد XHR در پانل شبکه

یک درخواست XHR را در پانل شبکه انتخاب کنید و R را روی صفحه کلید فشار دهید تا XHR دوباره پخش شود. قبلاً، فقط می‌توانید از طریق منوی زمینه، XHR را دوباره پخش کنید (کلیک راست کنید > Replay XHR )

پخش مجدد XHR

شماره کرومیوم: 1050021

میانبر صفحه کلید برای گسترش همه نتایج جستجو

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

برگه جستجو را از طریق Esc > منوی 3 نقطه > جستجو باز کنید. یک رشته جستجو (به عنوان مثال تابع) را وارد کنید و Enter را فشار دهید تا لیست نتایج جستجو را مشاهده کنید. روی نتایج جستجو تمرکز کنید و از میانبر زیر برای بزرگ کردن/کوچ کردن فایل های جستجو استفاده کنید:

  • ویندوز / لینوکس - Ctrl + Shift + { یا }
  • MacOS - Cmd + Options + { یا }

برای مرجع میانبرهای صفحه کلید در Chrome DevTools به میانبرهای صفحه کلید بروید.

شماره کرومیوم: 1255073

فانوس دریایی 9 در پنل Lighthouse

پنل Lighthouse اکنون Lighthouse 9 را اجرا می کند. Lighthouse اکنون همه عناصری را که شناسه یکسانی دارند فهرست می کند.

شناسه عنصر غیر منحصر به فرد یک مشکل دسترسی رایج است. به عنوان مثال، شناسه ارجاع شده در یک ویژگی aria-labelledby در چندین عنصر استفاده می شود.

برای جزئیات بیشتر درباره به‌روزرسانی‌ها ، موارد جدید در Lighthouse 9.0 را بررسی کنید.

را ممیزی فانوس دریایی برای «همه عناصر قابل تمرکز باید یک «id» منحصر به فرد داشته باشد، که دو عنصر را نشان دهد، هر دو با یک شناسه

شماره Chromium: 772558

پانل منابع بهبود یافته

بسیاری از بهبودهای پایداری در پنل Sources همانطور که آن را برای استفاده از CodeMirror 6 ارتقا دادیم. در اینجا چند پیشرفت قابل توجه وجود دارد:

  • هنگام باز کردن فایل های بزرگ (مانند WASM، جاوا اسکریپت) به طور قابل توجهی سریعتر
  • دیگر نیازی به پیمایش تصادفی هنگام عبور از کد نیست
  • پیشنهادات تکمیل خودکار بهبود یافته برای منابع قابل ویرایش (مثلاً گزیده‌ها، لغو محلی)

شماره Chromium: 1241848

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

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

  • نمایش صحیح نمودار آبشار درخواست های شبکه. قبلاً سبک شکسته شده بود. ( 1275501 )
  • کد برجسته هنگام جستجو در اسناد با خطوط بسیار طولانی در پانل منابع شکسته شد. الان درست شده ( 1275496 )
  • دیگر خبری از تب Payload تکراری در درخواست‌های شبکه نیست. ( 1273972 )
  • جزئیات جابجایی طرح‌بندی از دست رفته را در بخش خلاصه پانل عملکرد برطرف کرد. ( 1259606 )
  • از کاراکترهای دلخواه (مانند , . . ) در جستارهای جستجوی شبکه پشتیبانی کنید. ( 1267196 )

[تجربی] نقاط پایانی در قاب Reporting API

بخش آزمایشی Reporting API در Chrome 96 معرفی شد تا به شما کمک کند گزارش‌های تولید شده در صفحه خود و وضعیت آنها را نظارت کنید.

بخش Endpoints اکنون در دسترس است. این یک نمای کلی از تمام نقاط پایانی پیکربندی شده در هدر Reporting-Endpoints به شما می دهد.

یاد بگیرید که از Reporting API برای نظارت بر نقض‌های امنیتی، تماس‌های API منسوخ شده و موارد دیگر استفاده کنید.

گزارش صفحه API

شماره Chromium: 1200732

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

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

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

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

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

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