Incorrect display of text in the console

Question

Color does not work for links in the console, how can this be fixed? The first two lines are displayed fine, but the third line is not working correctly:

console.log('%cHello-hello-hello', 'color: #5865f2; font: 700 68px sans-serif;-webkit-text-stroke: 2px black;');
console.log('%cat the link below', 'color: #5865f2; font: 700 24px sans-serif;');
console.log('%chttps://stackoverflow.com/', 'color: #000; font: 700 18px sans-serif;');

A quite similar question has been asked here https://stackoverflow.com/questions/49728760/style-links-in-javascript-console — Ahmad Habib, Jul 19 '21 at 11:24
`console.log('%c https://'+'%cstackoverflow.com/', "color: #5865f2; font: 700 18px sans-serif;", "color: #5865f2; font: 700 18px sans-serif;");` — Lawrence Cherone, Jul 19 '21 at 12:17

score 0 · Answer 1 · answered Jul 19 '21 at 11:24

0

Check applied color its black. Try this i have applied other color in link and it's working fine

console.log('%chttps://stackoverflow.com/', 'color: #5865f2; font: 700 18px sans-serif;');

answered Jul 19 '21 at 11:24

kamlesh parmar

133
10

This works fine in firefox, but not in google chrome – Hooxy Jul 19 '21 at 11:30
@Hooxy oke understood – kamlesh parmar Jul 19 '21 at 11:31

Josh · Accepted Answer · 2021-07-19T12:18:44.057

0

Unfortunately if the string is a full URL there's some default behaviour you can't override the solution Is to only pass the hostname without the HTTP protocol and manually append the protocol as a string before the hostname.

This should work

const css = "color: #000; font: 700 18px sans-serif;"
console.log('%c https://'+'%cstackoverflow.com/', css, css);

edited Jul 19 '21 at 12:18

answered Jul 19 '21 at 12:04

Josh

459
5
10

`'%c https://'+'%cstackoverflow.com/'` will work too – Lawrence Cherone Jul 19 '21 at 12:16
@LawrenceCherone Odd when I tried it didn't work seems to be working now anyway thanks for the feedback I have updated the answer. – Josh Jul 19 '21 at 12:21
then it only display text but not working as Link – kamlesh parmar Jul 19 '21 at 12:23

score 0 · Answer 3 · answered Jul 19 '21 at 12:22

This seems to be by design as pointed out in this comment:

// Make sure that allowed properties do not interfere with link visibility.

https://github.com/ChromeDevTools/devtools-frontend/blob/ef157dab2ccf321941548a51d350f9383a78d283/front_end/panels/console/ConsoleViewMessage.ts#L928

This makes sense so links cannot be hidden in the console.

Incorrect display of text in the console

3 Answers3