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

کیسی باسکی

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

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

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

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

اولین رنگ معنی دار در بخش زمان بندی

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

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

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

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

شکل 2 . برجسته کردن یک گره متن

مسیر 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 را کپی کنید

شکل 3 . مسیر JS را کپی کنید

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

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

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

پنل حسابرسی اکنون Lighthouse 3.2 را اجرا می کند. نسخه 3.2 شامل یک ممیزی جدید به نام کتابخانه های جاوا اسکریپت شناسایی شده است . این ممیزی آنچه را که کتابخانه های JS Lighthouse در صفحه شناسایی کرده است، فهرست می کند. می‌توانید این ممیزی را در گزارش خود در زیر بهترین روش‌ها > ممیزی‌های پاس شده پیدا کنید.

کتابخانه های جاوا اسکریپت شناسایی شد

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

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

تایپ کردن "فانوس دریایی" در منوی فرمان

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

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

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

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

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

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

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

،

کیسی باسکی

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

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

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

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

اولین رنگ معنی دار در بخش زمان بندی

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

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

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

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

شکل 2 . برجسته کردن یک گره متن

مسیر 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 را کپی کنید

شکل 3 . مسیر JS را کپی کنید

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

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

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

پنل حسابرسی اکنون Lighthouse 3.2 را اجرا می کند. نسخه 3.2 شامل یک ممیزی جدید به نام کتابخانه های جاوا اسکریپت شناسایی شده است . این ممیزی آنچه را که کتابخانه های JS Lighthouse در صفحه شناسایی کرده است، فهرست می کند. می‌توانید این ممیزی را در گزارش خود در زیر بهترین روش‌ها > ممیزی‌های پاس شده پیدا کنید.

کتابخانه های جاوا اسکریپت شناسایی شد

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

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

تایپ کردن "فانوس دریایی" در منوی فرمان

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

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

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

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

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

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

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