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

کیسی باسکی

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

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

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

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

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

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

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

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

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

سیستم امتیازدهی نشان جدید برای دسته PWA

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

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

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

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

    پنل شبکه

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

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

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

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

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

    بررسی اتصال WebSocket

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

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

    تب پیام ها

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

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

    بررسی یک پیام باینری

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

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

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

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

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

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

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

    منوی فرمان

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

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

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

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

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

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

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

فیلتر کردن بر اساس: سرویس-کارگر آغاز شده است

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

فیلتر کردن بر اساس: service-worker-intercepted است

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

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

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

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

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

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

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

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

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

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

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

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

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

آموزش جدید DOM

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

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

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

تماس با تیم Chrome DevTools

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

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

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

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

کروم 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