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

Kayce Basques

خوش برگشتید! این هم از جدیدترین‌ها.

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

تمام گره‌هایی که تحت تأثیر ویژگی CSS قرار گرفته‌اند را هایلایت می‌کند

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

شکل ۱. با نگه داشتن ماوس روی یک ویژگی margin حاشیه‌های تمام گره‌های تحت تأثیر آن تعریف، هایلایت می‌شوند.

Lighthouse نسخه ۴ در پنل Audits

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

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

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

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

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

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

   

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

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

   

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

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

   

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

4. روی برگه پیام‌ها کلیک کنید.

   

   شکل 7. برگه پیام‌ها

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

   

   شکل ۸. بررسی یک پیام دودویی

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

شکل ۹. مشاهده یک پیام دودویی به صورت Base64

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

اسکرین‌شات‌های منطقه‌ای به شما امکان می‌دهند از بخشی از نمای دید، اسکرین‌شات بگیرید. این ویژگی مدتی است که وجود دارد، اما گردش کار دسترسی به آن کاملاً پنهان بود. اسکرین‌شات‌های منطقه‌ای اکنون از منوی فرمان (Command Menu) در دسترس هستند.

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

   

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

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

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

   

   شکل ۱۱. انتخاب بخشی از نمای دید برای گرفتن اسکرین‌شات

فیلترهای سرویس ورکر در پنل شبکه

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

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

شکل ۱۳. فیلتر کردن بر اساس is:service-worker-intercepted

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

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

ضبط‌های عملکرد اکنون وظایف طولانی و First Paint را علامت‌گذاری می‌کنند.

برای مثالی از استفاده از پنل Performance برای تحلیل عملکرد بارگذاری صفحه، به Do less main thread work مراجعه کنید.

کارهای طولانی در ضبط‌های اجرا

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

شکل ۱۴. حرکت ماوس روی یک وظیفه طولانی در ضبط عملکرد

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

بخش زمان‌بندی یک ضبط اجرایی اکنون First Paint را مشخص می‌کند.

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

آموزش جدید DOM

برای آشنایی عملی با ویژگی‌های مرتبط با DOM، بخش «شروع به کار با مشاهده و تغییر DOM» را بررسی کنید.

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

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

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

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

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

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

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