#javascript #angular #performance #google-chrome #testing
#javascript #angular #Производительность #google-chrome #тестирование
Вопрос:
Если я использую Chrome Dev Tools, я могу сделать следующее:
- Откройте chrome dev tools (щелкните правой кнопкой мыши на странице в Chrome => проверить)
- Перейдите на вкладку «производительность»
- Нажмите кнопку записи
- Нажмите на кнопку в моем веб-приложении
- Остановить запись производительности
Затем я получаю небольшой кусочек на вкладке «Сводка» Chrome:
Мой вопрос таков:
Как я могу начать запись, остановить запись и получить эти итоговые значения (загрузка, написание сценариев и т.д.) В javascript?
Было бы действительно здорово, если бы кто-нибудь мог привести мне небольшой пример кода.
Мой вопрос не в том, как я могу обрабатывать навигацию по страницам, потому что для этого я использую C # selenium. Что я хочу сделать, так это запустить запись производительности, выполнить некоторые шаги с помощью webdriver, остановить запись и измерить производительность.
Комментарии:
1. Может быть, взгляните на этот пакет angular: github.com/angular/angular/tree/master/packages/benchpress
Ответ №1:
Это можно сделать двумя способами:
Первый:
Я бы рекомендовал заглянуть в puppeteer. Это проект, выполненный ребятами из Google Chrome, и в нем есть поддержка tracing . Как вы можете видеть здесь https://pptr.dev/#?product=Puppeteeramp;version=v1.13.0amp;show=api-class-tracing у них есть способ получить сгенерированную трассировку, и вам следует просто записать ее на свой компьютер, чтобы иметь возможность использовать позже.
Вызов tracing.start({}) использует path , который указывает файл для записи трассировки.
Вызов tracing.stop() может быть очень легко интегрирован с fs библиотекой для преобразования Buffer выходных данных в файл, который позже вы сможете прочитать с помощью chrome dev tools на случай, если вы не захотите использовать функцию start с path параметром.
Единственным недостатком является то, что вы не можете повторно использовать свой сценарий Selenium, и вам придется начинать более или менее с нуля, даже если Puppeteer утверждает, что это проще.
Второй (немного сложнее):
Используйте что-то похожее на эту библиотеку. https://github.com/paulirish/automated-chrome-profiling
Он написан на JS и отлично работает, как и ожидалось в примере. Если вы выполните шаги по установке пакета, а затем запустите команду node get-timeline-trace.js и загрузите сгенерированный файл ( profile-XXXXXXXX.devtools.trace ) в профилировщик Chrome, у вас получится очень хороший отчет.
Единственная проблема, которую я вижу, заключается в том, что вам нужно будет найти способ выполнить ваши скрипты selenium, передав ему экземпляр chrome, и я не знаю, насколько легко это может быть (возможно, PID мог бы сделать?)