Difference between console.log() and console.debug()?

JavascriptConsoleconsole.logWeb Developer-Toolbar

Javascript Problem Overview


Google has not been helpful for me, since searching for "console.debug" just brings up a bunch of pages that have the words "console" and "debug" on them.

I'm wondering what the difference is between console.log() and console.debug(). Is there some way to use a bunch of console.debug() statements and then just flip a switch to easily shut off all debug statements from being sent to the console (like after launching a site)?

Javascript Solutions


Solution 1 - Javascript

Technically console.log console.debug and console.info are identical However the way they display the data is little different. console.debug is not visible by default in the browser's JS console. It can be enabled by using the console's filter options.

console.log Black color text with no icon

console.info Blue color text with icon

console.debug Pure black color text

console.warn Yellow color text with icon

console.error Red Color text with icon

var playerOne = 120;
var playerTwo = 130;
var playerThree = 140;
var playerFour = 150;
var playerFive = 160;

console.log("Console.log" + " " +  playerOne);
console.debug("Console.debug" + " " +playerTwo);
console.warn("Console.warn" + " " + playerThree);
console.info("Console.info" + " " + playerFour);
console.error("Console.error" + " " + playerFive);

enter image description here

Solution 2 - Javascript

Solution 3 - Javascript

They are almost identical - the only difference is that debug messages are hidden by default in recent versions of Chrome (you have to set the log level to Verbose in the Devtools topbar while in console to see debug messages; log messages are visible by default).

Solution 4 - Javascript

console.info ,console.debug methods are identical to console.log.

  • console.log Printing statement
  • console.info Black color text with "i" icon in blue color
  • console.debug Blue Color text

Documentation:

Solution 5 - Javascript

If you want the ability to disable logging after a product is finished you could override the console.debug() function or make another custom one.

console.debug = function() {
	if(!console.debugging) return;
    console.log.apply(this, arguments);
};

console.debugging = true;
console.debug('Foo', {age:41, name:'Jhon Doe'});

>Foo▸ {age: 41, name: "Jhon Doe"}

console.debugging = false;
console.debug('Foo', {age:26, name:'Jane Doe'});

>No output

However I havent figured a way to color the outputs as well.

Solution 6 - Javascript

From Documentation of browsers,The log,debugand also info methods are identical in implementation wise but varies in color and icon

https://jsfiddle.net/yp4z76gg/1/

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionCaptSaltyJackView Question on Stackoverflow
Solution 1 - JavascriptPrabhakar UndurthiView Answer on Stackoverflow
Solution 2 - JavascriptPete TNTView Answer on Stackoverflow
Solution 3 - Javascriptuser2486570View Answer on Stackoverflow
Solution 4 - JavascriptVenkatView Answer on Stackoverflow
Solution 5 - JavascriptEspen M. S.View Answer on Stackoverflow
Solution 6 - Javascriptuser4648588View Answer on Stackoverflow