Make code changed by jQuery visible - javascript

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.

Related

View all created JS objects in chrome

How do I view all JS objects that I created in chrome? I know if I type window into the console, I will see everything, but where is the tab that is filled with all my things?
I think you might be looking for something like Chrome Breakpoints. Basically, in the developer tools, you will go to 'sources', click the file you are wanting to debug, and set a breakpoint on the line in the file that you want to see your active variables. You do this by simply clicking on the line number. When you reload, the browser will pause execution on this line and you will be able to see all the information you are looking for.

Viewing JQuery functions live within a browser

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.

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.

Finding out what JS is controlling this

I have a page which is using a nice hover feature which is controlled by javascript, and I was wondering if there is a tool which would tell me what JS is controlling at a specific point as there is a lot of JS files used across the site.
You need a debugging tool, one such tool is mentioned in the comments: Chrome. Once you have the debugger enabled you need to set breakpoints on various events to capture the code flow within all the javascripts. For more info visit here
I would go with Chrome. You can load the page, see all the related JS.
If you are in Chrome, right click on or near the button and click "Inspect Element."
Now you can see all the goodies :)
In google chrome right-click the element, click on "Inspect Element" option. The Chrome Developer window with active Elements tab should appear. You'll see the html structure with your element being highlighted. Right-click on that element and activate all three options in "Break on..." submenu. If some modifications of DOM happen during hover, they will trigger the breakpoint right in the place where you need. But keep in mind, that hover effects can be implemented via css without a bit of javascript, so this plan can fail easily.
As other's have said, use Chrome's web developer toolbar. Go to the sources panel and click the little pause button icon in the lower left corner. This will cause the debugger to activate as soon as the next javascript command is run. Then activate the hover feature - the debugger should pause execution in the callback function that's responsible.
Google actually discusses this exact scenario at the bottom of this documentation page.

A way to capture the Javascript which is changing an element's CSS property?

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?

Categories