CODEWITHSUNDEEP
javascriptgoogle-chromedebugginggoogle-chrome-devtoolsonload
user4621642
user4621642

Reputation:

Debugging Method in Chrome: Identify what line of code is executed after Onload event ended

I have a function in javascript. For example:

function Sample(){
    var myid_signature_image  = new Image(); 
    myid_signature_image.onload = function () {                              
        alert('Two');                                                                                                                           
    }; 
    alert('One');
}

I put a breakpoint in each line of the function. One is being displayed first, and then Two. Afer the onload event, some javascript function is interfering my code. How will I know what line of code is it using Google Chrome Developer Tools?

Upvotes: 1

Views: 121

Answers (2)

Michel
Michel

Reputation: 28259

Use the timeline of Chrome DevTools.

Filter out the purple (rendering) and green (painting) events as that is not what you are interested in.

You can programmatically add a marker in the timeline by using console.timeStamp("Marker name");. That might help you find the time range:

myid_signature_image.onload = function () {
    console.timeStamp("Image loaded");
};

The mark will be rendered in the timeline as a small colored bar, provided the Flame Chart view is not activated. Mouse over it to see the timestamp label. You can also user the search box so as to find the event. See capture below:

enter image description here

Once you found the event corresponding to the javascript executed after the image load event, you can jump to the script line of code from there.

Upvotes: 0

kerafill
kerafill

Reputation: 274

Fire up Developer Tools (Ctrl + Shift + I) and under Sources tab, put a breakpoint at the alert('Two'); line. Carry out your html actions thru the browser, in this case onload needs a refresh, and it will halt on the breakpoint. From here, just press F10 (step over next function call) and it will tell you what lines are executed next after your onload event.

Upvotes: 1

Related Questions