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

کیس باسک
Kayce Basques
X GitHub

خوش آمدید! ویژگی‌های جدیدی که به DevTools در کروم ۶۴ اضافه می‌شوند عبارتند از:

ادامه مطلب را بخوانید، یا نسخه ویدیویی این یادداشت‌های انتشار را در زیر تماشا کنید.

مانیتور عملکرد

از مانیتور عملکرد برای مشاهده‌ی لحظه‌ای جنبه‌های مختلف بارگذاری یا عملکرد زمان اجرای یک صفحه، از جمله موارد زیر، استفاده کنید:

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

اگر کاربران گزارش می‌دهند که برنامه شما کند یا بی‌نظم است، برای یافتن سرنخ‌ها، Performance Monitor را بررسی کنید.

چرا سرعت بارگذاری مهم است : BookMyShow وقتی یک برنامه وب پیش‌رونده ساخت که روی سرعت تمرکز داشت، به افزایش ۸۰ درصدی در تبدیل‌ها دست یافت. اطلاعات بیشتر .

برای استفاده از مانیتور عملکرد :

  1. منوی فرمان را باز کنید.

  2. شروع به تایپ Performance کنید و سپس Show Performance Monitor انتخاب کنید.

    مانیتور عملکرد شکل 1. مانیتور عملکرد

  3. برای نمایش یا پنهان کردن یک معیار، روی آن کلیک کنید. در شکل 1 نمودارهای میزان استفاده از CPU ، اندازه پشته JS و شنونده‌های رویداد JS نشان داده شده است.

ویژگی‌های مرتبط:

  • پنل عملکرد . یک مسیر حیاتی کاربر را بررسی کنید و هر اتفاقی که در صفحه می‌افتد را ثبت کنید، از جمله فعالیت جاوا اسکریپت، درخواست‌های شبکه، میزان استفاده از CPU و موارد دیگر. همچنین می‌تواند برای تجزیه و تحلیل عملکرد بارگذاری استفاده شود. اطلاعات بیشتر .
  • پنل حسابرسی . مجموعه‌ای از تست‌های خودکار بارگذاری و عملکرد زمان اجرا را روی هر URL اجرا کنید. اطلاعات بیشتر .

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

نوار کناری کنسول

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

استفاده از نوار کناری کنسول فقط برای نمایش پیام‌های خطا

شکل ۲. استفاده از نوار کناری کنسول فقط برای نمایش پیام‌های خطا

نوار کناری کنسول به طور پیش‌فرض پنهان است. روی نمایش نوار کناری کنسول کلیک کنید. نمایش نوار کناری کنسول برای نشان دادن آن.

ویژگی‌های مرتبط:

  • کادر متن را فیلتر کنید . متنی را وارد کنید و کنسول فقط پیام‌هایی را نشان می‌دهد که شامل آن متن هستند. همچنین از الگوهای regex، فیلترهای منفی و فیلترهای URL پشتیبانی می‌کند.

پیام‌های کنسول مشابه را گروه‌بندی کنید

کنسول اکنون به طور پیش‌فرض پیام‌های مشابه را با هم گروه‌بندی می‌کند. برای مثال، در شکل 3، 27 نمونه از پیام [Violation] Avoid using document.write() وجود دارد.

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

شکل ۳. نمونه‌ای از گروه‌بندی پیام‌های مشابه در کنسول

برای باز کردن یک گروه و مشاهده‌ی تک تک نمونه‌های پیام، روی آن کلیک کنید.

نمونه‌ای از یک گروه گسترش‌یافته از پیام‌های کنسول

شکل ۴. نمونه‌ای از یک گروه گسترده از پیام‌های کنسول

برای غیرفعال کردن این ویژگی، تیک گزینه «شبیه‌سازی گروه» را بردارید.

ویژگی‌های مرتبط:

  • شما می‌توانید پیام‌های کنسول خودتان را با console.group() گروه‌بندی کنید.

لغوهای محلی

وای! ما در ابتدا قرار بود این ویژگی در کروم ۶۴ منتشر شود، اما برای رفع برخی از مشکلات، آن را به زمان مقرر موکول کردیم. ظاهراً رابط کاربری «چه خبر؟» به موقع به‌روزرسانی نشد. ببخشید!

این ویژگی در کروم ۶۵ ارائه می‌شود که تقریباً ۶ هفته پس از کروم ۶۴ منتشر خواهد شد. برای کسب اطلاعات بیشتر، به بخش «Overrides محلی» مراجعه کنید. اگر از ویندوز یا مک استفاده می‌کنید، می‌توانید همین حالا با دانلود کروم قناری، کروم ۶۵ را امتحان کنید.

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

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

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

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

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

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