Display yellow warning message in console

I want to show a warning message in the Chrome console, like the highlighted item in this screenshot:

console.log(message) displays a normal white message.

console.error(message) creates an error message.

But using console.warning(message) returns Uncaught TypeError: console.warning is not a function.

So is there any way to present a console warning for JavaScript?

It should be like this:

(function() {
  var newbgcolor = document.getElementById('mycolor').value;
  document.getElementById('output').style.backgroundColor = newbgcolor;
});

function update() {
  var mycolorvalue = document.getElementById('mycolor').value;
  if (mycolorvalue != "#000000") {
    document.getElementById('output').style.backgroundColor = mycolorvalue;
  } else {
    console.warning("Text will be hard to read!"); // <-- error happens
  }
}

#output {
  background-color: #00ffff;
}

<!DOCTYPE html public "-//W3C//HTML 4.01 Transitional//EN">
<html>

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
</head>

<body>
  <p>Background color:</p>
  <input type="color" id="mycolor" value="#00ffff" oninput="update()" />
  <p id="output">You will see the change here.</p>
</body>

</html>

But it doesn’t work. How do I do this?

Edit: I could use custom CSS!

console.log(
  "%c Foo",
  "display:block;width:100%;background-color: #332B00;color:#F2AB26;"
);

But it just doesn’t look right:

Answer

Try using console.warn method instead of console.warning.

Example

console.warn("A sample warning message!");

Reference

Here’s a resource containing a full list of available console methods: https://developer.mozilla.org/en-US/docs/Web/API/console#methods

Advertisement

Answer

Example

Reference