chrome.devtools.performance

شرح

از chrome.devtools.recorder API برای سفارشی کردن پانل Recorder در DevTools استفاده کنید.

برای آشنایی کلی با استفاده از Developer Tools APIs به خلاصه DevTools APIs مراجعه کنید.

دسترسی

Chrome 105+

مفاهیم و کاربرد

chrome.devtools.performance API به توسعه‌دهندگان اجازه می‌دهد تا با ویژگی‌های ضبط پانل پانل عملکرد در Chrome DevTools تعامل داشته باشند. می توانید از این API برای دریافت اعلان هنگام شروع یا توقف ضبط استفاده کنید.

دو رویداد در دسترس است:

  • onProfilingStarted : این رویداد زمانی فعال می شود که پانل Performance شروع به ضبط داده های عملکرد می کند.
  • onProfilingStopped : این رویداد زمانی فعال می شود که پانل عملکرد ضبط داده های عملکرد را متوقف کند. موضعی که ردیابی پشته فعلی را با cre مرتبط می کند هر دو رویداد هیچ پارامتر مرتبطی ندارند.

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

مثال ها

به این ترتیب می‌توانید از API برای گوش دادن به به‌روزرسانی‌های وضعیت ضبط استفاده کنید


chrome.devtools.performance.onProfilingStarted.addListener(() => {
  // Profiling started listener implementation
});

chrome.devtools.performance.onProfilingStopped.addListener(() => {
  // Profiling stopped listener implementation
})

انواع

RecorderExtensionPlugin

رابط پلاگینی که پنل Recorder برای سفارشی کردن پنل Recorder فراخوانی می کند.

خواص

  • بازپخش

    خالی

    Chrome 112+

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

    تابع replay به نظر می رسد: 

    (recording: object) => {...}

    • ضبط کردن

      هدف - شی

      ضبطی از تعامل کاربر با صفحه. این باید با طرح ضبط Puppeteer مطابقت داشته باشد.

  • رشته کردن

    خالی

    ضبط را از قالب پنل Recorder به رشته تبدیل می کند.

    تابع stringify به نظر می رسد: 

    (recording: object) => {...}

    • ضبط کردن

      هدف - شی

      ضبطی از تعامل کاربر با صفحه. این باید با طرح ضبط Puppeteer مطابقت داشته باشد.

  • stringifyStep

    خالی

    یک مرحله از ضبط را از قالب پانل ضبط به یک رشته تبدیل می کند.

    تابع stringifyStep به نظر می رسد: 

    (step: object) => {...}

    • گام

      هدف - شی

      مرحله ای از ضبط تعامل کاربر با صفحه. این باید با طرح گام Puppeteer مطابقت داشته باشد.

RecorderView

Chrome 112+

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

خواص

  • در پنهان

    رویداد<functionvoidvoid>

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

    تابع onHidden.addListener به نظر می رسد: 

    (callback: function) => {...}

    • پاسخ به تماس

      تابع

      پارامتر callback به نظر می رسد: 

      () => void

  • در نشان داده شده است

    رویداد<functionvoidvoid>

    هنگامی که نما نشان داده می شود شلیک می شود.

    تابع onShown.addListener به نظر می رسد: 

    (callback: function) => {...}

    • پاسخ به تماس

      تابع

      پارامتر callback به نظر می رسد: 

      () => void

  • نشان می دهد

    خالی

    نشان می دهد که برنامه افزودنی می خواهد این نمای را در پانل Recorder نشان دهد.

    تابع show به نظر می رسد: 

    () => {...}

مواد و روش ها

createView()

Chrome 112+
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

یک نمای ایجاد می کند که می تواند پخش مجدد را انجام دهد. این نمای در داخل پنل Recorder تعبیه خواهد شد.

مولفه های

  • عنوان

    رشته

    عنوانی که در کنار نماد برنامه افزودنی در نوار ابزار Developer Tools نمایش داده می شود.

  • pagePath

    رشته

    مسیر صفحه HTML پانل نسبت به فهرست برنامه افزودنی.

برمی گرداند

registerRecorderExtensionPlugin()

chrome.devtools.recorder.registerRecorderExtensionPlugin(
  plugin: RecorderExtensionPlugin,
  name: string,
  mediaType: string,
)

یک افزونه افزونه Recorder را ثبت می کند.

مولفه های

  • نمونه ای که رابط RecorderExtensionPlugin را پیاده سازی می کند.

  • نام

    رشته

    نام افزونه.

  • نوع رسانه

    رشته

    نوع رسانه محتوای رشته ای که افزونه تولید می کند.