I have html document and many many js script files. How can i understand where js code set onclick event for element? There are thousands lines of code and look it all is very painfull.
Here is a simple solution:
Into Google Chrome, go to the Developer Tools ;
Menu > Tools > Developer Tools
Windows shortcut: Maj + CTRL + i
Mac OS X shortcut: Command + Option + i
Then, in the "Elements" section, found the element you are interested in ;
After this, on the right; you have a lot of information, like styles, metrics, etc. But if you scroll down, at the bottom, you have a section named "Event Listeners"
It references all the events and where they are declared.
You can also direcly access this pannel by right clicking on the element of the page, and choose "Inspect Element"
I have no ready-to-use solution but this might get you started: There is a jQuery plugin to intercept "DOM Mutation Events" (which include "when an attribute is modified".
Here are the docs and here is to the code.
If you're not using jQuery, either convert part of your code to jQuery or analyze the code of the plugin to see how it uses these events.
Related questions: firing event on DOM attribute change
Related
Goal:
Retrieve the javascript of the function that you can zoom in and zoom out from this webpage.
Problem:
I can't find the source code. Where can I find it by using chrome.
Thank you!
You can monitor the event listeners on DOM elements using the Elements tab of the Chrome DevTools; see this documentation.
Simply select your element of interest (say, an image) in the DOM tree, and display its event listeners. You can then narrow them down to click, mousedown, mouseup or whatever. Expand these events, and you'll see the JavaScript files that attached listeners on them. You may find what you seek there.
Before we part ways: if the JavaScript code is minified (a huge one-liner, unreadable file), don't forget that Chrome can pretty print it (to a certain degree) by clicking on the {} just on the bottom-left corner of the code panel.
I have a div tag in HTML that looks something like this:
<div id='tiptip_content">...</div>
Now, I can see that by moving my mouse over certain places (mouseover event) on the webpage the text content of this tag is changing. The problem is, that I can't find the piece of Javascript code which is editing this tag. Does anyone have a way, either using some debugging tools or by writing some kind of script to find the code responsible?
The Firefox dev tools that come with the browser (not Firebug) lets you see events on an element. Clicking the little 'ev' bubble next to the element in the DOM view lets you see the code that handles the event.
I would suggest to check it in 2 ways.
1) Use browser Dev tools to find if the corresponding <div> has any events associated with it.
The problem with dev tools that it cant find if events are triggered via jquery. So
2) Look for a javascript peice of code like
$("#tiptip_content").mouseover();
I've been wondering a long time about this. Is there a way in eg Chrome to see what events are bound to an element? Since many people now use jQuery with a syntax like the following:
$("a.subtle").click(function(){
//do something
});
Is there a way in the inspector to easily find this code? I know in the inspector you can go to the "event listeners"-tab to see what events are bound. Looking at an example I can see there is a click-event on the element with the js file of jQuery next to it, so this must somehow point to it, but of course it is obscured by all the jQuery code. Here's what I'm looking at:
So the question is, is there a quick way to find the jQuery code applied to an element? To be clear, I want to quickly find the code I posted up top.
I could search through the source code for a .click() on that class, but of course it could be done via its parent, or with .on(), or on so many bazillion ways..
Check out the Visual Event bookmarklet.
Here's a quote from their website:
Visual Event is an open source Javascript bookmarklet which provides debugging information about events that have been attached to DOM elements.
Visual Event shows:
Which elements have events attached to them.
The type of events attached to an element.
The code that will be run with [sic] the event is triggered.
The source file and line number for where the attached function was defined (Webkit browsers and Opera only).
Is there a tool available on Safari to find out when new elements are being added to the page. I have a page where there are invisible elements added at that cause the page to scroll. The elements that I thought where the cause, don't seem to be. I'd like to know if there is a way to find out.
Safari's built-in debugging tools are limited to what Chrome and Firefox offers and as far as I know you cannot set a break point to detect when a node has been inserted.
If you really insist on using Safari to debug, you could use event listeners like below:
document.addEventListener('DOMNodeInserted', function (event) {
console.log('This element was added to the page:', event.target);
});
Using the Web Inspector (or Chrome Developer Tools), right click on the BODY element (or a more specific one, where the elements actually get added) and in the context menu, choose "Break on subtree modifications". Your JS code will break whenever the selected element's subtree gets modified (elements added/removed).
I think you could use "mutation observers".
Somehow somewhere in my code one of the elements on the page gets a style attribute which I don't expect it to get. Namely, it gets style="position:fixed". I can see this happening in HTML tab in Firebug, but can't find it in the code. The application is fairly big and I can't simply look through all of the code to find the place, besides, several third-party libraries are being used (jQuery is one of them).
So, my question is, is it possible to somehow catch this style being changed and get the trace?
In Google Chrome, right click on an element in the page and select "Inspect Element." The Developer Tools window or pane will open with that element selected in the source view. You can then right click the selected tag and choose "Break on Attributes Modifications."
Well, after a couple of hours of googling and experimenting, it seems that the best one can do it setup a MutationEvent handler (Firefox supports them) like this:
var node_modified = function(evt) {
if(evt.attrName == 'style') {
alert('Style is changing from ' + evt.prevValue + ' to ' + evt.newValue);
}
}
var test_close = document.getElementById('test_close');
test_close.addEventListener('DOMAttrModified', node_modified, false);
An then set up some kind of logging throughout your code and see when this event gets triggered. Unfortunately, you can't just set up a breakpoint in the mutation event handler and see the stack trace, because event handler's stack trace has no information about the place in the code, where the event got triggered. Kind of logical, but I think that with some hacking this feature can be implemented in Firebug.
Thank you for your time!
In Firebug's HTML inspector you can right click on a node and there is an option to interrupt on attribute change.
Breakpoints persist through page reloads and you can also browse the call stack.
Sounds like you really need a debugger. Firebug has one built in, otherwise you can give Venkman a try, which I find a bit more cumbersome but perhaps is more effective..
Good luck! :)