我可以阻止 Chrome 开发者工具控制台记录图像 404 错误吗？ [复制]答案

【问题标题】：Can I prevent the Chrome Developer Tools console from logging image 404 errors? [duplicate]我可以阻止 Chrome 开发者工具控制台记录图像 404 错误吗？ [复制]
【发布时间】：2012-12-29 12:41:38
【问题描述】：

每次找不到页面资产（包括图片）时，Chrome 开发者工具控制台都会记录一个错误（即返回 404）。

在我的工作中，我经常在图像由第三方提供并且在开发过程中可能不可用的网站上工作。让每个丢失的图像在控制台中显示为错误会使其他更重要的错误（例如 JavaScript 错误）更难注意到。

是否有阻止控制台将未找到的图像记录为错误的设置？

或者是否有某种方法可以按照您可以在“网络”选项卡中过滤请求的相同标准过滤控制台消息？

（参见例如http://chromium.googlecode.com/issues/attachment?aid=1337330000000&name=Screenshot-Google%2B+-+Google+Chrome.png&token=1F05er8uKjAQEEBrUITFjsIGJ2A%3A1358867878658&inline=1）

【问题讨论】：

也许你可以安装chrome的firebug lite插件，我不知道firebug lite，因为我使用firebug和firefox，但是使用firefox你可以选择显示或不显示哪些错误。
@HansVn：我知道你要去哪里了，但我认为 Firebug Lite 没有 JavaScript 错误控制台，所以我不能用它来代替 Chrome 开发者工具控制台。跨度>
Chromium 团队已经“开始”工作：code.google.com/p/chromium/issues/detail?id=96212
@PaulD.Waite：完成了，不过我希望有人想出一个扩展来添加这个功能。
相关：Suppress Chrome 'Failed to load resource' messages in console

标签： javascript image google-chrome-devtools

【解决方案1】：

Chromium 团队已“开始”这方面的工作：https://code.google.com/p/chromium/issues/detail?id=96212

更新：该功能请求已于 2013 年 3 月 18 日关闭。我不确定该功能首次出现在哪个版本的 Chrome 中，但我可以在我的 Chrome v33 中确认控制台过滤选项。 0.1750.152 (Linux)。

更新 2： 目前，当输入过滤器（纯文本或正则表达式）时，会针对消息文本（例如GET http://example.com/foobar 404 (Not Found)）以及右侧的文本进行测试链接（例如test.html:65）。（我已向 Chromium 提交了issue 以跟踪此问题。）

作为一种解决方法，使用正则表达式过滤器，例如：

^(?!.* 404 \(Not Found\))(?!.*[file name])

其中[file name] 是右侧链接中的文件名。

例如，如果我的页面是test.html，那么^(?!.* 404 \(Not Found\))(?!.*test\.html) 将起作用。

注意：这也会过滤掉消息文本中包含文件名的消息。我不确定现在有没有办法解决这个问题。

更新（2019-06-05）：此表达式将在我当前版本的 Chrome（75.0.3770.80）中过滤掉 404：

-/404\s\(Not\sFound\)$/

过滤似乎首先在处理每个标记之前用空格分割过滤器字符串，但它也会在正则表达式内分割空格，所以\s's 是必要的。

从技术上讲，这将过滤掉所有以（不区分大小写）字符串“404（未找到）”结尾的消息，包括console.log 消息。

【讨论】：

这个怎么解决？有没有可能？
@mayankcpdixit 对于这个问题，“是否有一个设置可以阻止控制台将未找到的图像记录为错误？或者是否有某种方法可以通过与过滤请求相同的标准过滤控制台消息在网络选项卡中？”当时的回答是，“不，但他们正在努力。”不喜欢答案不是投反对票的正当理由。
感谢您的回复。 “不”对我有用 :) （现在）有什么方法可以使它成为可能？
@mayankcpdixit 在控制台选项卡中，有一个带有漏斗图标的按钮（在清除控制台日志按钮旁边）。单击它会显示过滤选项。如果您没有这样的按钮，我建议您确保使用的是最新版本的 Chrome。
@Fernando 请查看更新后的答案

【解决方案2】：

在 chrome 开发者工具中，它位于“控制台”选项卡下。单击“过滤器”，它将作为复选框出现在过滤器行上。

【讨论】：

我真的希望这个东西可以标准化并集成到javascript代码中。控制台越来越多地被开发人员使用和调整，并且似乎已经成为 Web 功能的一部分。

【解决方案3】：

作为替代答案，您可以在您的开发服务器上运行一些 javascript 来更改违规图像的 src 属性（只要确保您没有将其发布到您的生产环境！）。

如果您不想实际将 javascript 添加到页面（可以理解），您可以通过 chrome 插件（可能是 greasemonkey chrome 克隆 - tampermonkey）在页面加载时运行脚本。

n.b.感谢您的反馈，特别是要使其工作，它需要在 dom 准备好之后和图像加载之前的事件中。

【讨论】：

你测试过吗？在标记后立即执行onerror='return false;' 甚至更改src 并不能防止控制台错误：jsfiddle.net/epcB7
好点，我在页面加载之前考虑 - 所以在中，
在<head> 中，当<body> 和<img>s 尚未加载但您实际上无法执行任何操作。在<img> 之后立即切换src 是您可以获得的最快速度（这就是我在jsfiddle 中所做的）。
我在想也许在 document.ready() 中，但看起来为时已晚 - 因为图像可能已经开始下载：jsfiddle.net/AYmsq/5 但是也许有一些 uber javascript 事件技能的人知道使用更好的事件（我找不到）。
我不会推荐我的技术（感谢 Konrad 的反馈），但如果有更好的活动可以参与的话，这是值得的。

【解决方案4】：

在您的应用程序中，在您的“catch”语句中.. 在“console.warn”下记录异常.. 知道它适用于 firebug。在 Firebug 中，您可以在“警告”选项卡下找到这些“错误”。我想 Chrome 开发者工具也是如此。

实际上一天前做了类似的事情.. 我的应用程序会因某些错误而停止，因此，我改用了“try”和“catch”块。我的捕获看起来像：抓住（e）{ 控制台.警告（e）； }

【讨论】：

我没有记录异常。 Chrome 的开发者工具控制台会自行记录丢失的图像。我的问题的第一句话就是这么说的。