Finding the root of a javascript function on a website - javascript

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/

Related

getElementById returning null when trying to build Chrome Extension

I'm trying to build a chrome extension which allows you to play an mp3 file (pre-selected) by clicking a button- very simple for now I know! However, when I am trying to access the button in my js file my function only returns null. I have moved the script tag to the end of my body and included a 'DOMContentLoaded' event listener, as shown below, but I still can't shake this error- and this is after trying to incorporate practically every suggestion I've found on other similar questions! Any help greatly appreciated.
my javascript
my html file
I should note I ran this code through another IDE (the one provided by the CS50x course) and everything worked fine.

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

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.

JavaScript on third party website

I am working on building a Chrome extension that injects bits and pieces of JavaScript onto websites, a bit like AdBlock does.
What is the best way to develop/test my JavaScript code on third-party websites? I want to have my custom JavaScript loaded as if it was JavaScript from the original website.
You can use Chrome's developer console. Right click, go to inspect element, and go to console. Alternatively, press ctrl+shift+j.
You should write the code in notepad++ or a similar text editor and then copy it into the console and run it to test it.

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