控制台中的文本显示不正确答案

【问题标题】：Incorrect display of text in the console控制台中的文本显示不正确
【发布时间】：2021-09-27 01:28:58
【问题描述】：

颜色不适用于控制台中的链接，如何解决？前两行显示正常，但第三行显示不正常：

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;');

【问题讨论】：

这里提出了一个非常相似的问题stackoverflow.com/questions/49728760/…
console.log('%c https://'+'%cstackoverflow.com/', "color: #5865f2; font: 700 18px sans-serif;", "color: #5865f2; font: 700 18px sans-serif;");

标签： javascript html css sass

【解决方案1】：

不幸的是，如果字符串是完整的 URL，则存在一些默认行为，您无法覆盖解决方案是仅传递没有 HTTP 协议的主机名，并手动将协议作为字符串附加到主机名之前。

这应该可行

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

【讨论】：

'%c https://'+'%cstackoverflow.com/' 也可以使用
@LawrenceCherone 奇怪，当我尝试它时它不起作用似乎现在仍然可以工作，感谢您的反馈我已经更新了答案。
那么它只显示文本但不能作为链接工作

【解决方案2】：

检查应用的颜色是否为黑色。试试这个，我在链接中应用了其他颜色，效果很好

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

【讨论】：

这在 Firefox 中可以正常工作，但在 google chrome 中却不行
@Hooxy oke 了解

【解决方案3】：

这似乎是本评论中指出的设计：

// 确保允许的属性不会干扰链接可见性。

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

这是有道理的，因此无法在控制台中隐藏链接。

【讨论】：