Does anyone know of a browser plugin (Ch or FF) or perhaps a Firebug plugin, which would show me all attached event javascript handlers to currently selected DOM element? I have to debug one site that I received to take care of, with lots of spaghetti-style javascript.
For Chrome, I guess the normal dev tool would do: http://screencast.com/t/KHKeMIj6BiDk (this is a Safari actually, but this should come with other webkit desktop browers as well)
In the meanwhile, read this stackoverflow question: How to find event listeners on a DOM node when debugging or from the JavaScript code?
Related
I'm developing a Chrome plugin. It injects a class name to every tag.
I have some problems with webpages such as facebook in which content is loaded afterwards when you scroll down.
I'd like to know if there a way to check if new content is loaded.
By now the only solution I could find is a
setInterval(function() {
Thanks.
There is a DOMSubtreeModified event (source) that Chrome supports - see this answer for details. Your code should look something like this:
document.addEventListener('DOMSubtreeModified', function() {
$("*:not(.my_class)").addClass('my_class');
}, true);
As Konrad Dzwinel said, you can use some Mutation Event listener
document.addEventListener("DOMSubtreeModified", methodToRun);
But note that the Mutation Events are performance hogs which can't really be tamed well (they fire too often and slow down the page a lot). Therefore, they have been deprecated over a year ago and should be used only when really needed. However, they work.
If you want this for a Chrome extension, you could use the new and shiny Mutation Observers from DOM Level 4 (follow the links there, they explain a lot!). Where DOMSubtreeModified fired a thousand times, MutationObserver fires only once with all the modifications contained and accessible.
Works for (as of 2012/06):
Chrome 18+ (prefixed, window.WebKitMutationObserver)
Firefox 14+ (unprefixed)
WebKit nightlies
I saw that FireBug can track CSS changes with its plugin FireDiff, but I have a CSS bug that only occurs on Google Chrome. So I would like to know if something similar exists for this browser.
Or maybe a JS layer that would intercept any .style change...
You should take advantage of the Breakpoints on DOM Mutation Events in Google Chrome.
The Google I/O 2011 Video on Chrome Dev Tools Reloaded goes into some depth.
I'm trying to debug some JavaScript, I want to find out what code gets executed when I hover over a certain div element (I've got no idea which bit of code, because there's no direct 'onmouseover' - I think there's a jQuery selector in place somewhere?).
Usually I'd use the "Break All" / "Break On Next" facility provided by Developer Tools / Firebug, but my problem is that other code (tickers, mouse movement listeners etc.) immediately gets caught instead.
What I'd like to do is tell the debugger to ignore certain JavaScript files or individual lines, so that it won't stop on code I'm not interested in or have ruled out. Is there any way to achieve that in IE (spit, spit!) - or could you suggest a better approach?
In FireFox this feature is called "Black boxing" and will be available with FireFox 25. It let's do exactly what you where looking for.
This feature was also introduced to Chrome (v30+) although it's tougher to find/configure. It's called "skip through sources with particular names" and Collin Miller did an excellent job in describing how to configure it.
Normally I'm for putting answers and howtos here instead of links but it would just end in me copying Collin's post.
Looks like you're looking for Visual Event.
You might want to take a look at Paul Irish's Re-Introduction to the Chrome Developer Tools, in particular the Timeline section (starts around 15 minutes into the video.)
You can start recording all javascript events - function executions (with source lines etc) and debug based on what events fired. There are other really handy debugging tools hiding in that google IO talk that can help you solve this problem as well.
If you're pretty sure it's a jQuery event handler you can try to poke around with the jQuery events.
This will overwrite all the click handlers (replace with the type you're interested in) and log out something before each event handler is called:
var elem = document.body; // replace with your div
// wrap all click events:
$.each($._data(elem).events.click, function(i, v) {
var h = v.handler;
v.handler = function() {
// or use 'alert' or something here if no Dev Tools
console.log('calling event: '+ i);
console.log('event handler src: '+ h.toString());
h.apply(h, arguments);
};
})
Then try calling the event type directly through jQuery to rule out that type:
$('#your_div').click()
You can use JavaScript Deobfuscator extension in Firefox: https://addons.mozilla.org/addon/javascript-deobfuscator/. It uses the same debugging API as Firebug but presents the results differently.
In the "Executed scripts" tab it will show you all code that is running. If some unrelated code is executing as well it is usually easy enough to skip. But you can also tweak the default filters to limit the amount of code being displayed.
If using are using IE 7.0 onwards, you should have developer toolbar from where you can debug. Just use breakpoint where you need, rest of the code will not stop.
Alternatavely you can define other applications like Interdev/ Visual Studio.net for debugging purpose too.
Is there any tool or addon which can be used for testing or identifying Javascript functions in real time (i.e. on click or some events )..
e.g. on a website, I want to know after clicking on a link, which all JS functions are being called/executed..I know sometimes it is stragightforward from the code, but in case it uses JS libraries like jQuery, the actual function call is made from otside..
How can I do that?
*I'll really appreciate if, alongwith the addon, you just write a short description as to where can I find the Javascript finction tracking in that **
Thank you.
Try Firebug. It's one of the most useful firefox addons. Grab it here:
http://getfirebug.com/
Dragonfly (Opera), or Firebug extension for Firefox, or any other good javascript debugger
See Visual Event. It is a bookmarklet that overlays element event handler information.
FireQuery is available as a firefox plugin which adds handler information inside of firebug.
Firebug includes a JavaScript profiler. Give it a try.
http://getfirebug.com/javascript
In Chrome, right click the page and choose Inspect element, go to the console, start javascripting! Choose the scripts tag to get debugger functionality.
This question already has answers here:
How can I debug my JavaScript code? [closed]
(20 answers)
Closed 6 years ago.
I have some old javascript code from around 2000-2002 which (surprisingly) still works in IE, but doesn't in Firefox, Chrome, Opera etc. I already found out about some quirks, some browsers do some things this way, some another. So there are code snippets on the internet to create some browser plattform independent function that does it.
Now my problem is, to even locate the problems. Right now, there are buttons in the website, when I click them, something happens in IE, but Firefox does just nothing. There isn't even an errormsg. I tried stepping through the javascript Firebug, but at some point in the code, when I do the next debug step, the script just seems to abort, without any error message. It doesn't continue with the next statement. Pretty strange and I have no idea what causes it or how to fix it. :/
So how do I debug javascript so I get error messages telling me what the problem is, for example, what function/variable I'm using isn't defined in firefox or when I use wrong parameters.
Thx & Best regards
Marc
Firebug for firefox is okay. The console for safari and chrome, IMO, is better. In either case, right click the page, hit "inspect element," and click the "console" tab in the pane that pops up. Now you'll see any errors and warnings generated by the page.
If you really want to debug the scripts you can click on the "Scripts" tab and either pause execution immediately or set a break point. Then, you can step through the execution of the script line by line, inspecting the call stack and watch list as you go.
Firefox doesn't popup error messages or put them in the status bar (like IE). You have to open the Error Console to see the errors.
Firefox puts Javascript errors in the Error Console, but also HTML and CSS errors and warnings.
As to what might not work in the code, there are plenty of things that are IE specific and won't work in any other browser. Also there is a big difference between IE in quirks mode and IE in standards compliant mode. Put a proper doctype in the page so that it's rendered in standards compliant mode, which will make IE more like other browsers, and some IE-specific quirks are removed. This might cause your old script to stop working, in which case you know that it's likely that it's some IE-specific feature that causes the problem.
There's FireBug, but it only works for Firefox.
EDIT: Doh, you already mentioned this in your question.