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

Jecelyn Yeen

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

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

در پنل Elements ، بخش Accessibility را باز کنید و گزینه Enable full-page accessibility tree را انتخاب کنید. سپس، DevTools را مجدداً بارگذاری کنید تا یک دکمه accessibility جدید در پنل Elements مشاهده کنید.

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

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

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

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

مشکل کرومیوم: ۸۸۷۱۷۳

تغییرات دقیق‌تر در برگه تغییرات

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

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

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

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

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

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

می‌توانیم از تنظیمات جدید Timeout برای رفع این مشکل استفاده کنیم. مرحله‌ای را که روی آیتم منو کلیک می‌کنیم، گسترش دهید. مرحله را با افزودن timeout ویرایش کنید و آن را روی ۶۰۰۰ میلی‌ثانیه (معادل ۶ ثانیه) تنظیم کنید.

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

مشکل کرومیوم: ۱۲۵۷۴۹۹

با استفاده از تب Back/forward cache، از قابل ذخیره بودن صفحات خود اطمینان حاصل کنید.

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

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

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

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

مشکل کرومیوم: ۱۱۱۰۷۵۲

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

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

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

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

مشکل کرومیوم: ۱۲۶۹۶۷۴

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

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

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

مشکل کرومیوم: ۱۱۳۰۸۵۹

نمایش خط‌کش‌ها با استفاده از دستور hover

اکنون می‌توانید منوی فرمان (Command Menu) را باز کنید و دستور « نمایش خط‌کش‌ها هنگام نگه داشتن ماوس روی صفحه» (Show ruler on hover) را اجرا کنید. خط‌کش‌های صفحه، اندازه‌گیری عرض و ارتفاع یک عنصر را آسان‌تر می‌کنند.

پیش از این، فقط می‌توانستید خط‌کش‌های صفحه را از طریق کادر تنظیمات > نمایش خط‌کش‌ها فعال کنید.

مشکل کرومیوم: ۱۲۷۰۵۶۲

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

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

مشکل کرومیوم: ۱۲۶۳۸۶۶

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

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

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

مشکل کرومیوم: ۱۰۵۰۰۲۱

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

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

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

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

برای مشاهده‌ی میانبرهای صفحه‌کلید در Chrome DevTools، به میانبرهای صفحه‌کلید بروید.

مشکل کرومیوم: ۱۲۵۵۰۷۳

فانوس دریایی ۹ در پنل فانوس دریایی

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

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

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

‎‏‎ ...

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

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

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

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

مشکل کرومیوم: ۱۲۴۱۸۴۸

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

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

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

[آزمایشی] نقاط پایانی در پنل Reporting API

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

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

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

مشکل کرومیوم: 1200732

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

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

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

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

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

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

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