In a browser you can determine what files are loaded when a website loads and you can even view the timeline.
But is there any way to determine what javascript calls are being made once the script loads for a website?(in firefox or chrome or any software package)
Hope you got my question
(Because that would be useful for debugging logical javascript errors and others I suppose)
I use Chrome's Developer Tools for this:
Check the click box, and then click on the element on the page you want to find the handler for. If you are using jQuery (or similar library), you may have to step through their code before you get to yours.
Taken from: How do I find out what javascript function is being called by an object's onclick event?
Typically I just use logging in FireBug personally (which despite my desperate approach to avoid Chrome, is turning out to force me to adopt it with built-in developer tools).
Related
I have a long time stick with Conkeror as my default web browser and get used to configuring/adding new features to my browser using js code with all the XUL Api through the .conkerorrc file. I'm migrating to Firefox since it has better support and is actively maintained by Mozilla. However, one of the feature that I've been missing so much is the dot file, which I can easily configure anything that I like, back up all of them through git and eval the code directly (using Mozrepl) while I'm coding to see the result.
Is there any way that I can inject/execute a sciprt on Firefox startup, for example ~/.firefox/index.js?
There is no functionality in stock Firefox to execute JavaScript code supplied by the user at startup. Functionality like this has been something that has been requested of Firefox since 2006-04-02.
It is trivial to write an add-on in any of the different Firefox add-on types (XUL/Overlay, Restartless/Bootstrap, Add-on SDK, or WebExtensions) which would run whatever JavaScript you desire upon Firefox startup. This could be done to either run code that was included in the add-on (simple), or that runs the JavaScript contained in a file that is loaded from a location external to the add-on (more complex). Which add-on type you used to implemented this would impact which interfaces you had available within the code you write. One drawback of writing your own extension which runs code included in the add-on is that in order to use it with a release, or beta version of Firefox is that you would need to have it signed by Mozilla. While this is a quick and easy process, it does add some additional overhead to the development/test cycle.
You have not specified any of the firefox-addon tags in your question. In addition, you have not described the functionality you desire, except as generalities. It also does not appear to be the intent of your question to ask how you would implement such an add-on. Given those and the fact that there are already multiple add-ons that implement the functionality of running arbitrary JavaScript (including XUL) code supplied by the user, I am not going to supply code here which performs this function.
However, if you are interested in using an already existing add-on, here are a few options:
userChromeJS: This extension was derived from the code originally provided as an example of how to implement the functionality requested in bug 332529. Its first feature listed is: "Complete chrome customization is possible by running custom javascript code or overlaying chrome with .xul overlays." This is an Overlay based add-on with which you can use XUL. This sounds like the functionality what you are interested in obtaining.
uc: "A userChromeJS clone with built-in subscript/overlay loader capability."
Greasemonkey: "Customize the way a web page displays or behaves, by using small bits of JavaScript." This is a commonly used add-on which permits writing more complex JavaScript code. The code is executed in a sandbox, not in the scope of an extension. This is done for security reasons.
Custom Style Script (Inject desired CSS or JS): "Add Custom JavaScript Codes or Styles (CSS) to an specific page or all pages."
Well, I was scraping data from one of the website (purely in legal limits).
The situation is that the site has 5 questions on a page and answers to them.But the source code that I see by pressing Ctrl+u is different from the code that I see by Inspect element or firebug in Firefox.That means the site is changing the answers on page load to fool the people around as scrapers would normally grab the unmodified code.The correct answers are on the onLoad modified page.
What I want is to capture the source code that I see in Firebug or Inspect element (the modified code) instead of the code that I see on pressing Ctrl+U.
I used one of the scraping API but it is capturing that original Ctrl+U code.
Is there any solution?
In chrome, select root element (<html>) and right click -> Copy as HTML, paste wherever
[EDIT]
I suspect you are trying to scrape the data automatically, this obviously won't work, not sure how to do this otherwise. There are some headless web browsers that support JS (phantom js for example), they might do the trick. Also check out this super user post
I'ld suggest you to do a log of the html of your page before the onload happens. Which can be done using jquery.
Or plain classic debugging using "debugger" which will stop the exec of your webpage once the line where you put it is interpreted by the browser.
As a HTML5 game dev, I usually do advanced logging through the console, to know what does what and what's executed when. Although it may take some time, it allows you to have a good comprehension of what you've written and to ensure optimization (mostly in number of execs of some stuff) and to catch bugs that might not be obvious.
My goal is to be able to see which javascript functions have executed since the start of an audit. This is most comparable to me placing a breakpoint at the start of every method in every javascript file that's loaded, and then writing down a list of all the functions who have a breakpoint that was hit.
Does this tool exist? If not, why do developers not need it? I find myself looking at a page, seeing 'something' happening, but not being able to get a handle on what is happening. In a large environment I could see this task becoming insurmountable.
Cheers
Yes. Firebug (for Firefox) is the most popular.
http://getfirebug.com/
Also, IE9 and Chrome... press F12 to bring up the developer window.
With all of the tools mentioned here you can set javascript break points, see the stack, and even profile your scripts.
Check out console.log to help you out -
http://getfirebug.com/wiki/index.php/Console_API
Google Chrome's javascript console (which is some nice visual profiling) -
http://blog.chromium.org/2009/06/developer-tools-for-google-chrome.html
I would like to see what the JavaScript interpreter is doing in real-time, which line it is reading and which function it is running, because I would like to make a full debug on every little piece of the JavaScript to make it faster. For this I need some tool to tell me what the interpreter is doing exactly, if it is defining a variable, if it's running a function, if it's in a loop, check the current intervals (defined in setInterval).
As far as I know Firebug can't do that.
Check out the javascript tab in Firebug, it's a full debugger. Set a break point and when your code hits that line you will have full debugging access to variables etc. Chrome has similar functionality in the developer tools which are included in a standard install.
If you're looking to do automated monitoring/analysis of your program, check out Chrome's Debugger Protocol. It provides a programatic API. I believe (but could be wrong) that this is what tools like Web Inspector and node-inspector are built on.
If you want something more than what the standard Firebug/Web Inspector interfaces are built on, you're going to have to either use something like this or start hacking on the internals of the V8 and Gecko JS interpreters.
As the other answer says,if you want to go step by step, setting a debug point is the way to go.
But since you seem interested in improving performance you might want to consider optimizing only the true bottlenecks in your application. To see which functions take the most to run, and other statistics you might want to take a look at console.profile() (available both in firebug and chrome).
Here is an example:
console.profile('myProfile');
//some code you want to know more about
console.profileEnd();
You can also start it manually by clicking the Profile button in the Console panel(in firebug)/ Profile panel (chrome)
In Chrome you might want to also take a look at Heap Snapshots (they tell you about memory usage).
I want to disable Javascript once a page has already loaded.
Why?
Because I want to test how the behavior of something like the following 'degrades' when javascript isn't available, but i dont want the hastle of going to the browser's top level Javascript enable/disable feature. In addition I specifically want to disable it after the page has loaded because I want to isolate my testing to how that one form would perform (I have jQuery running for the rest of the page and I don't want to lose that).
Allowing me to disable JS for this code allows me to test the form postback as well as the AJAX postback.
<form
action="/pseudovirtualdirectoryfortesting/company/Contact"
id="fooForm" method="post"
onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), {
insertionMode:
Sys.Mvc.InsertionMode.replace,
loadingElementId: 'submitting',
onBegin: Function.createDelegate(this,
submitComments_begin), onComplete:
Function.createDelegate(this,
submitComments_complete), onFailure:
Function.createDelegate(this,
submitComments_failure), onSuccess:
Function.createDelegate(this,
submitComments_success) });">
What plug-ins or tactics could I use. I want to be able to test in different browsers, and some projects I work on are designed only for one browser (not my fault) so I need as many possible solutions as there are.
Get the Web Developer Toolbar for Firefox. With it you can disable Javascript at any time, disable cookies, css, whatever you want.
Test in FireFox with the NoScript addon.
I've decided to write a separate answer on this question because I find this topic actually very important. And apparently my comment above hasn't been noticed.
In the past, functionality described:
"disable javascript after browser has rendered the content",
was easily accessible in Opera.
But independent Opera now is dead (now it's Chrome). And apparently there is almost no independent browser at all (google is the default search engine, and often you cannot replace it with your own search engine - duckduckgo would be probably much better alternative).
Well, one can consider that as just an opinion. But, well, It's pretty clear that dynamic-JS-toggle was removed from all major browser for a reason.
I've tried many popular browsers and there is no single one that provides such functionality.
Currently the only up-to-date solution is using surf browser and patch it a bit. Which is to change 1 into 0 in line:
setparameter(c, 1, (ParamName)a->i, &curconfig[a->i].val);
Surf (about, sources, patches):
https://surf.suckless.org/
This is not answer to the generic question "how to disable javascript", but was a good solution for me.
I have stopped using Microsoft's AJAX in place of jQuery.
As a result of this I am using unobtrusive javascript and it is therefore much easier to disable just the AJAX handler for my form than it is with Microsoft Ajax.
All i do is comment out the line that hooks up the AJAX call to my submit button.