این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

Kayce Basques

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

معیارهای عملکرد را در پانل عملکرد تجسم کنید .
گره های متنی را در درخت DOM برجسته کنید .
مسیر JS را به یک گره DOM از درخت DOM کپی کنید .
به‌روزرسانی‌های پنل حسابرسی ، از جمله ممیزی جدید که کتابخانه‌های JS و کلمات کلیدی جدید را برای دسترسی به پنل حسابرسی از منوی فرمان شناسایی می‌کند.

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

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

پس از ضبط بارگذاری صفحه ، 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 استفاده کنید.

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