I have been given a project - the one HTML page includes about 45 different javascript files. I am getting alert boxes when I click on some of the elements - which javascript file is making the alert? How do I determine this, preferably which line in the javascript file but I can start with which file...
If this can be done within the web browser (I dont care which web browser) please let me know how... I have looked at the resources tab in chrome but it did not help me.
Thank you.
Use a text editor to replace all
alert
by
console.log
And then use Chrome inspector to see where the logs are.
Include your own javascript file on top of the page and predefine alert with:
alert = function(msg) {
alert(msg); // put breakpoint here
}
Then use the debugger (Firebug in Firefox, or Developer Tools in Chrome) to put breakpoint as described above. The stack trace view in the debugger will show you which script line / file is creating the alert
Use the profiler in Firebug
Console -> Profile -> Click to enable. It will show which all functions are calling, search that function names, and add break points to debug.
Related
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.
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/
I am trying to debug my javascript & jQuery and step through it using firebug.
I am running my code on an Apache server (2.4) on a windows machine.
I used the firefox browser version 18.
When i go to run my code, I can't see my javascript (external file) in the scripts panel.
I see the linked jQuery library on the panel but I dont see my javascript code.
On the Firebug, the scripts are clearly linked in the HTML panel. But on the script panel, only the jQuery.js is visible. i would post a screen shot but i dont have enough reputation right now.
I dont know what is going on and what i have to do in order to be able to step through my javascript code.
UPDATE
I placed the "debugger" on my javascript code but it still not showing on the 'script panel'.
debugger;
$(document).ready(function () {
var email_default = "Enter your email address...";
$(':input[type="email"]').val(email_default).on('focus', function () {
if ($(this).val() == email_default) {
$(this).val(' ');
}
});
I also tried to do a browser refresh, disable and re-enable all the firebug panels- but it still won't show my external javascript. I had also double checked my file location & directories to make sure i am linking it correctly.
If Firebug (or other browser developer tools) doesn't show a JavaScript in the list of available scripts, this means it has a syntax error.
In that case you need to switch to the Console panel and check there for the error.
Notes:
As mentioned in a related answer, there can also be other reasons why there are no scripts shown in the list:
Since Firefox 49.0 and Firebug 2.0.18 the Script panel is completely broken. This is due to some internal Firefox API changes. And because Firebug is officially discontinued, this unfortunately won't get fixed anymore.
There was also a bug in Firebug 2.0.11 (and below) in combination with Firefox 39.0 causing this problem. This bug got filed as issue 7918 and fixed for version 2.0.12.
It happens when the Script panel is enabled and you close Firebug and then reopen it.
I am trying to edit javascript on a site using Chrome's Developer Tools. I have read about 30 accounts of how to do this as well as watched a few videos. The fact is, when I go to the sources tab and open the file I want to edit, I can't do anything to it. Is there some step I am missing?
I can create break points, step through, etc... I just can't edit. Was this functionality removed recently?
I know this question is stale, but I just had a similar problem and found the solution.
If you have the file prettified, Chrome will not allow edits. I turned it off and was able to edit. Willing to bet this is/was your problem.
You can edit javascript in the developer tools on the "Sources" tab, BUT it will only allow you to edit javascript in its own file. Script embedded in an HTML (or PHP) file will remain read-only.
It has some limitations:
has to be a JS file. can't be embeded tags in a html page.
it cannot be prettified.
I don't know if you need this to save permanently, but if you need to just temporarily modify the js:
I can copy that javascript I want to modify into a text editor, edit it, then paste it in the console and it will redefine any functions or whatever that I need to be redefined.
for instance, if the page has:
<script>
var foo = function() { console.log("Hi"); }
</script>
I can take the content between the script, edit it, then enter it into the debugger like:
foo = function() { console.log("DO SOMETHING DIFFERENT"); }
and it will work for me.
Or if you have like,
function foo() {
doAThing();
}
You can just enter
function foo() {
doSomethingElse();
}
and foo will be redefined.
Probably not the best workaround, but it works. Will last until you reload the page.
I did search "chrome dev tool edit javascript". This page is the first search result. But it is too outdated, it does not help me.
I am using Chrome 73, this version of Chrome has "Enable Local Overrides" option. Using the function, I could edit a javascript and could run and debug.
My solution:
In the devtools preferences check the Enable local overrides.
Go to network tab, find the file you want to edit, rigth click on it and select Save for overrides (on the sources/overrides tab you need to add a local folder)
The file appears in a new tab on the Sources tab as local copy, so you can edit this file, and after site reload the new (and edited) override file will load on the site!
When loading a JavaScript block via Ajax, the response is returned ok, but when viewing it in the code in Firebug (1.9.1) in the Script tab, it appears without any newlines. It's extremely difficult or impossible to set breakpoints anywhere.
Is there a way to get Firebug to preserve the newlines?
I don't think so, but Chrome's developer tools unobfuscator may do what you want (http://www.sagarganatra.com/2011/06/de-obfuscating-javascript-code-in.html).
However, if you load in your script blocks by adding a script tag to the page and changing its source to point to the relevant script file the eval function isn't used and firebug should display the script with line breaks included.
Found a fix for Chrome.
Simply add the following snippet to where you want to debug:
try{ throw Error() } catch(e) {}
and click the "Pause on all Exceptions" button in the Chrome Scripts console tab. Then simply hit F8 until you reach your try block.
Works like a charm. :)