I have ~ 100-200 javascript functions loaded on a web-site.
I want to determine what javascript function is executed when i click one item or another in Google Chrome.
How can i do it with Chrome Web Developer Tools?
Thanks!
One simple approach is to start Chrome Developer Tools, switch to the Sources panel and hit F8 (Pause Execution). This will break on the first executed JavaScript statement.
Another approach is to set an event listener breakpoint for mousedown or click: in the same Sources panel, expand the "Event Listener Breakpoints" in the righthand sidebar. Expand the "Mouse" item and check the events you want to break on (e.g. "click", "mousedown"). Then go click in your page and see the JS execution break in the DevTools. Enjoy!
An alternative to pausing execution(which usually works great, but doesn't work well on pages which frequently execute periodic code)
You can use chrome's profiler to record for a short period of time. After you finish recording, it will show you a summary of cpu time spent in any of the functions which were executed during recording. We don't really care about the cpu time, were just using this tool because it will show us which functions were executed.
Basically just start recording:
Note: in Chrome 58 and above, the "Profiles" tab is renamed to "Memory". In Chrome 88+, the tab name is "Performance".
Then do your action(eg, click a button on the webpage, or do whatever will cause the interesting code to execute). Then stop the recording and view the result:
Notice I'm using "top down" viewing mode - which shows you the call stack, and you can drill down to see which functions eventually got called. For example, some anonymous function was called first(likely as a result of setTimeout or maybe some click event handler), and then it called some method identified by s.track.s.t which then called s_doPlugins and so on...The important thing is that in top down mode, the entries at the top of the tree form the start of a call stack, and so they're usually a function registered by some timer function(setTimeout, setInterval, requestAnimationFrame, etc...) or some event handler(click, mousemove, load, etc...).
You can also use the "chart" viewing mode, which shows you which function was called at which time, plotted on a chart from left to right. This helps you identify which function you're really looking for because you probably have a sense of what time the code executed within your recording(eg, right in the middle).
btw - I believe most other modern browsers have similar capability.
Chrome has updated many times since I wrote this answer, so the screenshots are a bit outdated, but the concept of using the cpu profiler remains the same. I'll update the screenshots another day.
I want to determine what javascript function is executed when i click one item or another in Google Chrome.
Now there's a great extension called Visual Event that does exactly that. It only recognizes event handlers set via popular js libraries (jQuery, YUI, MooTools, Prototype, Glow) and DOM Level 0 events.
Related
Is it possible to view JavaScript function calls in the browser's JavaScript console? I know you can view XHR, but can you view function calls?
For example, I hover my mouse over some element on a page and a div pops up. I know there was a JavaScript function that was called to show the popup so it would be nice to be able to view this call in the console so I can see what function was called.
Am I missing something or is this not possible?
So basically you want to view JS calls in real-time?
The Firebug extension on Firefox offers that (http://getfirebug.com/javascript).
Basically, what you want to do is find your function within your code, then set a breakpoint on it. You should then be able to step through execution on it, just like a normal debugger. It shouldn't be hard to find the JS function associated with a and a particular event (e.g. mouseover) on that - is this page in question using straight JS or a framework? And if so, which one?
Google Chrome's built-in developer tools offer a smaller subset - depending on what you want, the Profile tab on it might be useful?
What exactly do you need to trace this JS function for? We might be able to recommend a better tool for you based on your particular need.
Check into the Firebug Profiler you can use it to see a break down of what's going on without having to manually add in console.log statements.
To use the profiler, just go to the Console tab and click the "Profile" button. Then use your app for a bit or reload the page and then click the "Profile" button again. You'll then see a detailed report that shows what functions were called and how much time each one took.
http://michaelsync.net/2007/09/10/firebug-tutorial-logging-profiling-and-commandline-part-ii
Understanding Firebug profiler output
Not unless you explicitly attach that information to the DOM.
You can, however, set breakpoints in the developers tools for some browsers, such as Safari, Chrome and Firebug for Firefox.
So, I wrote a few extensions, most disposable and one hopefully viable.
I'm still a bit confused about the "agenda", of "schedule" or whatchacallit, i.e. the order in which things happen, and the places where they live.
For example, I am writing a new one that shall do the following :
a browser action presents the user with a menu of 3 items
two of those items trigger actions to be executed immediately, while the third lauches a process that is to run undercover for an extended period (namely polling a certain web page at an interval, said web page needing not to be loaded in any visible tab or window).
Naturally I'd be tempted to assume that the long-term is to live in the background.js.
Now, I understand that the pop-up menu is an HTML document in its own right, living its life in its own bubble. It shall disappear right after the user cliked on an item, thereby taking its context with it to its grave. Right now I'm at a bit of a loss trying to figure out how it can trigger a background process.
Notwithstanding, I don't quite grasp what brings the background.js to life, even less so when it is specified as non persistent as is recommended.
Naturally, I'll RTFM again, but if you fellows could dumb this down to my poor level of understanding, I'd be so happy ...
Maybe as you said, you would need to RTFM again..
Background Page runs in the extension process and exists for the lifetime of your extension, until your extension is removed or the browser process terminates.
While Event Page, what chrome has recommended to use, is loaded only when they are needed. Take a look at Lifetime part, the following are some example that will cause the event page to load:
The app or extension is first installed or is updated to a new version (in order to register for events).
The event page was listening for an event, and the event is dispatched.
A content script or other extension sends a message.
Another view in the extension (for example, a popup) calls runtime.getBackgroundPage.
As for your question, 'how it can trigger a background process', if there are no events to catch or message to pass, you can just call runtime.getBackgroundPage to load the event page.
I can inspect source and check javascript code but I was wondering how could I check what piece of code is being executed depending on the time. For example, if 5 seconds after visiting a site myfunction() is called, I want a record of this.
In other words: I want to debug/inspect in real time to know what code is being executed depending on where I click or what I do, I want to check all functions attached.
There are many tools for this, in Chrome's developer tools for example you can go to the Timeline tab and hit the record button.
After you stop recording, it will show you what is being executed, the memory stack at the time, etc , etc.
For example, I want to debug a third party library. It has a plethora of functions within it and I have no idea where to start. Is there a quick way to find out which functions are being fired without prior knowledge of the code base and thus not knowing where to put the break points?
To see which functions are called, you should use the JavaScript profiler of your favorite debugging tool.
Those profilers output information about what functions were called from where and how often (i.e. how costly they are).
In Firebug (version 2.0):
Enable the Script and the Console panel
Switch to the Console panel
Click the Profile button
Do some actions, which call functions within the third-party code.
Click the Profile button again
Result:
In Firefox DevTools:
Switch to the Performance panel
Click the Start Recording Performance button
Do some actions, which call functions within the third-party code.
Click the Stop Recording Performance button
Switch to the Call Tree tab
Result:
In Chrome/Opera DevTools:
Switch to the Timeline panel
Click the Record button (or press Ctrl+E
Do some actions, which call functions within the third-party code.
Click the Finish button
Switch to the Aggregated details tab
Usually third parties have a variable or function they expose, for example jQuery, $ or window.whatever.
The browser developer tools (doesn't matter whether that are the Firefox DevTools, Chrome DevTools, Web Inspector in Opera or Firebug) offer a way to create watch expressions within their JavaScript debugging tools. Depending on the tool you use the related panel is called Watch Expressions, Watch or Variables.
In there, add the variable you DO know, expand it and start your search from there.
Almost every webpage has all sorts of timeouts and intervals that are continuously running, so using the pause javascript button in chrome has always just broke on those events and never given me a chance to test anything.
For example, I want to follow what happens when I click something on a page. Instead of digging through the resources, it would be helpful to pause the js, click the thing, and see what code is run. Unfortunately, as soon as I click pause, it breaks on one of the page's interval events.
Is there a way around this?
I think you may find this bookmarklet helpful...and usable in more than just Chrome (though that's where I like to develop too)
Visual Event