Viewing JQuery functions live within a browser - javascript

Is there a way to view the executed Jquery on a webpage such as Chrome. I assume this is only covered by an extension.
eg. if a dropdown menu is activated when i hover over a phone icon. Can I see the Jquery code (perhaps in a popup or console)

You should consider writing a "console log" in your instructions.
/ Event setup using a convenience method
$( "p" ).click(function() {
console.log( "You clicked a paragraph!" );
});
See further here : https://learn.jquery.com/events/event-basics/

Chrome provides you the facility to see Javascript and html code in developer tool. Right click on the page and go to inspect element or use F12 to open developer tool.
If you want to break your javascript execution at any point you can write debugger; in the code or you can add breakpoint to the source.
In firefox also you can use the same way. Other than that with firefox you can also use Firebug, which is a good extension with firefox which helps to ease your job.

The best solution for my request I did was.
Right click on element, inspect, then Event Listeners and the pending JQuery event will be listed. Click on JS link to take you straight to the JQuery code.

Related

Monitoring JavaScript stack trace [duplicate]

Is it possible to view JavaScript function calls in the browser's JavaScript console? I know you can view XHR, but can you view function calls?
For example, I hover my mouse over some element on a page and a div pops up. I know there was a JavaScript function that was called to show the popup so it would be nice to be able to view this call in the console so I can see what function was called.
Am I missing something or is this not possible?
So basically you want to view JS calls in real-time?
The Firebug extension on Firefox offers that (http://getfirebug.com/javascript).
Basically, what you want to do is find your function within your code, then set a breakpoint on it. You should then be able to step through execution on it, just like a normal debugger. It shouldn't be hard to find the JS function associated with a and a particular event (e.g. mouseover) on that - is this page in question using straight JS or a framework? And if so, which one?
Google Chrome's built-in developer tools offer a smaller subset - depending on what you want, the Profile tab on it might be useful?
What exactly do you need to trace this JS function for? We might be able to recommend a better tool for you based on your particular need.
Check into the Firebug Profiler you can use it to see a break down of what's going on without having to manually add in console.log statements.
To use the profiler, just go to the Console tab and click the "Profile" button. Then use your app for a bit or reload the page and then click the "Profile" button again. You'll then see a detailed report that shows what functions were called and how much time each one took.
http://michaelsync.net/2007/09/10/firebug-tutorial-logging-profiling-and-commandline-part-ii
Understanding Firebug profiler output
Not unless you explicitly attach that information to the DOM.
You can, however, set breakpoints in the developers tools for some browsers, such as Safari, Chrome and Firebug for Firefox.

debug javascript function with parameters

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...

Can I somehow observe, which javascript events are fired? (active debug tool)

When I'm in a complex website such as Facebook and write a comment and push Enter there is an event fired that starts everything. Can I somehow observe which events are fired and when (and eventually somehow trace/step them)?
So in general, I'm looking for a tool capable debugging a website in this way. Is there any way?
If you are using devtools of Google Chrome, there is an Event Listeners tab that could help. See the attached picture.
There, I have selected the "Post your answer" button of this very question and as you can see, the EventListeners tab shows that there is at least an onSubmit event listener attached.
One of the debugging tool that i am using and works well for me is firebug in mozila.
you can read about firebug Here
With fire bug you can notice everything like webpage is making how much ajax call, which script is binned with which element. even you can also easily debug the css and design elements. firebug will help you more to debug the website on browser.

debugging into a javascript anonymous function

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!

Make code changed by jQuery visible

how can I make code generated or changed by jQuery (JavaScript) visible? Showing the plain code in the browser (e.g. Firefox) only shows the elements before they were changed and manipulated by jQuery/JavaScript.
Are there tools (for Firefox?) where I can make the live code visible?
are you using Firebug? this will allow you to see the HTML after it has been manipulated
You could use firebug which does exactly what you need and much much more
In addition to using Firebug or some other plugin, in Firefox you can highlight the text, right click and select "Show source".
Use an object inspector so you can see the live DOM like Firebug or the built-in Chrome or Safari Inspectors. In any of those tools, you just right click on an object in the web page and select "Inspect Element" and a whole live DOM hierarchy opens up in a window for you to inspect what is really in the web page at this moment.
Here's what it looks like in Chrome when I right click on an object in a live StackOverflow page:
If you're displaying the initial code via a javascript function call, then just call that function again after the update.

Categories