How to inspect javascript using Firefox developer tools - javascript

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

Related

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

Finding the root of a javascript function on a website

I would like to find the parent JavaScript file for a function, For Example If i was to inspect an element on this page and it has an
"onclick="poster(3459345_5453)"
how could i find out what JavaScript file the function "poster()" is in. So if there is 3 JavaScript files linked to this website, and i don't know which one of them has the function "poster()" how could i find it?
I have already tried right using Ctrl+f in the inspect element area of chrome and was unable to locate the function.
I suggest to use Firefox Firebug. Open Console and just type "poster". It will output function signature. You can hover on it to find out file or click on it to navigate to Script of Firebug. Check out screenshots.
https://blog.gaurangjadia.com/?attachment_id=835
https://blog.gaurangjadia.com/?attachment_id=836
Also, you can put breakpoints and debug your scripts. It is nice and powerful web development tool.
Example is at http://code.gaurangjadia.com/stackoverflow/18551051/

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

How to view all JavaScript functions called in real time?

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/

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