This is more a matter of curiosity than a serious problem but in the MDN documentation for console.log about string substitutions it says:
%o or %O Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.
Is there any difference between %o and %O? I haven't noticed anything obvious in chrome. If not why do both exist? Just some old compatibility thing or is there a reason we have both?
There are some slight differences between the two. From the console standard:
If specifier is %o, optionally let converted be current with optimally useful formatting applied.
If specifier is %O, optionally let converted be current with generic JavaScript object formatting applied.
The standard then describes the difference between optimally useful formatting and generic JavaScript object formatting here:
An object with generic JavaScript object formatting is a potentially expandable representation of a generic JavaScript object. An object with optimally useful formatting is an implementation-specific, potentially-interactive representation of an object judged to be maximally useful and informative
One way to think about the difference between the two is %O is like using console.dir() as this will log the object's generic JavaScript object formatting, showing you specific properties of the object, whereas using %o is like using console.dirxml() or regular console.log() as this will log the object in its optimally useful formatting, which can be a developer-friendly/simplified representation of the object. As a result, %o will usually give you what you're after, but %O can give you further details such as the object's properties.
You can see the difference in certain objects, below are some of these objects:
const regex = /abc/;
console.group("Regex object");
console.log("optimally useful formatting (%%o): %o", regex);
console.log("generic JavaScript object formatting (%%O): %O", regex);
console.groupEnd();
const fn = () => "foo";
console.group("Function object");
console.log("optimally useful formatting (%%o): %o", fn);
console.log("generic JavaScript object formatting (%%O): %O", fn);
console.groupEnd();
const ul = document.querySelector("ul");
console.group("DOM node");
console.log("optimally useful formatting (%%o): %o", ul);
console.log("generic JavaScript object formatting (%%O): %O", ul);
console.groupEnd();<ul><li>1</li><li>2</li><li>3</li></ul>Output in Chrome console:
