Show Javascript functions in real-time - javascript

Is there any tool or addon which can be used for testing or identifying Javascript functions in real time (i.e. on click or some events )..
e.g. on a website, I want to know after clicking on a link, which all JS functions are being called/executed..I know sometimes it is stragightforward from the code, but in case it uses JS libraries like jQuery, the actual function call is made from otside..
How can I do that?
*I'll really appreciate if, alongwith the addon, you just write a short description as to where can I find the Javascript finction tracking in that **
Thank you.

Try Firebug. It's one of the most useful firefox addons. Grab it here:
http://getfirebug.com/

Dragonfly (Opera), or Firebug extension for Firefox, or any other good javascript debugger

See Visual Event. It is a bookmarklet that overlays element event handler information.
FireQuery is available as a firefox plugin which adds handler information inside of firebug.

Firebug includes a JavaScript profiler. Give it a try.
http://getfirebug.com/javascript

In Chrome, right click the page and choose Inspect element, go to the console, start javascripting! Choose the scripts tag to get debugger functionality.

Related

How to inspect javascript using Firefox developer tools

On a webpage I have a "onclick" event in a <div> element. Right clicking it on Firefox and inspecting it brings up the dev console. At this point I see the function it is being called but I'm unable to lookup the code or the file that this function is pointing to, what am I missing?
The body of the javascript function can be found in respective .js library. In developer's tool, click the tab "Debugger". It lists all .js files which might contain the function you are looking for.
Just found the answer while trying, it seems I were using # rather than # which is used to lookup a function definition!
Have you tried firebug add on for Firefox?
I think it is clearer to see it with firebug. I'm sorry if it's not what you are looking for, because i can't suggest it on comment

How do I get Firefox debugger watch's target element?

I've been trying to add the highlighting feature to the Firefox DevTools debugger, so it will highlight the element instead of only showing [HTMLAnchorElement] or similar. I know it's possible, since you can set someElement.style.border='1px solid blue' or similar as a watch, and it hightlights the element. So why not let it store current border, and show it on mouseover using element.style.border='1px solid blue', and restore it on mouseout?
While debugging in Firefox devtools, I noticed the element in the right watch panel has rows with the variable names, which are actually given odd ids like "46439", under parent element with "document.getelementsbytagname('a')36" id. What do these ids signify? Can they map a display element to its target element in the page? I tried window.DebuggerView.WatchExpressions.getItemForElement from Venkman but it returns null. Is there another function from this source file that will give the target element of debugger watch?
Ideally, I should be able to 'watch' items such as document.getElementsByTagName('a'), or local variable in the debug context, and highlight the items in the page like Chromium/Firebug. Yet I'm not sure how to add this feature from a Firefox extension.
Update:
After further work, it would seem to be possible to use the DebuggerView.StackFrames.evaluate to run code while stopped at a breakpoint, like what chrome://browser/content/devtools/debugger-controller.js is doing with watches. Unfortunately when stopped at a breakpoint I run this code, and DebuggerView.StackFrames.evaluate is [void] void in Venkman. Is this evaluate command hidden or private somehow, or not initialized?
You can't really use the highlighter from the Debugger directly yet. We have a bug open (https://bugzilla.mozilla.org/show_bug.cgi?id=653545) to make the highlighter more generally-available to our other tools.
If you have a unique selector, you can use the command line (Shift-F2 to open the Developer Toolbar) to inspect an element via:
inspect unique-selector
We intend to make DOM objects highlightable everywhere in upcoming versions of the Firefox Developer Tools.
edit - This feature has been landed and now works from the Variables View and the Console. Landed in March of 2014 in Firefox 30.
https://hacks.mozilla.org/2014/03/box-model-highlighter-web-console-improvements-firefox-os-hud-more-firefox-developer-tools-episode-30/
I think you are putting too much efforts in inbuilt debugger,
to debug javascript you must use fireBug its best tool,
This Link is for the addon of firebug, download and install the add-on its hardly 2 MB and then you will enjoy debugging.. :)
Edit: Selector in Debugger
I was searching answer for your specific question, and found out this
Web Console Method
Now here you are able to debug, get element and get selector details too..
(Refer Basic Usage)
You can directly access variables defined on the page:
> $ function(selector, context){
return new jQuery.fn.init(selector,context);
}
please refer the above link for more details..
If native console is not available refer this link, this says,
Under Microsoft Windows you additionally need to start Firefox via the following command to have a native console :
firefox.exe -console
so that will enable firefox to start with console..
Edit: Log
To log the element tested>> refere this link in that refer pprint() that will also behave in the same way.
Also Console API there refer console.log
I hope this will help..

Edit opened HTML Page, with Javascript

I was looking into making Firefox addons, and I need some help.
Is it possible to edit an HTML page that is open in the browser with javascript?
For example:
User types in "google.com"
Addon is activated
Javascript changes contents of "google.com" to maybe say "Hello!" at the bottom.
Of course this isn't specifically what I want to do, but a push in the right direction on how to accomplish such a task would be great.
~Carpetfizz
From within a Firefox addon this is obviously possible as many extensions do this.
If you, however, simply want to modify the DOM and nothing else than I would recommend taking a look at greasemonkey. Loads of example scripts around to do this: http://userscripts.org/
And the added benefit, if written correctly they also work in Chrome and other browsers.
Yes, it is. You must find a tutorial about javascript DOM manipulation

How can I view the data attributes value live in the chrome developers tool?

I want to see the values as I explore the DOM in the developers tool. And also if possible see what binded to the element javascript wise. Is this possible using some plug in or how would I go about doing this?
Data attributes can be seen on the element: http://cl.ly/0w3V2H311E21241J2j45
If you're using jQuerys .data(), it doesn't change the data attributes of the element, so you have to call .data() to get it see it. I am not aware of any plugins that allow you to view it in the DOM explorer.
Event listeners can be found to the right by clicking on the element. Scroll down to the bottom of the CSS rules and you will see a section called "Event Listeners": http://cl.ly/2f3c3z312c3D2w43321s
Sorry if you are limited to use only Chrome developer tools.
However for others who can use Firefox it may be useful to know that there is a great extension for Firebug: FireQuery, which is doing exactly what you ask plus other nice things.

How to ignore certain script files / lines when debugging?

I'm trying to debug some JavaScript, I want to find out what code gets executed when I hover over a certain div element (I've got no idea which bit of code, because there's no direct 'onmouseover' - I think there's a jQuery selector in place somewhere?).
Usually I'd use the "Break All" / "Break On Next" facility provided by Developer Tools / Firebug, but my problem is that other code (tickers, mouse movement listeners etc.) immediately gets caught instead.
What I'd like to do is tell the debugger to ignore certain JavaScript files or individual lines, so that it won't stop on code I'm not interested in or have ruled out. Is there any way to achieve that in IE (spit, spit!) - or could you suggest a better approach?
In FireFox this feature is called "Black boxing" and will be available with FireFox 25. It let's do exactly what you where looking for.
This feature was also introduced to Chrome (v30+) although it's tougher to find/configure. It's called "skip through sources with particular names" and Collin Miller did an excellent job in describing how to configure it.
Normally I'm for putting answers and howtos here instead of links but it would just end in me copying Collin's post.
Looks like you're looking for Visual Event.
You might want to take a look at Paul Irish's Re-Introduction to the Chrome Developer Tools, in particular the Timeline section (starts around 15 minutes into the video.)
You can start recording all javascript events - function executions (with source lines etc) and debug based on what events fired. There are other really handy debugging tools hiding in that google IO talk that can help you solve this problem as well.
If you're pretty sure it's a jQuery event handler you can try to poke around with the jQuery events.
This will overwrite all the click handlers (replace with the type you're interested in) and log out something before each event handler is called:
var elem = document.body; // replace with your div
// wrap all click events:
$.each($._data(elem).events.click, function(i, v) {
var h = v.handler;
v.handler = function() {
// or use 'alert' or something here if no Dev Tools
console.log('calling event: '+ i);
console.log('event handler src: '+ h.toString());
h.apply(h, arguments);
};
})
Then try calling the event type directly through jQuery to rule out that type:
$('#your_div').click()
You can use JavaScript Deobfuscator extension in Firefox: https://addons.mozilla.org/addon/javascript-deobfuscator/. It uses the same debugging API as Firebug but presents the results differently.
In the "Executed scripts" tab it will show you all code that is running. If some unrelated code is executing as well it is usually easy enough to skip. But you can also tweak the default filters to limit the amount of code being displayed.
If using are using IE 7.0 onwards, you should have developer toolbar from where you can debug. Just use breakpoint where you need, rest of the code will not stop.
Alternatavely you can define other applications like Interdev/ Visual Studio.net for debugging purpose too.

Categories

Resources