CODEWITHSUNDEEP
javascriptgoogle-chromeperformance-testingprofiler
Ayan
Ayan

Reputation: 2380

Profiling Javascript performance using API

Hey I have been exploring the google-chrome debugging tools and profiling tools. Its truly amazing. One useful stuff I encountered is I get the call tree of the executions and their time taken (both self time and total children time count) in a full tree structure.

So I would like to know if we can get the call-tree with their timings in a tree structure using some JS API. I can use this tree timings to benchmark the different versions of my code and various other cool stuffs could be done, if I can automate.

I couldnot find much useful stuff over net. Can you give me some direction to this? Thanks in advance.

Let me know in comments if some parts are unclear in the question.I will rephrase myself.

Upvotes: 2

Views: 962

Answers (2)

Gideon Pyzer
Gideon Pyzer

Reputation: 24068

If you want to benchmark different versions of your app, you can easily achieve this in Profiles in Chrome DevTools. You can record and save them to your computer, and then load them again anytime in the future. It's not just for the current session.

For example, you record your profile for Version 1. A few days later you load up your app in Chrome, record the new Profile and then import the old one and compare the charts or the tree view.

You could even open the saved files on your computer, which are stored in JSON format. You have all the data you need in there to play with. You can run a server to parse that data and extract the relevant information into a format you like. The amount of data can be huge and slow to handle though.

Profiles

Update regarding comment:

Both console.timeline and console.timelineEnd were deprecated and replaced with console.time and console.timeEnd. However, there are no return values to store, so you can't do anything with the results in JavaScript. However, you can use window.performance:

var start = window.performance.now();
// your function
var end = window.performance.now();
var timeSpent = (end - start);
var stack = new Error().stack; // get call stack

You could then do what you like with the results. If you want to time a function from a 3rd party, you could override it and apply the original function in between:

var oldFunc = myFunc;

myFunc = function() {
    var start = window.performance.now();
    var returnVal = oldFunc.apply(this, arguments);
    var end = window.performance.now();
    var timeSpent = (end - start);
    var stack = new Error().stack; // get call stack
    return returnVal;
}

Upvotes: 2

Daniel Bank
Daniel Bank

Reputation: 3899

You can use console.profile() and console.profileEnd() to start and stop recording a profile. After it runs, you can see the result in the Profiles tab of the developer tools.

Upvotes: 1

Related Questions