style links in javascript console

Question

i have a console.log message on my site with a link. The styling is working but the link remains in black font on white background. Can i change that?

$(function() {
  var t = navigator.userAgent.toLowerCase();
  if (/(chrome|firefox|safari)/.test(t.toLowerCase())) {
    var e = ["padding: 20px 5px 16px", "background-color: #171718", "color: #f2641c"].join(";");
    var i = ["padding: 20px 5px 16px", "background-color: #f2641c", "color: #ffffff"].join(";"),
        n = ["background-color: transparent"].join(";");
    console.log("\n\n %c Some text %c http://google.com/ %c \n\n\n", e, i, n);
  } else {
    window.console && console.log("Some text - http://google.com/");
  }
});

Grecism

Seems like the fact that your text is considered as a link is preventing your styling to be applied. If you add a space after http:, you'll see your color, but you'll lose the link. – Readymade

@Readymade so i guess theres no way to change the color and keep the link? :/ – Grecism

Not that I know of. – Readymade

Have a look here: #9781718 – Melvinmelvina

@constantin-chirila doesn't work with links either. – Grecism

Answer 1

Unfortunately there's no way to color links within console messages in Chrome.

If you try to apply a color, Chrome will apply their anchor color anyway:

Firefox will use the color but force font-style: italic (you can't override this behavior):

Safari will use a gray color:

All these browsers force text-decoration: underline on links in the console.

Side note: I wrote about how you can include a lot more than just text inside of consoles, which might help people viewing this thread later.

I'd love to see browsers improve support and standardize things here.

Target