چیزهای جدید در 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 استفاده کنید.

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

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

کروم 126 کروم 125 کروم 124 کروم 123 کروم 122 کروم 121 کروم 120 کروم 119 کروم 118 کروم 117 کروم 116 کروم 115 کروم 114 کروم 113 کروم 112 کروم 111 کروم 110 کروم 109 کروم 108 کروم 107 کروم 106 کروم 105 کروم 104 کروم 103 کروم 102 کروم 101 کروم 100 کروم 99 کروم 98 کروم 97 کروم 96 کروم 95 کروم 94 کروم 93 کروم 92 کروم 91 کروم 90 کروم 89 کروم 88 کروم 87 کروم 86 کروم 85 کروم 84 کروم 83 کروم 82

Chrome 82 لغو شد .

کروم 81 کروم 80 کروم 79 کروم 78 کروم 77 کروم 76 کروم 75 کروم 74 کروم 73 کروم 72 کروم 71 کروم 70 کروم 68 کروم 67 کروم 66 کروم 65 کروم 64 کروم 63 کروم 62 کروم 61 کروم 60 کروم 59