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.
Related
I have red other answers however none of them cover my case.
I have a page (http://www.lacertussoftware.com/) and there is some javascript in one of my included files that is setting the min height and height of my page on the body tag. How can i figure out what javascript is doing this? I have 7 or so files that if i remove my parallax effect / nice scrolling / the gap all go away and don't know what is doing it. Breakpointing is not useful as its on page load (especially because the code i have included on the page is not minified.)
Have you considered simply searching the sources for /min-height/ or /body.{0,50}min-height/ (and the CSSOM equivalent minHeight)?
Alternatively you can add a getter/setters for the style property to the HTMLElement/Element prototype which logs accesses to the style property and then forwards calls them to the native browser implementation. If that doesn't work you may also have to instrument .setAttribute() since the style property can be modified that way too.
Obviously this has to be done as early as possible in the document.
You could also try chrome's "break on attributes modification" feature in the the elements view of the dev tools. Or the DOMEvent breakpoints under sources.
You could try inserting a debugger; statement as a first thing in the dom ready handler, all js will pause.
Now right click on the element in the source and add a break on -> attributes modifications
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).
One benefit of calling functions directly from markup is that it is easier to track what's being called. I would like to know if there is an browser addon or something that supports a "Goto javascript source function" for each of the events attached (bound) to an element. Ideally this would take me to the original location it got bound.
You can use FireQuery add on with Firefox browser. It will show you all the events attached to a dom element.
https://addons.mozilla.org/en-US/firefox/addon/firequery/
The built-in Chrome 12 debugger will show you any Event Listeners for any object in the DOM. It can be quite useful, especially to find your way around a larger project. It shows you what event and where the code is.
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