I'm seeing the following behavior in Firebug:
When the debugger is paused on a breakpoint, if I go to the console and attempt to execute a statement, the Enter key keeps just adding lines instead of executing.
I've tried hitting Shift+Enter and Ctrl+Enter also, to no avail.
Environment
I sometimes get this issue on firebug (console), FireFox (dev console), and FireFox developer edition (dev console).
Issue
Using the "web console" I would type something like alert("test") and hit the enter key but it would not run.
Instead of running it would enter a new line as if I hit "Shift Enter". Oddly when I hit "Shift Enter" just to see what happens, there is no more new line but the code does not run.
Attempt to find a solution
I restarted my computer, and it went away only to return again later. I don't have a solution but more of a work around (that works some of the time). The biggest issue is I don't know what causes this to happen. After may hours I can only guess what I think the issue is.
I suspect that why this happens is the developer console gets disconnected with the web page that it is trying to debugged.
If the Dev tools are disconnected, then it can not run the code (my alert) because it does not know what page/tab to run it on.
Work Around
Fully closing all Firefox windows/tabs (and its dev/firebug windows/tabs). This may-or-may-not re-associate the console with the web page allowing the code to run again.
Disclaimer
It works for me most of the time, I would be vary happy if someone (who knows more about this) could explain why this happens and a better solution. But until then for anyone else with this issue like me I hope this helps.
I have experienced the same issue, where I would enter (a long) javascript statement in the console and pressing enter would just add new lines instead of running the statements.
In my case this was caused by brackets and parentheses that were not balanced. Once they were balanced, hitting the enter key would execute the statements.
Related
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
Can anyone suggest a Javascript IDE that will help me with debugging, for example be able to tell me which .js file & which function/line caused a crash?
I am currently using Notepad2 & its extremely difficult if not impossible to figure out why the app is crashing. Right now if I attempt to print out the object/variable causing the crash using...
alert(obj);
...It causes a crash. It is really frustrating because something weird is happening where just accessing the variable - ie passing the variable in a function as a parameter or alerting it - causes Firefox to have a catastrophic crash & Safari just has no failure output(I'm sure the error occurs but it recovers gracefully).
Ever experienced this kind of problem with Javascript before? Maybe you can say "I know what that is because its happened to me before, its x doing y"?
For example: "I know what that is because its happened to me before, your calling a prototype/object static function as a member function"
Internet explorer have Console ( in IE 8 and IE 9 console is usable ) - press F12
Firefox have plugin named firebug
Chrome and Opera have built in consoles ( Press Ctrl + Shift + I )
All of them know what it is break point, can watch some variables etc.
Chrome speciality is break on event.
IE speciality is break on error, and recover from error.
All of them allows you to find out place where script crashes
Most modern browsers come with a Javascript debugger. Safari/Chrome have the Script area in the Webkit Inspector. It allows you to set breakpoints, step through code and inspect variable states. Firefox has something similar in Firebug.
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
So, I'm writing an application that has ~5k lines of javascript... and it's stopped reporting errors. No firebug, IE triangle thing, nothing. It just won't work if there's an error. Anyone seen anything like this before? Debugging is somewhat... frustrating...
My best guess is too many layers of abstraction? But there aren't really that many.
Something else is wrong. It's not simply the size of your javascript. I'm running 70,000 lines of JavaScript in Chrome's debugger and FireFox 6's firebug and there are no debugging problems.
Look elsewhere. Is something not getting loaded? Do you need to clear cache and refresh? Try another browser (like Chrome) and see the results.
If it stopped reporting errors, its more likely those errors do not exist in your current revision, or that a block of code that you think is executing is actually never run. Set a breakpoint.
99% your script is not executing at all. You need manual trace, either with breakpoints, console.logs or alerts.
1% is that you have error handlers, who silence them. Look for suspicious try { .. } catch () {} and window.onerror.
I have almost the same problem as this unanswered question. The only difference is I'm using VS2008, but I'm in an MVC project calling this javascript function:
function CompanyChange(compCtrl) {
alert(compCtrl.value);
debugger;
var test;
for (var i = 0; i < document.all.length; i++) {
test = document.all[i];
}
}
I hit the alert, then I get the message "there is no source code available for the current location." At which point the page becomes unresponsive and I have to manually stop the debugger just to shut it down.
I've logged into another machine and ran this exact code and it works fine, I hit the debugger and can step through. I've checked to make sure all settings in VS>Tools>Options>Debugging are identical as well as IE>Options>Advanced and they are. Both machines are Windows 7 Enterprise edition 32-bit, VS2008, IE8.
I've also tried attaching a process manually in VS, and using the 'Developer Tools' in IE which didn't work (said there already was a process attached).
I was hoping someone may have had this problem and found a work-around because I've already done a lot of searching and tried all the options I've read. Anyone else run into this?
Thank you,
Jeff
I recently answered the original question, so thought I'd post my answer here too:
The debugger cannot debug both Silverlight code and Script code at the same time, if the Silverlight debugger is selected JavaScript debugging is switched off.
To resolve this go to the Project's Properties and select "Start Options". Next check that the Silverlight checkbox is NOT ticked if you want to be able to debug JavaScript. (It is unfortunate that the UI here is not clear about this side effect.)
Even I had the same "Source code not available" msg for ie8. Actually I was having 2 different methods with same names having different parameters in 2 different pages and one of the method which I was invoking was not getting called due to the overloaded method which Ie8 doesn't detect. So I just renamed the function and it resolved the issue