How to Prevent the Chrome Developer Tools Console from Logging Image 404 Errors

Can I prevent the Chrome Developer Tools console from logging image 404 errors?

Work has "started" on this by the Chromium team: 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).

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 issue with Chromium to track this.)

As a workaround, use a regular expression filter like:

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

where [file name] is the file name from the right side link.

For example, if my page is test.html, then ^(?!.* 404 \(Not Found\))(?!.*test\.html) will work.

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):

-/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.

Technically, this will filter out any message ending with the (case insensitive) string "404 (Not Found)", including console.log messages.

jQuery ajax: how to prevent 404 errors spam in chrome DevTools?

This is not possible programmatically, due to the potential for a script to misuse the blocking or filtering of errors in the console to hide its activities from the Chrome user.

You can of course filter messages in the console by Error, Warn, Debug.

You can add your voice to those asking for more powerful capabilities to filter console messages in Chrome, so when you view the console you can filter out the messages that clog it up. One of the posts does offer a tool to tag your own console messages and then filter them.

If you want to highlight an error in the console, you can add styles to it when logging in your own code. E.g the following will make the message stand out:

console.log("%cUser %s has %d points", "color:orange; background:blue; font-size: 16pt", userName, userPoints);

Chrome Developer Tools shows favicon 404 error in Brackets LivePreview

To solve this error just add this reference in :

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

Hide 401 console.error in chrome dev tools getting 401 on fetch() call

Unfortunately, this cannot be done, as this type of message in the console is printed by chrome itself. Repressing this type of message has been debated for years, but the consensus seems to be that this message is desirable - see this discussion.

Just in case you're interested: As per this comment, the reason we're seeing this message is because the response to resource retrieval requests is evaluated, and messages are dispatched at the context level.

Essentially, the way chrome was written does not allow us to change this effect, and thus we have the error messages.

---

Related Topics