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
Related
I have a variable join in a page whose value is either true or false.
When I run the page, how can I know which method modified the variable using the debug tool in chrome?
Use the debugger keyword in your code. This is the equivalent of setting a breakpoint in a debugger. When the browser hits the debugger the program will stop and you can inspect the stack trace from the dev tools.
Read this on debugging javascript.
Very often I hack and play with the JavaScript code on some website. Many times JavaScript code is secured in a function:
(function(){
var = ...
...
}());
and I cannot access the object defined in that scope.
Moreover such code is only executed once, when the page loads, thus modifying it with the chromium/google-chrome developer console (Sources toool) is useless.
Is there any simple way to live-edit some JavaScript code in a page and reload the page so that it runs the modified code?
Have a look at using something like Tampermonkey https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en
the Chrome equivalent of Firefox's Greasemonkey
EDIT: you could use this in combination with adblock to disable the loading of the script you are targeting: https://stackoverflow.com/questions/13919183/how-to-turn-off-one-javascript-or-disable-it-under-chrome
I wouldn't call it simple, but something like Intercept Proxy might be able to do it -- replacing one file with another.
I found a way to achieve what I needed.
Using Chromium's debugger I can set a breakpoint on any statement of the source code.
Once that statement is executed, the code suspends and Chromium's console gives me access to whatever is in the stack of the current function.
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
Coming from gdb, it would print the return value of a function when it finished. Is there a way to get this information from the Chrome debugger without changing the source being debugged?
A fix for this was implemented as of Nov 5, 2013, but apparently is only released, while I'm writing this, in Chrome Canary. (I see it in 33.0.1719.0, but don't see it in the Chrome Beta version 32.0.1700.19 beta.)
If the version you're running does have it, then when you step through a return statement, the debugger's Scope Variables Local scope includes a <return> entry with the value.
(I need to use Canary for the main debugging I do, but didn't notice the presence of the <return> entry until seeing the referenced notice in the issue!)
I'm using Chrome Version 57.0.2987.98 beta (64-bit) and it's in there, and really nice to have. Here's a screenshot:
My version of Chrome is 41.0.2272.118 m. Here is one good reason why you should place complex return statements on a separate line. If you add a breakpoint on any line after the return, Chrome will add (in this example) a "<return>: true" leaf under the "Local" node of the "Scope Variables" pane of the Sources panel when the breakpoint is hit.
function bar() {
return true;
}
(function foo() {
return bar();
})(); // Place breakpoint here
No, there isn't a way at present.
There is an open enhancement request for it, however. It's assigned, and as of this writing it's waiting on this V8 enhancement.
If you set a breakpoint, you can hover your mouse over variables and it'll show what the values are -- does that work for what you're trying to do?
Maybe this will do?
1.) View the page source.
2.) Look for the function definition and copy it to your clipboard.
3.) Modify the function definition on your clipboard to log the value that it is about to return. (i.e., console.log(x); return x;)
4.) Paste the patched function definition into the console and run it. This will override the existing function.
5.) Trigger the function.
It's still not possible in Chrome, but it's possible in Firefox 24+. You need to Step Out (Shift+F11) from a function, and it will display the return value or the exception thrown in Function scope.
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