Chrome DevTools - JavaScript CPU Profileing در Chrome 58

در Chrome 58 که در حال حاضر Canary است، پانل Timeline به پانل Performance، پانل Profiles به پانل حافظه تغییر نام داده است، و ویژگی Record JavaScript CPU Profile در پانل Profiles به مکان مخفی تری منتقل شده است. .

هدف بلندمدت حذف نمایه CPU قدیمی جاوا اسکریپت و ترغیب همه افراد به کار با گردش کار جدید است.

این راهنمای مهاجرت کوچک به شما نشان می‌دهد که چگونه یک نمایه JS را در پانل عملکرد ضبط کنید، و چگونه رابط کاربری پانل عملکرد با جریان کاری قدیمی که به آن عادت کرده‌اید نگاشت می‌شود.

دسترسی به پروفایل CPU قدیمی جاوا اسکریپت

اگر گردش کار قدیمی «Record JavaScript CPU Profile» را که قبلاً در پانل نمایه‌ها در دسترس بود ترجیح می‌دهید، همچنان می‌توانید به این شکل به آن دسترسی داشته باشید:

  1. منوی اصلی DevTools را باز کنید.
  2. ابزارهای بیشتر > JavaScript Profiler را انتخاب کنید. نمایه ساز قدیمی در یک پنل جدید به نام JavaScript Profiler باز می شود.

نحوه ضبط پروفایل JS

  1. DevTools را باز کنید.
  2. روی تب Performance کلیک کنید.

    پانل عملکرد Chrome DevTools.
    شکل 1 . پنل عملکرد

  3. به یکی از روش های زیر ضبط کنید:

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

نحوه نگاشت گردش کار قدیمی به جدید

از نمای نمودار گردش کار قدیمی، تصویر زیر موقعیت نمودار کلی استفاده از CPU (فلش بالا) و نمودار شعله (فلش پایین) را در گردش کار جدید به شما نشان می دهد.

نقشه برداری بین نمودار شعله در گردش کار قدیمی و گردش کار جدید.
شکل 2 . نقشه برداری بین نمودار شعله در گردش کار قدیمی (سمت چپ) و گردش کار جدید (راست).

نمای سنگین (از پایین به بالا) در برگه پایین به بالا موجود است:

نقشه برداری بین نمای پایین به بالا در گردش کار قدیمی و گردش کار جدید.
شکل 3 . نقشه برداری بین نمای پایین به بالا در گردش کار قدیمی (چپ) و گردش کار جدید (راست).

و نمای درختی (از بالا به پایین) در برگه Call Tree موجود است:

نقشه برداری بین نمای درختی در گردش کار قدیمی و گردش کار جدید.
شکل 4 . نقشه برداری بین نمای درختی در گردش کار قدیمی (سمت چپ) و گردش کار جدید (راست).

اگر ویژگی‌هایی را از دست دادیم، یا اگر سؤال دیگری درباره این مقاله دارید، در توییتر به @ChromeDevTools پینگ کنید یا یک مشکل GitHub را در مخزن اسناد ما باز کنید .