For example, pretend there is Javascript code that will execute someFunction() when a button is clicked and I click that button. I wonder if there is some way to see that someFunction() was just executed. Is there a way to see what functions are executed in Chrome in real time?

If it is the Profiles tab in the inspector that does the trick, how exactly do you tell what functions fire in real time with that?

EDIT 1/21/2012 12:36p Pacific: From Brian Nickel's ment below, the Timeline tab in the Inspector is the way to see what happens in realtime, but how do you see the names of executed functions in the Timeline?

For example, pretend there is Javascript code that will execute someFunction() when a button is clicked and I click that button. I wonder if there is some way to see that someFunction() was just executed. Is there a way to see what functions are executed in Chrome in real time?

If it is the Profiles tab in the inspector that does the trick, how exactly do you tell what functions fire in real time with that?

EDIT 1/21/2012 12:36p Pacific: From Brian Nickel's ment below, the Timeline tab in the Inspector is the way to see what happens in realtime, but how do you see the names of executed functions in the Timeline?

• javascript
• google-chrome
• dom-events
• real-time

• 2 Actual realtime would be somewhat useless, as it would be way too fast to follow. Set breakpoints on the code you want to monitor. – deceze ♦ Commented Jan 20, 2012 at 5:44
• 2 I've seen individual functions listed in the timeline. – Brian Nickel Commented Jan 20, 2012 at 5:45
• I can't set breakpoints because its not my code and I don't know where to set the breakpoints. hehe. THat's what I'm trying to figure out! @BrianNickel, which timeline is this you are talking about? – trusktr Commented Jan 21, 2012 at 3:06
• @BrianNickel, aaaaaaaah, indeeed, the timeline seems to be exactly it! I didn't notice that before. Just select only "scripting" at the bottom when in timeline then press the "record" button and see everything that is happening! – trusktr Commented Jan 21, 2012 at 3:13
• @BrianNickel, I see examples of "Function Call" in the timeline, but it doesn't seem to show the name of the function that was called... Am I missing something? If I could just see the name of the function, that'd be perfect! – trusktr Commented Jan 21, 2012 at 3:17

2 Answers 2

The Timeline and Scripts developer tool can be used to acplish this goal.

• Open the developer tools panel and press Record under Timeline to begin tracking activity.
• Trigger the event you are interested in (i.e., in your example, click on the button), then stop recording (or continue to record, but be cogniscent of the amount of data you are collecting).
• Note the entires logged in the Timeline panel. Find the relevant event, and click the twistie arrow to the left of the timing bar for that event. This will expose the function calls associated with that event.
• Click on link to the right of the function calls to see the relevant JavaScript. (You ask for a function name, but keep in mind that the event may be associated with an anonymous function, so there isn't always a name available.)
• If you want to step through the event handler itself, insert a breakpoint at the line after the handler's declaration (presuming the event handler declaration is greater than one line). Alternatively, expand the Event Listener Breakpoints in the Scripts panel and check off the appropriate event type (as listed in the Timeline panel for the relevant event). Note that this approach will break on every instance of that event, instead of the sole invocation you are interested in.

If you are running into trouble with minified JavaScript and inserting breakpoints (because each line is so long), here's a tip: open the minified script file in the Scripts panel via the dropdown, then click on {}. This will enable Pretty Print, expanding the minified code into something more readable by adding whitespace. This allows you to insert breakpoints more granularity. Note that if you now return to the Timeline panel, script references (e.g., jquery.min.js:3) now use the pretty-printed line numbers, not the minified, whitespaceless ones.

There are a lot of good utilities you can use: console.trace();, debugger, etc.