I have inherited a JavaScript application and I am trying to understand how it works using profiling in Chrome.
Chrome gives me the sequence of methods that are executed, but I only see the method name. How can I find out which object a given method is attached to?
If you want to see the call stack in Chrome dev tools for a specific method, you need to set a break point in the "Sources" panel.
Here's the entire process:
Run "Collect JavaScript CPU" Report
In the functions column, click the right-hand link (of the function in question) to jump to the appropriate source code line
Set a break point on that line
Re-run the script (usually via page refresh)
If break point is hit, call stack will be presented on the right-side column of the "Sources" panel
Related
I'm having trouble determining which functions are being called in the chrome inspector.
Under the performance tab, when I reload, it will sometimes show the actual function names being called, like "onEnter, homeController..etc, which is what I'm after.
However, this only happens very rarely and randomly as far as i can tell. Instead nine times out of ten, I just get the "Run Microtasks" WITHOUT any function names beneath it. (see below). This makes debugging very difficult.
How do I make sure that it ALWAYS shows the function names when I reload?
I am doing some testing on a product and I am attempting to edit one of my controller's scope functions (from Chrome Dev Tools) and then call this newly edited function either via the already-existing button that's set up to call it or via console. I'm having trouble with this though because my changes are not being picked up. I have been scouring SO for a couple hours but haven't been able to find a working answer yet. Is there a trick to refreshing a specific function (or possibly the controller itself) without reloading the page?
You should be able to change the code from the Sources panel.
Add your new code...
And then press Command+S (Mac) or Control+S (all other OSs) to save. When there's an asterisk next to the file name, it means that your new code hasn't been applied.
when you use ctrl+g on a reference, it finds you that within the same file
is there a more global search (all files in project) that finds direct references as well as as those places where jquery is invoked to get a reference to the object?
You can check the event that is occurring on any button or any html element when clicked.
All you need to do is instead of searching it right in the webstorm you can trace it accurately in the firebug.
Please make sure that firebug is installed or open the default developer's tool in your firefox or chrome browser.
To see the event that is occurring on an element :
right on the element and inspect it.
firebug will open up at the bottom of the browser and in the right-bottom corner you will find a box in which there are different tabs.
click on the events tab
you will see events such as click,mousehover....etc.
check the function that is getting called by clicking on that function name and it will show you the line of code that is being executed when you click that particular element with the js file name and the line number.
Hope that helps you out.
I am editing a complex website.
Some jQuery functions are called in response to clicking on different elements (links, div, anchor, etc.).
How can I see what JavaScript function is called when I press on an element?
In each of the functions, add a console.log(functionname). so whenever the function is called, you will see a line in console telling you the function's name.
I believe you can do this with the Profile button although I haven't used this myself yet.
you can place a breakpoint on some inside function and see if the program hits it (in firebug you can use script tab for placing breakpoint)
In chrome/safari you can inspect the call stack on any breakpoint. I'm positive that firebug will let you do the same thing.
So set a breakpoint at the place where you wan to see what's calling it and then inspect the call stack to see what chain of calls led you to that point.
Warning: jQuery does a lot of anonymous functions so it can be a little tricky to trace back.
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 comment 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?
The Timeline and Scripts developer tool can be used to accomplish 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.