موارد جدید در DevTools (Chrome 74)

Kayce Basques

خوش آمدید! در اینجا چه چیزی جدید است.

نسخه ویدیویی این صفحه

تمام گره های تحت تأثیر ویژگی CSS را برجسته کنید

ماوس را روی یک ویژگی CSS که بر مدل جعبه گره تأثیر می گذارد، مانند padding یا margin ، نگه دارید تا همه گره های تحت تأثیر آن اعلان را برجسته کنید.

شکل 1 . قرار دادن margin حاشیه‌های تمام گره‌های تحت تأثیر آن اعلان را برجسته می‌کند

Lighthouse v4 در پنل حسابرسی

اهداف Tap جدید اندازه مناسبی ندارند ، بررسی می‌کند که عناصر تعاملی مانند دکمه‌ها و پیوندها در دستگاه‌های تلفن همراه به اندازه مناسبی بزرگ و از هم فاصله دارند.

طبقه بندی PWA یک گزارش اکنون از یک سیستم امتیازدهی نشان استفاده می کند.

شکل 3 . سیستم امتیازدهی نشان جدید برای دسته PWA

نمایشگر پیام دودویی WebSocket

برای مشاهده محتویات یک پیام WebSocket باینری:

1. پنل Network را باز کنید. برای یادگیری اصول اولیه تجزیه و تحلیل فعالیت شبکه، به بررسی فعالیت شبکه مراجعه کنید.

   

   شکل 4 . پنل شبکه

2. برای فیلتر کردن همه منابعی که اتصال WebSocket نیستند، روی WS کلیک کنید.

   

   شکل 5 . پس از کلیک بر روی WS فقط اتصالات WebSockety نشان داده می شود

3. روی نام اتصال WebSocket کلیک کنید تا آن را بررسی کنید.

   

   شکل 6 . بررسی اتصال WebSocket

4. روی تب Messages کلیک کنید.

   

   شکل 7 . تب پیام ها

5. برای بررسی یکی از ورودی های پیام باینری کلیک کنید.

   

   شکل 8 . بررسی یک پیام باینری

از منوی کشویی در پایین نمایشگر برای تبدیل پیام به Base64 یا UTF-8 استفاده کنید. روی Copy to clipboard کلیک کنید برای کپی کردن پیام باینری در کلیپ بورد خود.

شکل 9 . مشاهده یک پیام باینری به عنوان Base64

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

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

1. روی DevTools تمرکز کنید و سپس Control + Shift + P یا Command + Shift + P (Mac) را فشار دهید تا Command Menu باز شود.

   

   شکل 10 . منوی فرمان

2. area تایپ کنید، Capture area screenshots را انتخاب کنید، سپس Enter را فشار دهید.

3. ماوس خود را روی قسمتی از درگاه دید که می‌خواهید از آن اسکرین شات بگیرید، بکشید.

   

   شکل 11 . انتخاب بخشی از viewport برای اسکرین شات

Service Worker در پنل Network فیلتر می کند

برای مشاهده درخواست‌هایی که توسط یک سرویس‌گر ایجاد شده‌اند ( initiated ) یا به‌طور بالقوه تغییر intercepted شده‌اند، در کادر متنی فیلتر پنل شبکه، نوع is:service-worker-initiated is:service-worker-intercepted .

شکل 12 . فیلتر کردن بر اساس is:service-worker-initiated

شکل 13 . فیلتر کردن بر is:service-worker-intercepted

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

به روز رسانی پنل عملکرد

ضبط‌های عملکرد اکنون وظایف طولانی و First Paint را مشخص می‌کنند.

برای مثالی از استفاده از پنل عملکرد برای تجزیه و تحلیل عملکرد بارگذاری صفحه ، کمتر کار با موضوع اصلی را بررسی کنید.

وظایف طولانی در ضبط عملکرد

ضبط‌های عملکرد اکنون کارهای طولانی را نشان می‌دهند.

شکل 14 . شناور کردن روی یک کار طولانی در یک ضبط عملکرد

اولین Paint در بخش Times

بخش زمان‌بندی ضبط عملکرد اکنون First Paint را نشان می‌دهد.

شکل 15 . اولین Paint در بخش Times

آموزش جدید DOM

برای بازدید عملی از ویژگی‌های مرتبط با DOM ، شروع به مشاهده و تغییر DOM کنید.

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

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

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

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

• بازخورد و درخواست های ویژگی را برای ما در crbug.com ارسال کنید.
• یک مشکل DevTools را با استفاده از more_vert گزینه های بیشتر > راهنما > گزارش مشکل DevTools در DevTools گزارش کنید.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد موارد جدید در ویدیوهای DevTools YouTube یا DevTools Tips ویدیوهای YouTube بگذارید.

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

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