This question already has answers here:
How can I debug my JavaScript code? [closed]
(20 answers)
Closed 9 years ago.
Is there something like jsfiddle where i can just enter my js code and it will show me any syntax erros, ',' or ';' out of place for example?
Using the code:
$("#customer").autocomplete({
minLength: 0,
source: customers,
focus: function (event, ui) {
$("#customer").val(ui.item.label);
return false;
},
select: function (event, ui) {
$(this).val(ui.item.label).change();
$("#customerid").val(ui.item.value);
return false;
}
});
You can check the console of the browser, opened by pressing the F12 key while in the browser. Then go to the console tab and see what messages are printed there. Javascript errors are printed here, including syntax errors.
The console will append errors from javascript when you're looking at the page in the browser.
You have two options:
Check the console of your browser (All the major browsers have it). I use google chrome. Console will show you the file having errors plus the line at which the errors are found. But... As further interpretation of Javascript is stopped after an error is found, it'd usually show you a single error. If you want to get a list of all the errors at once, then I'd suggest you to go look for some online service. Plus Google chrome has the best debugger (in my opinion) with watch and all that stuff that can help you in debugging.
You could also use online services available. For example paste your
code at JSLint and it will show you the errors
Just be aware that missing semicolons do not constitute syntax errors in JavaScript. Semicolons are optional (well almost always), if you have line breaks between statements.
Press f12 and see Console option for any errors.
A quick search on google brought up JSLint. This tool might help
JSLint.
Seems a nice tool with a lot of options for Code Quality too.
You can use Jsbin.
Check your code here when I removed one comma.
This allow you to share your code to anyone(similar to JsFiddle).
What can JS Bin do?
Write code and have it both save in real-time, but also render a full preview in real-time
Help debug other people's JavaScript, HTML or CSS by sharing and editing urls
CodeCast - where you share what you're typing in JS Bin in real-time
Remote rendering - view the output of your JS Bin on any device on any platform, updating in real-time
Processors, including: coffee-script, LESS, Markdown and Jade.
Debug remote Ajax calls
Related
When outputting messages into the console, the source is also displayed (in Chrome Developer Tools it's on the right):
console.log("Foo"); //Source
Foo test.js:1 //Output
However, on some sites, messages are displayed without the source being displayed, such as on Facebook:
Having a look on the Chrome Console API Reference there are examples across a ton of different outputs but all of them have the source displayed.
How can I hide the source (.js page and line number) of console outputs?
Edit: Just for clarification, this is not a duplicate of How does Facebook disable the browser's integrated Developer Tools? as that question answers how the console disables standard user input (and its answers explain how it works). I am specifically asking about the aesthetic of not displaying the source file and line.
They are using setTimeout to detach from the source:
setTimeout(console.log.bind(console, '\n%c' + s[0], s[1]));
for those who are still looking for this, you can use something like
function consoleWithNoSource(...params) {
setTimeout(console.log.bind(console, ...params));
}
consoleWithNoSource("Helloo....!")
When debugging JavaScript I make heavy use of the console to evaluate individual lines of code, to retrieve instance values to test in 3rd party software (i.e. when building SOAP requests)
Now I've got IE11, it looks like the code I type into the debugger is executed (I can open alert boxes etc..) however the results are not printed in the console. Does this mean I now have to surround everything I type into the console with console.log(JSON.stringify( /* ..expression.. */, null, 4 )) statements?
Is there an easier way to return to the IE10 console behavior?
Answered by #MrAnonymous, please direct all (well deserved) praise to the comments above.
As noted above, this is an issue with the Debugger tools themselves and can be rectified by reloading the tools.
I think its the cause of trailing comma, or syntax error, variable used without declaration. My js fiel is 1000 lines od code. Since the error is not provding me the line no. Its becoming dfficult to debug. Please help me with debugging techniques for IE. The script works very well with Firefox, Safari.
I'd jslint the file. That will find the issue as well as any others you may have.
You can run it as a command line utility via node.
include this <script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script> and <html debug="true"> will give you an firebug console
http://getfirebug.com/firebuglite#Debug
For debugging in IE I would recommend you install DebugBar. This extension is similar to FireBug for Firefox.
If you are developing through Microsoft Visual Studio I remember it will help you find trailing commas by highlighting the following } element with a green curly underline.
If you use the built-in developer tools in IE8 and later, you can step through your code in the browser and determine which line causes the error - starting from the top.
If you are not using any debugging tools in IE, then I will advise you to - just like Johan and bjornd are suggesting.
Happy hunting :)
If you are using eclipse :
configure spket plug-in editor for java script
It will highlight the missing/incomplete syntax (e.g comma/semicolon)
so you don't need to debug for syntax errors
Guys, I finally did it ? I took the strength of all your techniques.
1) I put the code in a single
try{
code
}
and catch(e) {
alert('Final Err: '+ e.description);
}
and kept initial 200 lines uncommented and the rest commented and ran the file
while(EOF) {
if(got an alert of error)
checked for trailing commas & putting missed semicolons till end.
else
adding some more lines later uncommented out of the commented and ran the file.
}
Finally, the page got succesfully loaded !!!
I had this issue using the Extjs RowExpander user extension. The issue only occurred in IE. I was able to fix it by adding a few lines of code at the top of the 'toggleRow' method:
if (!this.view) {
this.bindView();
}
For some reason IE occasionally chokes on references to 'this.view' (likely a timing issue). Running 'bindview()' ensures that 'this.view' resolves appropriately.
I'm writing a javascript / HTML5 canvas library to provide basic GUI elements for web audio applications.
There's a little demo script that creates widgets with the library and assemble them in a GUI. You can find it # http://bitterspring.net/webshifter/
The problem is, it seems to work correctly on Chrome and on Firefox 3.6 - 4.0 but, in the last cases, only with firebug. Without firebug, the script seems to visualize nothing on screen, while with firebug it does.
The only firebug-related pieces of code are some console.log statement I use to track the behaviour of the library. But these statements should have no effect on a non-firebug enabled browser, as I learnt from Firebug forums. What can prevent the example script to work, in these cases?
The library + example code is freshly committed on http://github.com/janesconference/KievII , by the way.
EDIT: Seems that, when console is not defined, console.log() throws an exception. Is there a way to keep the logging lines of code and not getting the exception? (yeah, one could check if console != undefined, but is there a better way?)
EDIT: This does the trick, it seems (Font)
if (typeof console=="undefined"){console={log:function(A){var B=false;if(B){alert(A)}}}}
Right, the console object is not available in all browsers by default.
This code:
if (typeof console=="undefined"){console={log:function(A){var B=false;if(B){alert(A)}}}}
- currently disables console support in Firefox 4's Web Console, since it tries to inject the console object when opened and won't do that if the page already defined a console object.
An interesting wrapper for console that deals with this problem is: http://benalman.com/projects/javascript-debug-console-log/ , although I haven't tried it myself.
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