Caching Images without a Network Request with Chrome Dev Tools

I discovered something equal parts interesting and pointless playing around with the console in Chrome a while ago.

I knew you can style your console log statements with CSS like this:

console.log('%cSure. Why Not?', 'font-size:40px;font-family:Georgia;color:#f0f;background:#000;margin:1em;');

Great. Now I can replace all my console error log with this:

console.error('%c😱 Oh no.', 'font-size:50px;text-decoration:#f00 wavy underline;border:15px #f00 double;padding:1em;margin:1em;');

Not all of the CSS attributes appear to work, which is almost certainly for the best.

What did surprise me was that loading a background image works:

console.log('%c ', 'background:url(http://george.mand.is.s3.amazonaws.com/profile-smaller.jpg) no-repeat;font-size:0px;padding:500px')

Curiously, to me, this image never appears in the Network Requests tab in the Chrome Developer Tools!

A good question to consider here is should the request appear? Should we consider this a bug? It wasn't loaded by the page or into the DOM, although a script excecuting on the page could result in this request. It only gets loaded if you open the console.

Whether or not you call it a bug at this point feels like a matter of opinion. I'd be inclined to say yes, but I sort of see a case for it not being one.

However, there is an interesting side-effect that I think makes it slightly more worthy of being called a bug. If you load an image in this way (as a background image in the console) and then try to load the image into the DOM, the Network Request tab will say that the image was loaded from cache! You've effectively cached an image that you'll never be able to track down in the Network Request tab.

Does this matter?

No, probably not.

Is there any way this behavior might be useful?

I think you could rig a hacky but surprisingly assured way to know if the visitor to your page has opened the developer tools. If you have an image that you know will only get loaded in the console you could have something on the server watching for that, perhaps even communicate it back to the page via WebSockets or something. All the current methods I'm aware for doing this involve listening for window resizes.

Can this be used for anything nefarious?

Probably not. The best thing I could come up with was theoretically trying to use this behavior to game Lighthouse scores, but that's a fairly exaggerated definition of "nefarious" in my book. I'm also not even sure it would work.

None the less, this seems weird to me. I think the image should either:

1. Never be cached
2. Show up alongside the other network requests

I've opened a bug for this here, with slightly more thorough documentation, a video and an interactive example on Glitch you can play with to see the behavior yourself: https://crbug.com/1075874

It was marked as a duplicate, but I don't think it's actually related to the other bug it was merged into. C'est la vie.

Update:
A fun, somewhat-related project:
https://defaced.dev/web/the-buggiest-site-on-the-web/