I am using Chrome's DevTools JS console to debug a custom function that executes when a button is clicked. When I click on the button, I get the following message in my console:
[Violation] 'click' handler took XXXms
Is there a way I can access the full path of this (button) object that I am clicking through the console message I am getting? I assume it will be something along the lines of App.controller.XXX.
Workaround:
Enable a event listener breakpoint on Mouse > click.
Click the button. DevTools pauses in the button's click handler.
Evaluate e.target in the DevTools Console, where e is the name of the event object that you're passing to the handler. In other words, you might have used the name event, e, or something else.
Right-click the DOM element that gets returned and select Reveal in Elements panel.
As per wOxxOm's suggestion, I have opened an issue into crbug.com as a feature request since what I am asking for is not yet possible.
Follow the issue here.
Related
I am switching from debugging JS in Firefox to Chrome.
One thing that I am missing is this:
In Firefox I can see in the HTML see "[event]" that there is a custom event handler attached.
I think this preview is very handy.
In chrome I need to explicitly search for the event handler.
Is there a way to enable this feature (see event-handler in the tree) in chrome, too?
The feature you are looking for is available in google chrome dev tools
I have taken, the jobs links in stack overflow page itself, it has a click event handler, to see the event handler, select the Event Listeners tab in the right part(hilighted in Red) there is a possibility that it might be hiddent by >> , click to expand,
If the ancestor checkbox is checked please uncheck this, then you will get the clear view of for which event (e.g click) , on what element (e.g anchor tag), and on right side on which file with line number, click it to navigate there.
Hope this is what you are looking for.
it's available in chrome you can find it in developers option press
(CTRL+SHIFT+I) or F12
and then you will find tab named "Event Listener" in right hand upper corner if developer options is in full screen mode or else you'll find it it lower right corner.
And if you are unable to find that just simply find the >> symbol and click on it and select Event Listeners.
Here is the image for event listeners tab.
I think you can use getEventListners($0) api of chrome which gives the event listners of the particular selected element.
getEventListners($0) where $0 - The selected element in the DOM.
The console drawer can be added to the Elements tab by clicking on Esc key it will toggle the console drawer.Then in the console you can write getEventListners($0) as shown in the image.
As this is my first answer and don't have that much reputation as of now,it is not allowing me to directly add the image to the answer so I am really sorry for that. Please have a look at the image:
Inspecting google from my chrome browser.
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.
I have a website with javascript and when I move my mouse on that website, there is function triggered. I need to debug whole javascript code step by step when it is executed. I need to find out which function is called (and parameters too).
How can I do this - what should I use for this?
Any real time debugger?
EDIT: Now I see it is script loaded from another url (my site is mydomain.tld, second script loads from seconddomain.tld). Second script is obfuscated/minimized and it control clicks on website (when clicked, it triggers one function).
Is it possible with javascript on my site to call function in that second script? If yes, how please.
Just put the command debugger anywhere and Chrome will stop there when it happens to pass that place by.
Don't forget to keep the debugger open by pressing F12
I need to find out which function is called
In console (Firebug, Developer tools, etc.) you can click Profile button or use commands:
console.profile();
//...
console.profileEnd();
And it will display what functions were called during the profiling.
Then you can use debugger; command inside the functions as everyone mentions.
If site uses jQuery then you can go to the function source with Chrome DevTools. Go to event listener sidebar in elements panel, expand interesting event and click the link to source.
E.g. input#new-todo has internal jQuery listener but DevTools has resolved it and show link to user defined function outside framework.
You can use Chrome for that. You can add breakpoint.
See the doc https://developer.chrome.com/devtools/docs/javascript-debugging
you can track mouse move event by
<script>
$(document).mousemove(function(event){console.log(event);});
</script>
and open console window in browser when mouse move it will display all things...
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!