Program to tell what scripts are running in a browser? - javascript

Is there a program that tells me the script that a browser executes for a particular event? for example, what script clicking on a button initiates?

Visual Event bookmarklet enables you to see DOM0 event bound to individual elements.
(source: myopera.com)
Webkit's WebInspector has EventListener inspector module.. but it often crashes Chrome, when you try to use it.

Related

Chrome/Firefox set breakpoint on all javascript onclick events at once

I am trying to debug a third-party HTML/Javascript page but I can't easily locate the script entry points to set breakpoints on them.
I want the debugger to break on any element's onclick event handler. At the moment if the page is set up with something like
document.getElementById("foo").onclick = bar;
then in general it isn't easy to determine that foo and bar are connected.
So, I want to break on all onclicks, wherever they may be.
Can I do this in Chrome or Firefox?
Chrome:
Chrome inspector -> sources -> Event Listener Breakpoints
Firefox:
get EventBug
You can read a bit more about eventBug in here: Using Firefox, how can I monitor all JavaScript events that are fired?

Using Firefox, how can I monitor all events that are fired?

I'm trying to debug a web page that makes heavy use of events, and so I need to monitor all events that are fired.
Most of the events are bound using jQuery. Hence, it would be particularly useful if there was a way to specifically monitor only those events.
Of course you can do just fine with Firebug, the console and the scripts tab where you can add breakpoints and watches, but you want to do it smarter / easier obviously.
There is a neat Firebug plugin called EventBug that just logs all the events and groups them by event type so you can expand and see what triggered them.
EventBug doesn't do it realtime, you have to refresh though.
One other way is to use the 'Log Events' feature against any DOM element in Firebug. This does do it realtime and you can see what order events are fired / triggered as well.
Try this:
Toggle open Firebug
Right click the element in HTML tab, if you want to see all events then right click <body>
Choose Log Events from the context menu
Make sure the Console tab is enabled
Click to enable the 'Persist' mode in the Console tab (otherwise Console tab will clear after the page is reloaded)
You may have to select Closed (manually)
Voila! watch events stream in the console tab
This is what you see with Log Events:
Also worth trying the FireQuery add-on for Firebug to see what elements in the DOM have jQuery events attached to them and what they are.
And as benvie's answer mentions, this is possible in webkit's developer tools as well.
This has been introduced some versions ago but as of Firefox 35 events associated with an element can be seen on the Inspector: next to the element which you want to see the events (in case there is any) there will be an icon with the 'EV' letters. Click it and you will see a small popup window with the events for that element.
More info: http://flailingmonkey.com/view-dom-events-in-firefox-developer-tools/
This doesnt exist in Firebug I believe, and the underlying problem is lack of support or lack of exposure at the api level. Alternatively, there's only a few ways to subscribe to DOM events: Element.prototype.addEventListener (and window.addEventListener and document.addEventListener and XMLHttpRequest.addEventListener and some others) aside from 'onevent' properties which are observable and interceptable.
But realistically, the WebKit debugger and Chromium's debugger (which is webkit's with extra points) allow one to debug and observe attached listeners. Sometimes it's easier to debug one browsers's bugs in another browser with better exposure of application/runtime state, even when that browser doesn't exhibit the bug.
https://developers.google.com/chrome-developer-tools/docs/elements
Event Listener Breakpoints have been introduced in FF 69 (and further improved in FF 71). Relevant docs are here.
It allows you to automatically break on any event of a given type. This screenshot (from above article) shows how it breaked on a Keyboard event:
The article further explains (1) how instead of breaking every time, it can just log matching events, and (2) how you can blackbox certain sources, to avoid having to wade through the internals of framework code (such as jquery, react etc.).
They present another screenshot of how that looks like:

Debugging JavaScript VS 2008

I am debugging 12K lines of JavaScript. Of course it is written by the off shore team. Now, I need to find out which js function is invoked when I interact with the UI. Is there anyway for me to just automatically jump into the function which is being executed?
I cannot really put a break point since I have no idea where to put the break point?
App runs only on IE7!
You can attach VS 2008 to a scripting host process like Internet Explorer. Notice that "scripting host" is specific to the Windows Scripting platform, which isn't used by other browsers.
Internet Explorer should be configured to "Allow script debugging" so that VS can attach to iexplorer.exe and be able to debug scripts running in it.
Bear in mind that this is an extremely frustrating debugging experience. If you can debug in more modern browsers (including IE9, which has decent developer tools), please do so!
Once you've attached Visual Studio to IE7, you can use the Break All option to terminate any running scripts. If no script is running, it will break the moment a script is executed, such as if you hover over an element with the mouse that has an onmouseover listener.
This might get somewhat cumbersome if you are looking for a specific piece of code. I don't think there's really a way around this besides just tracing through the code until you find the part that's relevent.
If this is a bug that happens when you click on a button, for example, look at the HTML code for the button. If it has an onclick handler, search for that function and set a breakpoint there, or add the word debugger; to the top of the function. If there is no onclick handler, search for the ID of the button in your Javascript code and see if any listener is bound to that DOM element.
There's really no reason why 12,000 lines of Javascript code should thwart your efforts to see what's going on. Find a repro for the issue, and then use Find to locate the relevant code in your Javascript file. Also, I realize your site might not work in Firefox or Chrome, but it might work in IE8 since it's fairly backwards compatible. IE8 has a better debugger and also the ability to explore various DOM elements which could come in handle for tracing what code is run where.
Hope this helps!

Chrome/FF API for operating with tab's Javascript

I need to control site's javascript via global hotkeys.
I'm trying to control javascript's audio player via Windows Global hotkeys.
But can't understand how to do it.
Language: C#/C++ (Qt). No matter.
Browser: Chrome (maybe other, no matter)
You can use jquery keypress http://api.jquery.com/keypress/
According to the documentation this event will only fire when the element it set upon is focussed.
$(someElement).keypress(function(e) {
console.log(e.which, e.keyCode);
// according to one of the comments e.which should be used in every browser other than IE.
})

Client side browsers debuggers: how can I see the list of handlers currently registered on an element?

Learning client side code of an existing site, would like to understand some activity that takes place totally at the client side.
Want to know what JS handlers are being called when I click on a specific element. Is there a way to see this information in some kind of debugger?
I'm using Firefox with Firebug, or Chrome
You can use the Chrome Developer tools to do what you are looking for if I'm reading your question correctly (apologies if I did not). In Chrome, right-click on the element in the rendered page and choose "Inspect Element". On the right side of the tool window that opens there's a section called "Properties" that will pop down a list when clicked on. Investigating the sub-categories should show you what functions are hooked up to what events. You can then use the "Scripts" area (tab at the top of the Development Tools window) to set breakpoints and observe the behavior in script files. Hope that helps.
Most sites will use some sort of Javascript framework which uses their own event management system, rendering firebug's or chrome dev tool's DOM inspection tools rather useless.
Luckily it isn't too difficult to tap into the event systems of these frameworks. There's FireQuery, which is an extension for Firebug that integrates very nicely with Firebug's DOM inspector, but it works only for jQuery. For other frameworks, there's also Visual Event

Categories