CODEWITHSUNDEEP
javascriptangularperformancegoogle-chrometesting
Tobias von Falkenhayn
Tobias von Falkenhayn

Reputation: 1729

How to get chrome performance metrics in javascript

If I use Chrome Dev Tools I can do the following:

  1. Open chrome dev tools (right click on the page in chrome => inspect)
  2. Navigate to the "performance" tab
  3. Click the record button
  4. Click on a button in my web app
  5. Stop performance recording

Then i get a nice little pie in the "Summary" tab of chrome:

enter image description here

My question is:

How can i start recording, stop recording and get those summary values (Loading, Scripting etc.) in javascript?

It would be really nice if someone could give me a little code example.

My question is not on how I can handle page navigation, cause for this I am using C# selenium. What I want to do is start performance recording, execute some steps with the webdriver, stop recording and measure the performance.

Upvotes: 2

Views: 2126

Answers (1)

Alejandro Vales
Alejandro Vales

Reputation: 2937

There are two ways you could do it:

First one:

I would recommend looking into puppeteer. It's a project done by the guys from google chrome and it has support for tracing. As you can see here https://pptr.dev/#?product=Puppeteer&version=v1.13.0&show=api-class-tracing they have a way to retrieve the generated trace, and you should just write it to your computer to be able to use it later.

The call of tracing.start({}) uses a path which specifies the file to write the trace to.

The call of tracing.stop() can be very easily integrated with the fs library to convert the Buffer output to a file that later you can read with the chrome dev tools in case you wouldn't want to use the start function with the path parameter.

The only downside, is that you can't really reuse your Selenium script and you would have to start more or less from the scratch, even thought Puppeteer claims to be easier.

Second one (a little more difficult):

Use something similar to this library. https://github.com/paulirish/automated-chrome-profiling

It's written in JS, and it works perfectly as it's expected with the example, if you follow the installation steps of the package and then run the command node get-timeline-trace.js and load the file generated (profile-XXXXXXXX.devtools.trace) to the chrome profiler you will have a very nice report.

The only problem I see is that you will have to find a way to execute your selenium scripts passing it the chrome instance to it, and I don't know how easy that could be (maybe the PID might do?)

Upvotes: 2

Related Questions