Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

The Chrome Developer Tools console logs an error each time a page asset (including an image) isn't found (i.e. returns 404).

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.

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?

(See e.g. http://chromium.googlecode.com/issues/attachment?aid=1337330000000&name=Screenshot-Google%2B+-+Google+Chrome.png&token=1F05er8uKjAQEEBrUITFjsIGJ2A%3A1358867878658&inline=1)

like image 721
Paul D. Waite Avatar asked Jan 15 '13 12:01

Paul D. Waite


People also ask

How do I stop DevTools from popping up in Chrome?

toolbar. enabled''' - double-click the entry and toggle its value to '''false'''. this will generally disable the developer toolbar after you restart the browser.

What is the purpose of the Console tab in Chrome DevTools?

Another key function of the console is that it allows the developer to inspect the code and interact with it while executing. In the DevTools Sources tab you can find all the source files of your application and apply breakpoints³ to pause the execution.


2 Answers

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.

like image 115
Jeffery To Avatar answered Oct 16 '22 15:10

Jeffery To


In the chrome developer tools, it's under the "Console" tab. Click "Filter" and it will be on the filter line as a checkbox.

like image 27
Potassium Ion Avatar answered Oct 16 '22 17:10

Potassium Ion