I inspected an element inside an iframe within Firebug. I am able to select the element in the page and it is shown within the HTML panel. The element has a JavaScript call on select, which I am unable to see within the Script panel to add a breakpoint to it.
I tried to call the function using the command line, though that doesn't work.
The Events side panel is where you can set a breakpoint for the event handler. While the element is selected, switch to that panel, right-click the onchange(event) event handler and choose Set Breakpoint.
Note that Firebug won't work anymore once multi-process Firefox is enabled (which seems to be the case in Firefox 49).
As far as I can see, unfortunately, neither the Firefox nor the Chrome DevTools allow to set a breakpoint on the event handler. They only allow you to jump to the place where the handler is called within the HTML code.
Related
I am working on a website that uses masonry. I know that the masonry rebuilds itself when the window width changes and I want to be able to trigger that rebuilding at will, like when one of the elements' height is changed. The problem is I don't see any event listeners related to the window's width that I can copy the code from. Is there a way I can see which events are being triggered at the moment?
In Chrome Developer Tools (press F12 within Chrome), go to the Sources tab.
In the right hand pane, expand > Event Listener Breakpoints and tick the ones you want to break on.
Alternatively, if it is using jQuery event handling, you can install the jQuery Debugger extension for Chrome Devtools, and it gives you a jQuery Events tab in the right hand column on the Elements tab. That shows you what events are bound to using jQuery for the selected element. Try selecting the <html> tag or the <body> tag and see if you can find it there.
One final option is to search in the JS you are using for the string "resize".
I'm trying to debug a 3rd party widget (+1 button to be exact). Specifically, I'd like to set a breakpoint in Chrome that stops when a button in the widget is clicked.
I would like to break on the 3rd party code that handles to click event. Is there a Chrome extension (or something else I haven't thought of) to help me find the right place in the code to break on?
You can make use of Chrome's Developer Tools; no extension is required.
I made a +1 button example here: http://jsfiddle.net/rPnAe/.
If you go to that fiddle and then open Developer Tools (F12), then go to Scripts and expand Event Listener Breakpoints and lastly expand 'Mouse' and tick the 'click' checkbox, then whenever you click somewhere (which includes an event listener), the debugger will now break at the line of code which contains the listener function.
I'm trying to find a jQuery code that controls a span element in my template.
For example:
<span class="ccontent"
That class opens a info window when hovered upon.
How can i find the jQuery code that relates to this in my template using Chrome and in what file it resides?
Try using Visual Event 2
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 the event is triggered
The source file and line number for where the attached function was defined (Webkit browsers and Opera only)
In Chrome, right click and select "Inspect Element" to open up your inspector. On a Mac you can use Command + Option + I
After that click Resources tab, then Command + F (again, Mac, not sure about PC). Type ccontent into the search box and you will see the number of references to that class-name. Click through until you see all the places in your code where it's mentioned.
The answer from Matthew Davis will work when you can search through your code for the id (e.g. "#ccontent") in question, but won't work as well when the element is indirectly referred to e.g. by class or by element type.
The Visual Events bookmarklet will also help you, but sometimes it will just list the minified JQuery code for the event that is bound to the element.
When doing a mouseover or something else that results in a change to the DOM or a change to an attribute of the thing you are hovering over, and the first two (easier!) options fail, you can try the following:
Go into the Elements tab of the Chrome Developer tools (CTRL+SHIFT+I).
If you are interested in tracking the attributes changing of an element, right click on it and click "Break On > Attributes modifications":
If you are interested in something changing in the DOM (e.g. a modal appearing), right click on the body of the document, or the relevant container div, and click "Break On > Subtree modifications":
Then do your mouseover or trigger whatever event you are interested in on the element.
The Chrome Debugger should launch, and on the right-hand side is the Call stack:
You can click on the different items in the call stack to see where a call was triggered in the Source tab.
I have a div which is getting hidden/displayed by a click on another element. I can see the div's visibility CSS property changing in Firebug. The div is initialized using Microsoft Javascript library in code using:
Sys.Application.add_init(function() {$create.....
How do I get the actual Javascript which runs during run time with every click? Is there a way to intercept the js call and see what code is exactly running, like in Firebug or Chrome's Developer Tools?
(This is NOT a question on how to hide/unhide an element. I know how to do this)
I know in Chrome Dev Tools what you can try to do is:
Find the element clicking on which is causing your div to hide.
Expand it's Event Listeners in the right bar
Expand the click event
Then click the source file displayed there for the click event.
It would take you to where the click event function, so you can put a break point there. This is what you're asking, right?
I am trying to reverse engineer a Microsoft CRM 2011 web page. The page loads a massive number of scripts and HTML. My current development focus is on the click event of a checkbox element on the page. Clicking the element causes behavior on the page to change, and I want to walk through the code that handles this.
The problem is the checkbox's click handler is attached during page load via an anonymous method. So the code is there, but trying to find it is asking one to locate a needle in a haystack.
Is there a technique using the Internet Explorer debugging tools to somehow make the debugger stop when the checkbox is clicked? There may not be, but I thought I would ask.
Your best bet is to run this in the console:
document.getElementById('theCheckBoxId').onclick
If null appears in the console, you can continue reading. Otherwise the onclick handler and it's code should appear right there in the console.
Use Chrome's dev tools: Right click something on the page -> inspect element. You'll see this:
Go to "SOURCES" (no longer called "Scripts") and there is a '||' Pause button as you see in the screenshot. If the page doesn't fail, you can check the checkbox, and since scripts are paused, you'll see the code for the anonymous function become highlighted and the page will be frozen. You can then use the tools to step through the code.
However, we can certainly better help you with what you actually want from the page...
You can also use attach a onbeforescriptexecute from the console: https://developer.mozilla.org/en/DOM/element.onbeforescriptexecute
You would be something like this in the console:
document.getElementById('theCheckBoxId').onbeforescriptexecute = function (e) {
alert('hey same thing as pausing the script!');
console.error('script with this id about to run: ' + e.target.id);
//Could also try .src .innerText etc.
//Reference this: https://developer.mozilla.org/en/DOM/element.onbeforescriptexecute
//the full argument to checkout in the console:
console.error(e);
};
You can also play around with the currentScript method: https://developer.mozilla.org/en/DOM/document.currentScript
You can also right click and inspect the check box, and then on the right panel of dev tools, look at the 'Click' event listener code, but often this is garbled and hard to work with.
It sounds like you have no way of modifying the anonymous function that is tied to the checkbox click event. If not, perhaps you can create a second event handler, but define it before the definition of the existing event handler.
Event handlers in the browser typically fire in the order they were defined. See http://jsfiddle.net/aroder/kkYfX/2/. If you defined your own event handler, it will give you a place to attach the debugger at least somewhere close to the anonymous function you are trying to step through.
Also, use the debugger statement to automatically break your code. If you are using IE, ensure the options under Tools > Options > Advanced > Disable Script Debugging (Internet Explorer) is UNchecked.
<script>
// the debugger statement will automatically break in IE dev tools, Firebug, and Chrome dev tools
debugger;
</script>
Older version of IE is pretty lame specially when it comes to debugging AJAX applications. Firebug is the best that I have seen. It lets you replace an existing javascript function with your own. This is what I suggest.
Open the web application in Firefox
Copy sourcecode of existing function
Format it and add the following statement to the function at the place where you want it to stop and inspect the variables.
debugger;
Paste the new code in Firebug's console window and click on Run .. that's it!