Javascript 我可以阻止 Chrome 开发者工具控制台记录图像 404 错误吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14337351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I prevent the Chrome Developer Tools console from logging image 404 errors?
提问by Paul D. Waite
The Chrome Developer Tools console logs an error each time a page asset (including an image) isn't found (i.e. returns 404).
每次找不到页面资产（包括图像）（即返回 404）时，Chrome 开发人员工具控制台都会记录错误。
In my work, I'm often working on sites where images are provided by third parties and may not be available during development. Having each missing image show up as an error in the console makes other more important errors (e.g. JavaScript errors) harder to notice.
在我的工作中，我经常在第三方提供图像并且在开发过程中可能无法使用的站点上工作。让每个丢失的图像在控制台中显示为错误会使其他更重要的错误（例如 JavaScript 错误）更难以注意到。
Is there a setting that stops the console logging unfound images as errors?
是否有设置可以停止控制台将未找到的图像记录为错误？
Or is there some way to filter console messages by the same sort of criteria that you can filter requests by in the Network tab?
或者是否有某种方法可以通过与您可以在“网络”选项卡中过滤请求的条件相同的条件来过滤控制台消息？
采纳答案by Jeffery To
Work has "started" on this by the Chromium team: https://code.google.com/p/chromium/issues/detail?id=96212
Chromium 团队已经“开始”了这方面的工作：https: //code.google.com/p/chromium/issues/detail?id =96212
Update:The feature request was closed on March 18, 2013. I'm not sure in which version of Chrome this feature first appeared, but I can confirm console filtering options in my Chrome v33.0.1750.152 (Linux).
更新：该功能请求已于 2013 年 3 月 18 日关闭。我不确定此功能首次出现在哪个 Chrome 版本中，但我可以在我的 Chrome v33.0.1750.152 (Linux) 中确认控制台过滤选项。
Update 2:Currently, when a filter (plain text or regular expression) is entered, it is tested against the message text (e.g. GET http://example.com/foobar 404 (Not Found)) as well as the text of the right side link (e.g. test.html:65). (I have filed an issuewith Chromium to track this.)
更新 2：目前，当输入过滤器（纯文本或正则表达式）时，它会针对消息文本（例如GET http://example.com/foobar 404 (Not Found)）以及右侧链接的文本（例如test.html:65）进行测试。（我已经向Chromium提交了一个问题来跟踪这个问题。）
As a workaround, use a regular expression filter like:
作为解决方法，请使用正则表达式过滤器，例如：
^(?!.* 404 \(Not Found\))(?!.*[file name])
^(?!.* 404 \(Not Found\))(?!.*[file name])
where [file name]is the file name from the right side link.
[file name]右侧链接中的文件名在哪里。
For example, if my page is test.html, then ^(?!.* 404 \(Not Found\))(?!.*test\.html)will work.
例如，如果我的页面是test.html，那么^(?!.* 404 \(Not Found\))(?!.*test\.html)将起作用。
Note: This will also filter out messages that have the file name in the message text. I'm not sure there is a way around this for now.
注意：这也将过滤掉消息文本中具有文件名的消息。我不确定现在有没有办法解决这个问题。
Update (2019-06-05):This expression will filter out 404s in my current version of Chrome (75.0.3770.80):
更新（2019-06-05）：这个表达式将过滤掉我当前版本的Chrome（75.0.3770.80）中的404s：
-/404\s\(Not\sFound\)$/
It seems the filtering first splits the filter string by whitespace before processing each token, but it will also split spaces inside of a regular expression, so the \s's are necessary.
在处理每个标记之前，过滤似乎首先用空格分割过滤器字符串，但它也会在正则表达式内分割空格，因此\s's 是必要的。
Technically, this will filter out any message ending with the (case insensitive) string "404 (Not Found)", including console.logmessages.
从技术上讲，这将过滤掉以（不区分大小写）字符串“404（未找到）”结尾的任何消息，包括console.log消息。
回答by Potassium Ion
In the chrome developer tools, it's under the "Console" tab. Click "Filter" and it will be on the filter line as a checkbox.
在 chrome 开发人员工具中，它位于“控制台”选项卡下。单击“过滤器”，它将作为复选框出现在过滤器行上。
回答by Alex KeySmith
As an alternative answer you could run a bit of javascript to alter the src attribute of the offending images when on your dev server (just make sure you don't publish it to your production environment!).
作为替代答案，您可以在开发服务器上运行一些 javascript 来更改违规图像的 src 属性（只需确保不要将其发布到您的生产环境！）。
If you don't want to actually add javascript to the page (understandably) you could probably run the script on load of the page via a chrome plugin (perhaps the greasemonkeychrome clone - tampermonkey).
如果你不希望真正的javascript添加到页面（可以理解），你很可能通过镀铬插件（可能是运行在页面加载脚本的Greasemonkey- tampermonkey铬克隆）。
n.b. Thanks for the feedback, notably for this to work it'll need to be within an event after the dom is ready and before the images load.
nb 感谢您的反馈，特别是要使其工作，它需要在 dom 准备好之后和图像加载之前发生在一个事件中。
回答by Murtaza Khursheed Hussain
It would be best to put a 404 image on the server and check on server side if the file exist if not display the default 404 image.
如果不显示默认的 404 图像，最好将 404 图像放在服务器上并在服务器端检查文件是否存在。
Regards
问候
回答by Afroman Makgalemela
In your app, in your 'catch' statement.. log the exception under 'console.warn' .. know it works with firebug. In Firebug, you can then find these 'errors' under the 'warnings' tab. I would like to think the same can be true for Chrome Developer Tools..
在您的应用程序中，在您的“catch”语句中......在“console.warn”下记录异常......知道它适用于萤火虫。在 Firebug 中，您可以在“警告”选项卡下找到这些“错误”。我想 Chrome 开发者工具也是如此。
actually did something similar day ago.. my app would stop on some error, so, I instead used the 'try' and 'catch' block. My catch looks like: catch (e) { console.warn(e); }
实际上前一天做了类似的事情..我的应用程序会因某些错误而停止，因此，我改为使用“try”和“catch”块。我的捕获看起来像： catch (e) { console.warn(e); }
