Chrome 开发人员工具在 Brackets LivePreview 中显示 favicon 404 错误

Question

我刚刚开始学习 Anthony Alicea 的“Javascript: Understanding the Weird Parts”课程，他正在使用 Brackets 的实时预览功能来演示他的代码。第一个模块是准系统 HTML 页面，带有链接到空 JS 文件的脚本标记。当我在 Brackets 中打开此页面并运行实时预览时，Dev Tools 抱怨 favicon 文件丢失。

我知道这是一个小错误，但它很烦人：当我完成课程的代码示例时，我想要一个干净的控制台。我不确定是 Brackets 还是 Dev Tools 这样做。有什么方法可以消除不涉及向每个部分的代码文件夹添加虚拟图标的错误吗？

Answer 1

这基本上就是浏览器的工作方式，如果在元标记中指定了 none，它们会尝试在根文件夹中寻找 favicon.ico。

虽然有一个简单的解决方案可以过滤掉它，但它会从控制台中删除所有与网络相关的错误（但您当然仍然可以在“网络”选项卡中看到它）。单击过滤器图标（在控制台 <top frame> 旁边看起来像漏斗的图标 window，然后选中 "Hide network messages"，你应该没问题。

Answer 2

要解决此错误，只需在 :

中添加此参考即可

<link rel="icon" href="data:;base64,iVBORwOKGO=" />

Answer 3

只需在根文件夹中添加任何 favicon.ico 文件。就像图片一样：

Answer 4

您可以保存 favicon.ico 文件并指定其位置：

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

或者您可以添加文字格式的图片（例如Base64）：

<link rel="shortcut icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAdUlEQVR4AY3BsQmFQBBAwbeLiaFNmIt2cj3YhYVYhK2IuT2YGsn6WWS5Cw7+jNgPf1AqpolCw0eEkBIcB4jAusI8g5IRwW0bPA9cF0HJmFHoOoJS0bYUlIr7pqBkhgE3jrjzJCiZfcctC67vCQ0fM0JKYEbhBV2WHBhF7w0KAAAAAElFTkSuQmCC" />

或来自某些外部服务：

<link rel="shortcut icon"  type="image/x-icon" href="https:example.com/favicon.ico />

Chrome 开发人员工具在 Brackets LivePreview 中显示 favicon 404 错误

Chrome Developer Tools shows favicon 404 error in Brackets LivePreview

debugging

google-chrome

developer-tools

google-chrome-devtools

adobe-brackets