Facebook是如何像这样记录到控制台的？

Question

我正在检查东西，就像你平常做的一样，在 Facebook 上发现了这个有趣的东西。

^{查看完整图片}

我明白这可以通过类似于这样的方法来完成：

var cssRule =
    "color: rgb(249, 162, 34);" +
    "font-size: 60px;" +
    "font-weight: bold;" +
    "text-shadow: 1px 1px 5px rgb(249, 162, 34);" +
    "filter: dropshadow(color=rgb(249, 162, 34), offx=1, offy=1);";
console.log("%cHello World", cssRule);

^来源

我的主要问题是，他们如何停止在控制台右侧始终显示的file.js:line_numer?

使用上述代码，您会看到这样的输出： ^{查看完整图片}

您注意到红色圆圈了吗？但在Facebook的示例中，他们不显示该信息。我已经查看了Mozilla的Web.Console API (链接)，所以有人可能知道如何排除那个特定的信息吗？

- Darren

---

也许它只是被隐藏了（也可能是CSS的原因）？ - Thilo

与程序开发相关：https://dev59.com/2WEi5IYBdhLWcg3wD4gu?rq=1 - Thilo

Answer 1

你只需要对console.log函数调用进行异步/延迟处理，例如：

setTimeout(console.log.bind(console, '%cFoo', 'color: #FF00FF;'), 0);

- Paul S.

---

在FF中，这会使源代码显示为“<未知>”。 - Thilo

@Thilo 的截图看起来像 Chrome。 - Paul S.

如果您只想要一个大的信息，您可以像@PaulS一样把所有的CSS都放在一行中简化，例如：console.log（"％cHi from dnldr"， "font-size: 100px;"） - Mark N Hopgood

Answer 2

虽然我晚到了派对但我觉得这样也可以！

    var cssRule =
    "color: rgb(249, 162, 34);" +
    "font-size: 30px;" +
    "font-weight: bold;" +
    "text-shadow: 1px 1px 5px rgb(249, 162, 34);" +
    "filter: dropshadow(color=rgb(249, 162, 34), offx=1, offy=1);" setTimeout(console.log.bind(console, "%cHello World", cssRule), 0);

- Powerstone