75

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)

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
  • maybe you can install the firebug lite plugin for chrome, I don't know firebug lite since I use firebug with firefox, but with firefox you can select which errors to display or not. – Hans Vn Jan 15 '13 at 12:41
  • @HansVn: I see where you're going, but I don't think Firebug Lite has a JavaScript error console, so I can't use it instead of the Chrome Developer Tools console. – Paul D. Waite Jan 15 '13 at 16:41
  • 1
    Work has "started" on this by the Chromium team: https://code.google.com/p/chromium/issues/detail?id=96212 – Jeffery To Jan 18 '13 at 09:49
  • @JefferyTo: excellent - a built-in option would be ideal, so knowing the status of that feature is very helpful. If you want to put that in as an answer instead of a comment, it'd get the bounty (unless someone else actually patches the functionality I'm looking for into the inspector). – Paul D. Waite Jan 18 '13 at 10:07
  • Avoid using external images on the development server, and/or cache them on your development server. – oxygen Jan 20 '13 at 13:00
  • 1
    @PaulD.Waite: Done, though I hope someone comes up with an extension that adds this functionality. – Jeffery To Jan 20 '13 at 18:14
  • @JefferyTo: yeah that'd be cool. – Paul D. Waite Jan 21 '13 at 10:07
  • @Tiberiu-IonuțStan: sadly, neither of those options are practical in my situation. – Paul D. Waite Jan 22 '13 at 15:16
  • console.clear() will do the trick if u dont need any console messages – Arun_SE Dec 15 '15 at 08:03
  • @Arun_SE: “Having each missing image show up as an error in the console makes other more important errors (e.g. JavaScript errors) harder to notice.” – Paul D. Waite Dec 15 '15 at 09:38
  • 1
    related: [Suppress Chrome 'Failed to load resource' messages in console](http://stackoverflow.com/q/4500741/1048572) – Bergi Feb 20 '16 at 18:39
  • https://developers.google.com/web/tools/chrome-devtools/console/#filtering_the_console_output – Bergi Jun 27 '17 at 02:06

4 Answers4

46

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.

Jeffery To
  • 11,836
  • 1
  • 27
  • 42
  • 6
    How come this a solution? Is it possible or not? – mayankcpdixit Apr 03 '14 at 09:36
  • 1
    @mayankcpdixit For the question, "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?" the answer at the time was, "No, but they're working on it." Not liking an answer isn't a valid reason for downvoting. – Jeffery To Apr 03 '14 at 12:58
  • 2
    Thanks for the reply bud. "No" works for me :) What's the way (now) to make it possible? – mayankcpdixit Apr 04 '14 at 04:07
  • @mayankcpdixit In the console tab, there is a button with a funnel icon (next to the clear console log button). Clicking it reveals the filtering options. If you don't have such a button, I suggest making sure you're using the latest version of Chrome. – Jeffery To Apr 04 '14 at 07:23
  • Console filter is something I'm aware of, what I want to know is: " What if I don't want my program to generate errors and handle them in my JS code itself." You have any idea? – mayankcpdixit Apr 04 '14 at 07:28
  • @mayankcpdixit You mean [try...catch](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch)? It's better to fix JS errors rather than to silence them. Also, JS errors are unrelated to this question (image 404 errors). – Jeffery To Apr 04 '14 at 11:19
  • What would be the filter to use to show all errors except 404 error? – Bill Keller May 20 '14 at 15:30
  • @soupenvy A regex like `^(?!.* 404 \(Not Found\))` would filter out 404 errors, if negative lookaheads worked (sigh). I've filed a bug: https://code.google.com/p/chromium/issues/detail?id=375633 – Jeffery To May 21 '14 at 07:12
  • So you press the button with a funnel icon and then what? Is there a way to filter 404 errors or not? How? – Fernando May 23 '14 at 07:47
  • Thank you very much, @Jeffery To. It works in Chrome 35.0.1916.114 m on windows 7. – Fernando May 26 '14 at 13:50
29

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

Michael
  • 41,989
  • 11
  • 82
  • 128
Potassium Ion
  • 2,075
  • 1
  • 22
  • 39
  • I really hope this thing could be standardized and integrated to javascript code. console is more and more used and tuned by developers and seems part of the web feature already. – intijk Feb 28 '18 at 19:49
0

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!).

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 greasemonkey chrome clone - 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.

Alex KeySmith
  • 16,657
  • 11
  • 74
  • 152
  • 3
    Have you tested that? Doing `onerror='return false;'` or even changing `src` immediately after the tag does not prevent console error: http://jsfiddle.net/epcB7/ – Konrad Dzwinel Jan 15 '13 at 14:56
  • Good point, I'm thinking before the page has loaded - so in the instead, – Alex KeySmith Jan 15 '13 at 14:58
  • In the `` when `` with ``s is not loaded yet you can't really do anything. Switching `src` right after the `` is the fastest you can get (and that's what I did in the jsfiddle). – Konrad Dzwinel Jan 15 '13 at 15:01
  • I was thinking perhaps in the document.ready(), but it looks as though that's too late - as the images *may* of started to download already: http://jsfiddle.net/AYmsq/5/ But perhaps someone with some uber javascript event skills knows a better event to use (I couldn't find any). – Alex KeySmith Jan 15 '13 at 15:23
  • I wouldn't recommend my technique (thanks Konrad for the feedback), but worthwhile if there is a better event to hook into. – Alex KeySmith Jan 15 '13 at 15:25
  • That's definitely a possibility, although a bit more work than I was hoping. – Paul D. Waite Jan 15 '13 at 16:37
  • I still see the error logged with @KonradDzwinel's jsfiddle in Chrome 76. – Trevor Robinson Sep 06 '19 at 14:17
-9

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

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); }

Afroman Makgalemela
  • 690
  • 2
  • 8
  • 21
  • 5
    I'm not logging exceptions. Chrome's Developer Tools console is logging missing images, on its own. The first sentence of my question says that. – Paul D. Waite Jan 23 '13 at 13:22