3

I use the console object in javascript for debugging, and would like to overwrite it as to make use of such functionality in mobile browsers.

However , I have trouble understanding the following MDN documentation

The Window.console read-only property returns a reference to the Console object, which provides methods for logging information to the browser's console.

(https://developer.mozilla.org/en-US/docs/Web/API/Window/console)

In particular:

  1. I cannot make head's or tails' of what actually is the Window interface, but it seems to be different to the global window property
  2. A test showed (in current Chromium and Firefox) that window.console can indeed be overwritten event though it seems to contradict what I read in the documentation. (An example of such an overwriting provides this answer; even though a comment objects with

You can't use window.console = { ... } because window.console is a read-only property ! – Luillyfe Feb 23 at 21:28

What is it with the read-only-ness of Window.console or window.console ?

humanityANDpeace
  • 4,350
  • 3
  • 37
  • 63
  • 2
    For anyone following the MDN link above and not seeing "read-only": It was there when humanityANDpeace posted the question. I updated the MDN page, see my answer below for why. – T.J. Crowder Dec 07 '18 at 10:11

2 Answers2

4

It's not read-only. MDN is an excellent resource, but it's edited by the community and sometimes errors or unsourced claims sneak in.

  1. I cannot make head's or tails' of what actually is the Window interface, but it seems to be different to the global window property

The interface Window defines the properties and methods available on the window object in browsers, which is available via the default window global variable. You can think of it as this: var window = new Window() though of course that's not literally true .

  1. ... What is it with the read-only-ness of Window.console or window.console ?

It's not read-only.

  • Theory: The Window interface doesn't mention console at all, but the console spec says that it's a namespace object exposed on window. The WebIDL specification says that namespace objects are, by default, writable, configurable, and non-enumerable. (Thank you sideshowbarker for pointing that out!)

  • Practice: It's writable on every browser I've tried it on (Chrome, Firefox, Safari, IE9, IE11, Edge). In all of them except IE11, console is an "own" property on the object window refers to, and assigning to it works (in both loose and strict modes). (IE11 is the odd duck: console is not an own property of window when devtools are closed, but its type is "object" and if you log String(console) it the result is "[object Console]". But when devtools is open, it's an own property of window and not read-only.)

I've updated the MDN page, removing the "read-only" part of that sentence.

I'm not saying that replacing console with something else is a good idea. :-) But note that SO's own Stack Snippets do exactly that if you have the "Show console" option checked (as it is by default).

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • thanks, I appreciate the information (including having done a test in 6 useragents). I will have to read more into the provided specs to find out the real meaning of the **Window interface** in the context of properties. So just to be certain you suggest that the info in the MDN about Window.console being a property is incorrect, or simply that it is read-only? – humanityANDpeace Dec 07 '18 at 10:01
  • @humanityANDpeace - I've updated the answer to try to help a bit with `window` vs. `Window`. I've also fixed the MDN page. I would expect that most (or all) of the rest of it is fine, someone just seems to have made an assumption that doesn't appear to be true when writing/editing it. – T.J. Crowder Dec 07 '18 at 10:11
  • 1
    The Console spec defines `console` as a property that identifies a WebIDL [namespace object](https://heycam.github.io/webidl/#dfn-namespace-object), and I see that the WebIDL spec says *“The property has the attributes { [[Writable]]: true, [[Enumerable]]: false, [[Configurable]]: true }.”* — so I *think* that means that `console` is formally/normatively defined as writable. – sideshowbarker Dec 07 '18 at 11:28
  • 1
    @sideshowbarker - **Thank you**. I wondered if there might be a definition of that in regard to namespace objects. I've updated the answer to fold that in, but if you prefer to post your own answer instead, let me know and I'll edit to just refer to yours. Nice one! – T.J. Crowder Dec 07 '18 at 11:51
2

Window is an interface written in JS engine's native code (like C++ in case of V8). It's the prototype of window global variable, which exposes this interface to JavaScript.

I think this is the main source of confusion - you cannot overwrite the Window.console due to the fact that you cannot really interact with the Window through JavaScript. You can however do this with window.console, since this object is exposed to JavaScript (and is in fact the 'root' object for browser environment).

rufus1530
  • 765
  • 4
  • 19