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

Kayce Basques

ویژگی‌های جدید و تغییرات عمده‌ای که در Chrome DevTools در Chrome 72 به وجود می‌آیند عبارتند از:

• معیارهای عملکرد را در پنل Performance تجسم کنید .
• گره‌های متنی را در درخت DOM هایلایت می‌کند .
• مسیر JS را از درخت DOM به یک گره DOM کپی کنید .
• به‌روزرسانی‌های پنل Audits ، شامل یک Audit جدید که کتابخانه‌های JS را شناسایی می‌کند و کلمات کلیدی جدید برای دسترسی به پنل Audits از منوی Command.

نسخه ویدیویی این یادداشت‌های انتشار

معیارهای عملکرد را تجسم کنید

پس از ثبت بارگذاری صفحه ، DevTools اکنون معیارهای عملکردی مانند DOMContentLoaded و First Meaningful Paint را در بخش Timings علامت‌گذاری می‌کند.

شکل ۱. اولین رنگ معنادار در بخش زمان‌بندی

برجسته کردن گره‌های متنی

وقتی ماوس را روی یک گره متنی در درخت DOM نگه می‌دارید، DevTools اکنون آن گره متنی را در نمای دید برجسته می‌کند.

شکل ۲. هایلایت کردن یک گره متنی

مسیر JS را کپی کنید

فرض کنید در حال نوشتن یک تست خودکار هستید که شامل کلیک روی یک گره است (شاید با استفاده از تابع page.click() در Puppeteer) و می‌خواهید به سرعت به آن گره DOM ارجاع دهید. روال کار معمول این است که به پنل Elements بروید، روی گره در درخت DOM کلیک راست کنید، Copy > Copy selector را انتخاب کنید و سپس آن انتخابگر CSS را به document.querySelector() ارسال کنید. اما اگر گره در یک Shadow DOM باشد، این رویکرد کار نمی‌کند زیرا انتخابگر مسیری را از درون درخت سایه ارائه می‌دهد.

برای دریافت سریع ارجاع به یک گره DOM، روی گره DOM کلیک راست کرده و Copy > Copy JS path را انتخاب کنید. DevTools عبارت document.querySelector() را که به گره اشاره می‌کند، در کلیپ‌بورد شما کپی می‌کند. همانطور که در بالا ذکر شد، این امر به ویژه هنگام کار با Shadow DOM مفید است، اما می‌توانید از آن برای هر گره DOM دیگری نیز استفاده کنید.

شکل ۳. مسیر کپی JS

DevTools عبارتی مانند زیر را در کلیپ‌بورد شما کپی می‌کند:

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')

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

پنل حسابرسی (Audits) اکنون Lighthouse 3.2 را اجرا می‌کند. نسخه ۳.۲ شامل یک حسابرسی جدید به نام کتابخانه‌های جاوا اسکریپت شناسایی‌شده (Detected JavaScript libraries ) است. این حسابرسی، کتابخانه‌های جاوا اسکریپتی را که Lighthouse در صفحه شناسایی کرده است، فهرست می‌کند. می‌توانید این حسابرسی را در گزارش خود در بخش Best Practices > Passed audits پیدا کنید.

شکل 4. کتابخانه‌های جاوا اسکریپت شناسایی‌شده

همچنین، اکنون می‌توانید با تایپ کردن Lighthouse یا PWA از منوی Command به پنل Audits دسترسی پیدا کنید.

شکل ۵. تایپ کردن lighthouse در منوی فرمان

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

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

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

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

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

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

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