How to view all JavaScript functions called in real time? - javascript

I want to figure out how a website reloads it's content using AJAX. Therefore i would like to see what JS functions are called in real time because I can't figure out what function is responsible for reloading the page dynamically. How to see all executed functions JS in real time in FF, Chrome, Opera or IE?

Maybe using the 'profile' button in the firebug console tab can give you an indication of the function(s) that are fired. Furthermore you can tell firebug's console to show xmlhttp requests (expand 'console' at the top of the firebug screen. After that, If an ajax request fires, it should be visible in the console. In the 'post' tab in such a request you may be able to infer the function triggering the request, looking at the parameters.

I think what you want is a feature in Chrome:
find the element that is being reloaded and right click,
choose inspect from context menu,
then right click the html of the element (in the bottom firebugish pane),
in the context menu there are options to:
break on subtree modifications
break on attributes modifications
break on node removal
in your case maybe set "break on subtree modifications" on the body tag would do it?
Article on awesome new dev features in chrome: http://www.elijahmanor.com/2011/08/7-chrome-tips-developers-designers-may.html

Install firebug in FF. Visit this link: http://getfirebug.com/

I would do a big search and replace on all the file using a regular expression that matches the function names (something like "function (.*)\((.*)\){") and use that to insert a console.log(functionName) at the beginning the function.
So you search for function (.*)\(.*\){ and replace it with function \1 (\2){ console.log("\1"); (Note: Regular expressions are most likely wrong as I didn't check them - you'll need some testing to get it right).
It seems a bit crazy but it should work. I've used that method to debug a Director Lingo project.
Obviously, make sure you backup the whole project before doing the replacement.

Following on the answer given in case you have access to the source code. With this regular expression you can do a console.log of all function calls:
search for:
function (.*){
replace with:
function \1 { console.log\(("\1")\);

I often using Firefox add-on JavaScript Deobfuscator
https://addons.mozilla.org/en-us/firefox/addon/javascript-deobfuscator/

Related

Bookmarklets doesnt work when run from bookmark, but works from console

I am trying to create a bookmarklet that will insert some text in a textarea on a webpage (webpage is for internal use so no point in linking).
Here is example of javascript code i tried:
(function(){document.getElementById("textareaID").value="Some text";})();
I'd like to point out that i tried different element selectors (byClass, query...) and different attributes (even tabindex) to the same result. Also tried in both Chrome and IE11.
So, for some weird reason my javascript runs when i run it from console (or as a snippet) but i get an error "Cannot set property 'value' of null" when i try to run it from bookmark menu.
I tried creating a bookmarklet by myself
javascript:(function(){document.getElementById("textareaID").value="Some text";})();
and tried using online bookmarklet creators to encode special characters
javascript:(function(){document.getElementById(%22textareaID%22).value=%22Some%20text%22;})();
but no luck.
Bookmarklets definitely work on a page (tried with alert "Hello") but i seem to have a problem "capturing" elements.
Also i noticed that ID's of some elements change sometimes (not sure why though), but i always inspect to make sure that ID i try to use exists or i use some fixed value like tabindex. Besides, as i said it works when run from console, so i couldn't have screwed it up somehow... or could have i?
So the problem was execution context.
Because IDs of elements were changing i had to inspect them before running js from console and inspecting changes the execution context from top to wherever the element is. That's why it was working from console and not from bookmark...
So, to write into a textbox inside specific frame:
let Iframe = document.getElementById('yourIframe').contentWindow.document
let value = Iframe.getElementById("textboxID").value = "Some Text"
After that only thing left is to wrap everything inside a javascript:(function(){..your code here..})(); to create a bookmarklet.

Google Chrome Developer Tools Issue with Jquery in the Console

When I try to execute below JQuery code in Google Chrome's developer tools
$("#u_16_0").val("AJ College, Sivakasi")
am getting below error:
Uncaught Error: <[EX[["Tried to get element with id of \"%s\" but it
is not present on the page.","#u_16_0"]]]>(…)h # LGuPoDEwQGD.js:36i #
LGuPoDEwQGD.js:36(anonymous function) # VM580:1
Could somebody please help me to resolve this issue? I've verified that the element is present in the page. I mean if I just type $("#u_16_0") in the console, the element is printed.
Please see the below link to screenshot containing version information of my Google Chrome.
[
UPDATE - 1
I managed to accomplish this with the below plain javascript code
document.getElementById("u_16_0").value="University of Cambridge"
UPDATE - 2
Amin's answer based on jQuery also worked. Hence, accepted it as answer and awarded bounty.
Note: Do not expect $ is always JQuery.
The Chrome console does not appear to have access to the content script's execution context.
Wrong, it does. You need to look at the correct place:
Instead of <page context> below in the animation, you have to select chrome-extension://<your extension id>
You can click "top" below in your version of chrome.
The previous screencast shows that the Console tab of the Chrome developer tools has two dropdown boxes at the bottom, which can be used to change the execution environment for the developer tools' console.
The left side can be used to change the frame context (top frame, so iframe, ...), and the right side can be used to change the script context (page, content script, ...).
Reference: Why will jQuery not load in Facebook?
The problem is when you assume that $ is always jQuery and it is not. Simple way to see if it is to console.log($) and see what it returns.
jQuery usually returns
function (selector,context){return new jQuery.fn.init(selector,context)}
or
function (a,b){return new n.fn.init(a,b)}
Now anyone can define $ to be anything. On Facebook it appears to be an alias for document.getElementById() and has some checks in it
function i(j){return h(j);}
running $("contentCol") will return a DOM element.
And if $ is not defined, in Chrome Dev tools, it is an alias for document.querySelector
$(selector, [startNode]) { [Command Line API] }
so in the end, do not expect $ to be jQuery.
This is because of jQuery $ sign conflict with other libraries like some facebook js libraries.
you should use jQuery instead of $:
jQuery("#u_16_0").val("AJ College, Sivakasi");
From looking at this answer it looks as though your call to:
$("#u_16_0")
is not actually calling jQuery.
Try changing the page context

Firefox extension: invoking function from webpage js

I'm trying to automate some boring, duplicated data entry into a web application at work.
I'm sorry if the answer is well known but I've spent hours in google trying to figure it out.
The problem is, in the web-based application none of the links are simple HTML, 'a href' type links, they use javascript.
I can see in one of the .js files for the website that the function invoked when a link is clicked is defined as follows
function sendEvent(eventtype, targetid, value)
...and with the Firefox debugger I can see that in order to do the simple page navigation I want to do, my extension has to invoke the websites js function as follows (the 'value' parm can be null)
sendEvent("click", "mx709")
I found this similar question. The suggested method is
content.wrappedJSObject.funcFromPage()
or
getBrowser().contentWindow.wrappedJSObject.funcFromPage();
... but running either of those lines in my extension doesn't seem to invoke the function and hence "click" the link I want clicked
EDIT 1 - in case it wasn't clear, the code I actually put into my extension was:
content.wrappedJSObject.sendEvent("click", "mx709[R:3]");
EDIT 2 - Also tried this, no dice. I have the Firefox debugger open, and a breakpoint on the top of the 'sendEvent()' function. Every time I click a link in this web app, I hit the breakpoint, when I try lines like the above (or the following), the breakpoint is not tripped
window.content.document.defaultView.wrappedJSObject.sendEvent("click", "mx709[R:3]");
The wrappedJSObject method should work.
Open up scratchpad and copy paste this:
var indexOfTabWithMyDocument = 1; //1 means 2nd tab, 0 is first tab
Services.wm.getMostRecentWindow('navigator:browser').gBrowser.tabContainer.childNodes[indexOfTabWithMyDocument].contentWindow.wrappedJSObejct.FUNCTIONTORUN()
Set the environment of scratchpad to browser. And run. It will work.

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

Show Javascript functions in real-time

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.

Categories

Resources