Develop Reference

Javascript debugging in Chrome Inspector: variables are shown undefined in watches and console but can be inspected when hovered

While debugging AngularJS in Chrome inspector I often face the situation when I know that some variables are defined, and I can inspected them by hovering a mouse over them in Chrome inspector. They also appear in 'locals' tab. However, when I try to add them to watch tab or evaluate them in console by typing the variable name I get "undefined". See picture(notice variable 'xhr').
Can anyone explain the reason why sometimes variables are shown as undefined in watch tab and console, when they aren't actually undefined in current scope? And, if it's possible, how to make watch window and console to display values of the variables correctly all the time?
See picture(notice variable 'xhr').
Thanks

Source mapped variables will not show the resolved names in the debugger, as this functionality has yet to be implemented. The interesting part is that the map file does contain a names array, containing the original names. However, the browser has yet to use this. There was an experimental feature in Canary, but that doesn't appear to exist anymore.
You can follow the display source map variable names in Developer Tools thread.
In the meantime, I recommend switching to the un-minified version of the library to debug your particular problem(s), but switch it out in production. Not ideal I know.

JavaScript where in the code a value was updated [duplicate]

Similar to other questions here, like this one.
Is there a way to break on the change of a variable value in any JavaScript debugger? (like IE Developer tools, Visual Studio, or Firebug)?
I guess it's something like a "watch variable", but I want to be able to see the callstack and pause it when the change to the variable actually occurs.
An alternative approach might be to override the value setting with a custom setter, and put a breakpoint in that, but unfortunately that won't work for IE AFAIK.
UPDATE
It appears that this type of behavior is available at least for unmanaged code written in C++ So I thought maybe a javascript engine written in C++ (Google's V8) might have something similar, but that doesn't appear to have what I want either.

You don't even need an IDE - you can use "Object.watch()":
Object.Watch Tutorial
If you use any one debugger, I'd strongly recommend Firebug. For all your Javascript, HTML and CSS needs :-):
http://getfirebug.com/javascript
===========================================================
Update for 2019:
Object.Watch is Ancient History. Uncoincidentally, it's unavailable in most contemporary browsers.
My personal favorite JS debugging tool these days is Chrome Developer Tools.
My personal favorite JS IDE (for Angular, .Net Core, etc) is Microsoft Visual Studio Code (MSVC).
You can do just about any "expected" debugging operation - including set watches - with the Chrome debugger (just as you could with FF Firebug).
Chrome debugger is well integrated with the MSVC IDE.
Both are "free" (at least "free as in beer"); both run well on Windows, Mac and Linux.

I'm having success with this library in Chrome and it looks to support all major browsers.
https://gist.github.com/eligrey/384583
Just include the .js file, then call:
yourObject.watch('someProperty', function() {
doWhatYouWant();
debugger;
console.write('this too');
alert('Object Changed'); //etc
});

I don't know if I misunderstood your question. If you want to watch an expression and stop when it reaches a certain value while in a js debugging session in Chrome Developer Tools, it's rather trivial.
You can simply put a breakpoint on the line where the value you want to check is, then click with right mouse button on it and select "Edit breakpoint...". A dialog will pop up prompting for an expression, where execution will stop when its value its true.
For instance, let's say you have a loop and you are adding one unit to a variable inside it and want to stop execution when the variable equals to 3. The expression in loop would look like this:
n = i++;
You must set your breakpoint on that line and the expression to watch (after prompted by "Edit breakpoint...") would be n == 3. When running your code it will stop there when your variable reaches that value.
You'll notice your condition is set because your breakpoint turns orange instead of blue.

How to view the v8 javascript stack? [duplicate]

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

Is there any javascript function to debug trace the scripts

I want to backtrack from where the function is called in ExtJS.
Just like in PHP we have debug_trace() which shows the whole chain of methods .
is there something like that available in extjs or javascript

You should be able to set a breakpoint in your browser's dev tools of choice and bring up the call stack.
Search "call stack" in the following articles:
https://developers.google.com/chrome-developer-tools/docs/javascript-debugging
https://developer.mozilla.org/en-US/docs/Tools/Debugger

if you are using chrome, i know there is a console.trace() which you can add in your code while debugging to bring you the trace, i havent used it on any other to know if it exists on otheres
you can also use the debugger keyword to add breakpoints or you can use the debugger function in your dev console

How to set a breakpoint on a minified JS function in Chrome or Safari?

I'd like to set a breakpoint in a "Cart.add" function in the Chrome or Safari JavaScript debuggers. Problem is, this function is defined in a large minified JS file, and doesn't exist on a line by itself.
Some documentation says that the WebKit-based debuggers support "break" or "debug" commands in the debug console, but those don't seem to work in newer versions of the debugger.
Setting a breakpoint on that line of the JS file doesn't work either, since there are lots of functions on that line.
Any suggestions?

In Chrome when you open Scripts tab you can prettify selected file by clicking on { } button ("Pretty print") at the bottom. After that you can find your line and set a breakpoint. The code will remain prettified with breakpoints in place after a page refresh.

The debugger statement is probably what you're looking for.
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
a. Perform an implementation defined debugging action.
b. Let result be an implementation defined Completion value.
Else
a. Let result be (normal, empty, empty).
Return result.
The break statement is for exiting loops and switch statements and has nothing to do with debugging.
The real solution though is to not bugger your code in the first place :)

1) The error message should give you a link to the source code in the
Sources tab. Click on that link to get taken to the transpiled code.
2) Click the "{ }" icon at the bottom of the source code in the
Sources tab to format the transpiled code for easier debugging.
3)Stick a breakpoint at the line that is failing.
4) Reproduce the
problem again. This time, it should break at the breakpoint before
the error occurs.
5) Examine the local variables and call stack to
determine what exactly is going wrong.

For chrome users, you'll want to enable automatic pretty print in the experimental features.
setting your breakpoint should work now.

If you have saved the webpage then beautify your js file using jsbeautifier.org which formats your entire script. Then replace your js content with the beautified version. From here you can debug your JS easily