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....!")
Related
I heard the issue of multiple broswsers not supporting web export for processing javaScript. But I tried 3, MS edge, chrome and firefox it does not work in any of them. here is the link for my sketch.
http://www.azberserkfan.web44.net/electionTest/
You can also check the source code for the sketch in the same link if you ant to But I am certain that you do not need that step.
My sketch shows you results of the elections of America from 1988 to 2008 and needless to say it is based on inaccurate data. It allows to chose the category of voters and the year.
I tried to add the preloader comment since im using a csv to read data but it still does not work.
preloader comment:
/* #pjs preload="file1.png","file2.png","file3.jgp"; */
First of all, please post your code (as an MCVE) in the post itself.
Secondly, you need to familiarize yourself with the JavaScript console. That's where any errors you're getting will show up. In most browsers you can press the F12 key and then go to the console tab. There you'll see this error:
Uncaught ReferenceError: elections is not defined
So apparently you're using a variable that you haven't defined. Note that the translation process from "Java mode" Processing to Processing.js isn't always smooth, so you might have to look at the generated JavaScript to understand exactly why it's throwing this error.
If you still can't get it figured out, then please post an MCVE that demonstrates the problem. Please note that this should not be your full sketch; it should be just a few lines of code that we can copy and paste to see the same behavior.
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.
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
I'm not a JavaScript Wizard by a long shot. But I am a web-developer and so I need to know my way around it at least a bit.
Something I'll often do is simply alert a variable to see what it is.
However, the problem is that I'll often get a result like: "object HTMLInputElement". To me this means little to nothing. Sure I can look it up, but I need to alert children() of children() of children(), etc...
I've tried walking through the JavaScript with Firebug, but for some reason this is very slow. Firefox hangs when I start a debug session, for every single debug session and I don't know why.
So, I want to inform if there is a way to get detailed info on variables some other way. Or a system I can use to work with to make things easier.
I find the developer tools in Chrome work quite well, giving a good amount of detail on demand (usually just hovering the mouse over the variable in the script tab; if that variable is a structured object, a little tree control appears and you can drill down). But then, I don't have your Firebug issue either (or at least, not often anymore).
Debugging with alert is very time-wasteful and, as you've found, frustrating; if at all possible I'd look at using a real debugger (like Chrome's Dev Tools; I've also heard good things about Opera's).
This should help:
http://www.openjs.com/scripts/others/dump_function_php_print_r.php
The easiest way to inspect a javascript variable is with a debugger. If Firebug is not working out for you try using Google Chrome, it has an inspector built in.
Btw - not sure what you mean by "start a debug session". If you have firebug installed, you should simply be able to click on the firebug icon on the bottom right of your browser. Go to the script tab, and select from the drop down whatever js file you want, stick in a break point (just left-click on the margin) and refresh the page. I've never had a problem with Firebug, it's always worked extremely well. I strongly advise figuring out whatever your issue with it is, it will make your life a million times easier.
Using any of the browser dev tools, including IE9, you can use console.log to get the variable output on the console. What information this gives you will vary by browser, but with Firebug it allows you to explore the variable in the DOM inspector tab, with full access to all properties and functions (you can even copy the content of a function to paste elsewhere).
For instance:
var foo = {};
// Do lots of stuff with foo
if (typeof(console) !== "undefined" && console.log) { // prevent errors when console not open, ideally all console calls should be removed before going into production
console.log(foo);
}
This has the advantage that it doesn't require any break points, so no slow step-debugging. It won't solve everything though, you'll often still need the debugger.
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.