Why is newTabBrowser.contentDocument null?

Running the example code from the Firefox docs page about the Browser console.

https://firefox-source-docs.mozilla.org/devtools-user/browser_console/index.html

var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
newTabBrowser.addEventListener("load", function() {
 newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>";
}, true);
newTabBrowser.contentDocument.location.href = "https://mozilla.org/";

Running it gives me the following error.

Uncaught TypeError: newTabBrowser.contentDocument is null
    <anonymous> debugger eval code:5
    getEvalResult resource://devtools/server/actors/webconsole/eval-with-debugger.js:306
    evalWithDebugger resource://devtools/server/actors/webconsole/eval-with-debugger.js:218
    evaluateJS resource://devtools/server/actors/webconsole.js:953
    evaluateJSAsync resource://devtools/server/actors/webconsole.js:846
    makeInfallible resource://devtools/shared/ThreadSafeDevToolsUtils.js:103
debugger eval code:5:1
    <anonymous> debugger eval code:5

Why is the contentDocument null?

I tried running the above code. According to the docs, “It adds a listener to the currently selected tab’s load event that will eat the new page, then loads a new page.” Instead it generates an Uncaught TypeError: newTabBrowser.contentDocument is null.