Chrome developer tool trace function sequences - javascript

I am a newbie to Chrome developer tool and I found it is very powerful. Currently, I am looking for a way to trace the flow of functions when I open a webpage and also, I am wondering is there s how can I find which function does an element trigger when it is clicked. Here are some examples:
1) Tracing function sequences:
For example, there are 20 functions in my script. Some of the functions will call the other functions. I would like to trace the function calls. Like which function is called first and then what functions are called following by this function. Since these 20 functions are pretty huge, it is quite hard to follow the sequence by just looking at the script.
2) Which function does an element trigger in javascript:
For example, I have one button on the webpage, there is one or are more functions associated with this element. By using the Event Listener of Chrome developer tool, I can only see some DOM elements under "Click" rather what function it is associated with.
Is there a way to find associated functions?
I appreciate you help!

In Sources panel, there is a Call Stack tab, in which you could see the function call stack when code execution was halted at break points.
In Elements panel, there is an Event Listeners tab, in which you could see all event handlers bond to the element, as well as where it is in source code.
I suggest you to read some tutorials, for example this and this, and there are more. So that you could know more about it and boost your development.

Related

How to review jQuery function execution related to specific events using Firebug?

I cannot for the life of me, after reading all of the documentation and probably twenty different Stack posts on the topic, figure out how to very simply view a log of JavaScript/jQuery function execution on a particular page using Firebug.
For example, I am attempting to determine which events are tied to a particular event (link being clicked, resulting in odd/unexpected behavior). I've heard over and over again that Firebug is the tool to use for this, but after ripping out the last few hairs remaining on my head over the last several hours, I can't figure it out.
Can someone please dummy-proof this for me? I'm not profiling. I'm not trying to look at the resources. I just want to see what JavaScript or jQuery code is executed as it relates to a specific user event (in this case, any link being clicked).

How to generally find out what javascript controls the behavior of a general element on a webpage?

Look at this fiddle http://jsfiddle.net/52VtD/2635/
Inside it you can see one tooltip working.
Suppose we weren't looking at a fiddle though, and couldn't see the javascript source, but we wanted to know what was controlling this tooltip behavior?
The answer is
$("#tooltip1").tooltip();
So how do we find that answer using chrome or firefox inspector, or some other debug/browser inspector stuff? Preferably it would be quick, as opposed to downloading all .js files and prettifying them in an IDE and then manually searching.
There is no quick answer to this. You pretty much have to analyze a specific situation and see what clues you can then go look for.
In this particular case, you're going to suspect that there's an event listener attached to the #tooltip object. You can first look in the Chrome debugger for event listeners. Right click on the button, select Inspect Element, click on the Event Listeners tab and then look at the event listeners. In this particular case, you will see a bunch of them for that object. What you want is mouseout and mouseover. But, when you see where the event listeners are attached, it just take you to the internals of jQuery. This is a challenge with a library because it's the library that actually attached the event as part of some higher level API that the developer used.
So, now you know that jQuery was used to attach these events. You need to figure out where in the code these events where attached. To do this, you need to develop a theory about how the developer identified this particular object in jQuery. Since there is no particular structure to this simple document, the likely way that the developer found this particular object is with a "#tooltip" selector passed to some jQuery function. So, at this point, I would search all the JS in the page for "#tooltip" and see what you find.
While still in the Chrome debugger, you can hit Ctrl+F and enter #tooltip. Then, hit enter several times as it takes you to different uses of that and the third time, it will take you to:
$("#tooltip1").tooltip();
And, you will have your answer. Obviously, every problem like this is a bit different and it takes some detective work and searching to figure out what clues to search for in the Javascript. Some cases are much harder than others.
In *Chrome** you can bring up the developer tools buy clicking f12 and on the right you should see a tab titled "Event Listeners". Here you should see the event listeners for the page your are on.
This should have all the Event Listener info you could ever want :)

debugging javascript without knowing exact breakpoint location

I would like to debug a javascript file named somescript.js, to have an idea what it is used for and when. This file has lots of functions. Manually setting breakpoints in each function would be very tedious.
Is there a method in any browser to either:
Automatically set breakpoints at the beginning of every function in
somescript.js file, or
Tell the debugger to pause next time when it reaches any function in
somescript.js
I know there is a button "Pause on exceptions" but it results in stopping inside libraries (jquery). After pressing "Step out" many times it finally reaches a function in somescript.js - one function. I need to know what the rest of the functions are doing, but don't know when they are called.
I'm not aware of any capability to set a breakpoint at the start of every function in a module. I think what you will need to do is to study the code a bit and figure out what the main entry points are in the module or figure out which functions you most want to trace and understand and then set breakpoints in those specific functions.
One can often search for the installation of event handlers and figure out where various actions start, set breakpoints there and then step through them to learn how that particular action works.
Sometimes this is an iterative process too. As you step through some things, you learn enough about other good places to set breakpoints. Keep in mind that once you hit a breakpoint, you can also look at the call stack and see how you arrived there and perhaps set breakpoints further up the call chain for the next time you execute that function. Debugging/learning like this is a bit of an art. You find a place to start, trigger that breakpoint, learn some things that lead you to other breakpoints to set, learn some more and so on.

Is there a way to see what Javascript functions (the name of the functions) execute in real time in Chrome's Inspector?

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.

How to identify the next running javascript statement or function entry point?

In many website pages, there are a lot of javascript codes to support the functionalities. The programmer can attach the event on the element via many methods. They can add the event directly in the element definition like
<input type="button" onclick="dosomething();">
or they can do this by javascript codes like:
<script>
document.getElementById('ele').onclick = function(){};
</script>
And usually there are so many codes here so that it's sometimes difficult for us to identify which event function are called after the element event is triggered.
So my question is: is there any method or plug-in can help to identify the next running javascript statement or function entry point after one element event is triggered?
One thing you could do is, define a function that will grasp all events assigned to each type of elements and show them somewhere on the page(preferably at the bottom). To trigger that, function you may add a button which should be clicked.
Of course, all this must be done in debugging state and you would certainly want to remove the button and the display panel when releasing the App.
We used to do this for our project, may not be elegant but it does serve the purpose.
There's no code that "emulates" the debugging of plugins like Firebug - however in case of "simple" onclick function simple alert will just show it:
var element = document.getElementById('ele');
alert(element.onclick);
And to programmatically trigger it:
element.onclick();

Categories