We Keep Coding

Javascript console : detect history of function calls

I am working on a code which I have not written myself, and I would like to know if it would be possible to detect which functions are called by Javascript. Does any console do this ?
Thank you !

You can use Chrome Developer Tools to debugger your code (F12).
In Sources panel you can define your own breakpoint (in the code or event listener). Then you could analyze the code, and include counters etc.
Also you can see the stack trace of any function.

Everywhere you want to see stacktrace you can do this:
console.log(new Error().stack)

i think you can learn more about debugging in https://developer.chrome.com/devtools/docs/javascript-debugging

What are the rights ways of debugging javascript?

I made a function called test() in javascript file.Placed a simple alert into it.
In html file, called the method on click of a button. But,it was not being invoked.
Problem was in the 11th function, nowhere related to mine !!!! But, how can a person making his first javascript function suppose to find that out ???
I am looking for best ways to debug javascript.

You can debug javascript using many modern browsers. See this question for details on how to debug in Google Chrome:
How do you launch the JavaScript debugger in Google Chrome?
Furthermore, you shouldn't use alert() for debugging as this can give different results to a production version due to alert() causing a pause in the script.
It is best practice to use console.log() and view the output in the browsers Console.
You can also put debugger in your javascript code to force a breakpoint. However I prefer not to use this as forgetting to remove this before deployment will cause your script to pause, which can be quite embarrassing!

You should use the debug console provided by the browser.
Chrome has it inbuilt, press CTRL + SHIFT + j. In Firefox, install Firebug plugin.
In your code, add alert() to show flow and get values of variables.
Also, use console.log() which will only output to the debug console.

Depending on your browser choice there are debugging options - I tend to use Firefox, so Firebug in my case. There is a question that list options for other browsers - What is console.log and how do I use it?
Unless the project you're working on has already adopted a mechanism for debugging, console.log() tends to be a simple and useful option when tracking down a problem.
Whilst debugging you could take the approach to log out a line when entering a function, like so:
var myFunc = function(el) {
console.log('Inside myFunc');
// Existing code
};
This will enable you to see which functions have been called and give you a rough idea of the order of execution.
You can also use console.log() to show the contents of variables - console.log(el);
Be mindful to remove/disable console.log() calls once you're done as it will likely cause some issues in production.

To answer your question within question,
how can a person making his first javascript function suppose to find that out ???
Well, when something is wrong in JavaScript, for example, you made a syntax error - the script will stop working from there. However, this won't stop HTML from rendering on, so it might look as if everything is correct (especially if your JS is not changing the look of the page) but all the functionality of JS will be dead.
That's why we use the debug tools (listed in the other answers here) to see what's wrong, and in cases like this, it's very easy to notice which function has errors and is causing the whole script to break. This would probably have save a few minutes to your seniors as well.
The best approach would be to test frequently so that whenever you run into errors, you can fix them right away.

How to find which javascript code fired ajax?

Is there any quick way to find out which javascript code (file name and exact line) fired a particular ajax call?
Using firebug i can locate the ajax call but finding out the exact line quickly will help to debug
Thanks in advance for any help

In Firebug you can either click the source link in the Console panel:
or set a breakpoint in the Net panel:

If you put a breakpoint in your code at the point of this ajax call, the debugger will show you the stack of function calls.
See this from Chrome developer tools documentation :

I don't really know any clean method (maybe there exists one). But I have a little hack to propose.
If you are not using Prototype.js in your webpage, enter these commands in the command line (with Firebug 1.11):
window.old$ = $; // in case you're using a framework like jQuery
include("https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"); // loads Prototype
The console should print: prototype.js properly included.
Then, to restore your old "$" variable, type:
window.$ = window.old$;
Now that Prototype is loaded, we can wrap the XMLHttpRequest.prototype.open function, so we can get the call stack (just like suggested dystroy):
XMLHttpRequest.prototype.open = XMLHttpRequest.prototype.open.wrap(function(orig, ...args)
{
console.log("trace for :"+args[1]); // prints the URL of the request
console.trace(); // prints the stack trace
orig.apply(null, args); // call the original function
});
And that's it.
N.B.: if the request is launched at start:
in the Script panel, set a breakpoint on the first JS instruction of your webpage
execute the commands above in the Console panel
go back to the Script panel, and click on continue

what I usually do is adding a bunch of:
console.log("message that explains where in the code I am now...");
but pay attention, because console.log can create problems with older version of IE, you have to remove all console.log calls when you go in production.

How to set a JavaScript breakpoint from code in Chrome?

I want to force the Chrome debugger to break on a line via code, or else using some sort of comment tag such as something like console.break().

You can use debugger; within your code. If the developer console is open, execution will break. It works in firebug as well.

You can also use debug(function), to break when function is called.
Command Line API Reference: debug

Set up a button click listener and call the debugger;
Example
$("#myBtn").click(function() {
debugger;
});
Demo
http://jsfiddle.net/hBCH5/
Resources on debugging in JavaScript
http://www.laurencegellert.com/2012/05/the-three-ways-of-setting-breakpoints-in-javascript/
http://berzniz.com/post/78260747646/5-javascript-debugging-tips-youll-start-using-today

As other have already said, debugger; is the way to go.
I wrote a small script that you can use from the command line in a browser to set and remove breakpoint right before function call:
http://andrijac.github.io/blog/2014/01/31/javascript-breakpoint/

debugger is a reserved keyword by EcmaScript and given optional semantics since ES5
As a result, it can be used not only in Chrome, but also Firefox and Node.js via node debug myscript.js.
The standard says:
Syntax
DebuggerStatement :
debugger ;
Semantics
Evaluating the DebuggerStatement production may allow an implementation to cause a breakpoint when run under a debugger. If a debugger is not present or active this statement has no observable effect.
The production DebuggerStatement : debugger ; is evaluated as follows:
If an implementation defined debugging facility is available and enabled, then
Perform an implementation defined debugging action.
Let result be an implementation defined Completion value.
Else
Let result be (normal, empty, empty).
Return result.
No changes in ES6.

On the "Scripts" tab, go to where your code is. At the left of the line number, click. This will set a breakpoint.
Screenshot:
You will then be able to track your breakpoints within the right tab (as shown in the screenshot).

There are many ways to debug JavaScript code. Following two approaches are widely used to debug JavaScript via code
Using console.log() to print out the values in the browser
console. (This will help you understand the values at certain points
of your code)
Debugger keyword. Add debugger; to the locations you want to
debug, and open the browser's developer console and navigate to the
sources tab.
For more tools and ways in which you debug JavaScript Code, are given in this link by W3School.

It is possible and there are many reasons you might want to do this. For example debugging a javascript infinite loop close to the start of the page loading, that stops the chrome developer toolset (or firebug) from loading correctly.
See section 2 of
http://www.laurencegellert.com/2012/05/the-three-ways-of-setting-breakpoints-in-javascript/
or just add a line containing the word debugger to your code at the required test point.

Breakpoint :-
breakpoint will stop executing, and let you examine JavaScript values.
After examining values, you can resume the execution of code (typically with a play button).
Debugger :-
The debugger; stops the execution of JavaScript, and callsthe debugging function.
The debugger statement suspends execution, but it does not close any files or clear any variables.
Example:-
function checkBuggyStuff() {
debugger; // do buggy stuff to examine.
};

You can set debug(functionName) to debug functions as well.
https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#function

I wouldn't recommend debugger; if you just want to kill and stop the javascript code, since debugger; will just temporally freeze your javascript code and not stop it permanently.
If you want to properly kill and stop javascript code at your command use the following:
throw new Error("This error message appears because I placed it");

This gist Git pre-commit hook to remove stray debugger statements from your merb project
maybe useful if want to remove debugger breakpoints while commit

ROR and JS debugging

I've just read through some tutorials on using ajax with rails. Below you can see a JS script extracted from one of them with some modifications which I expected to cause some errors and write some text somewhere. (public/javascripts/application.js)
$('.submittable').live('change', function() {
$(this).parents('form:first').submit();
fdafdasfewa
document.write("Welcome to my world!!!");
echo "------------------";
});
In fact the script still works with no side effects.
Where does document.write and echo put text?
How can I debug such a script when I can't even see its output? Well sometimes probably I'll not even be able to determine if ran or not.

Try putting in an alert to make sure your code is being reached
$('.submittable').live('change', function() {
$(this).parents('form:first').submit();
alert('reached this point');
...
Also, use Firebug or Chrome's development tools. In Chrome on the mac the shortcut is command-alt-i to bring up the dev tools, then click 'console' to bring up...the console.
In the console you can type
$('.submittable')
To make sure your js has a dom element to attach to. If $('.submittable') returns nothing then there's no dom element selected. You can even set breakpoints and step through them in the dev tools. To create a break point just do
$('.submittable').live('change', function() {
$(this).parents('form:first').submit();
debugger;
...
and the dev tools will take over when that line is reached.

My guess is when you called the $(this).parents('form:first').submit() the page posted the form and javascript didn't execute past that point, which is why it didn't throw any errors of or write anything to the document.
I would use console.log to write test output in combination with the developer tools in chrome or Firebug. That way you know to look in the console and you can also use things like breakpoints to watch the execution of the javascript.