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

خوش برگشتی! ویژگی‌های جدیدی که در Chrome 64 به DevTools می‌آیند عبارتند از:

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

نظارت بر کارایی

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

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

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

چرا بارگذاری پرف اهمیت دارد : BookMyShow با ایجاد یک برنامه وب پیشرو که بر سرعت تمرکز داشت، به 80 درصد افزایش در تبدیل دست یافت. بیشتر بدانید .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

نمونه ای از یک گروه گسترده از پیام های کنسول

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

تیک گزینه Group Similar را بردارید تا این ویژگی غیرفعال شود.

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

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

لغوهای محلی

اوف ما در ابتدا برنامه‌ریزی کردیم که این ویژگی در کروم 64 راه‌اندازی شود، اما به منظور صاف کردن برخی از لبه‌های ناهموار، آن را به مهلت نهایی نزدیک کردیم. ظاهراً رابط کاربری What's New به موقع به‌روزرسانی نشد. متاسف!

این ویژگی در Chrome 65 ارسال می‌شود، که تقریباً 6 هفته پس از Chrome 64 ارائه می‌شود. برای کسب اطلاعات بیشتر، Local Overrides را بررسی کنید. اگر از Windows یا Mac استفاده می‌کنید، اکنون می‌توانید Chrome 65 را با دانلود Chrome Canary امتحان کنید.

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

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

تماس با تیم Chrome DevTools

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

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

چیزهای جدید در 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