Object 'unavailable' in Firefox console

user_5707011 0
Viewed 4728

I have a few divs with class='class_name', and also have declared

var A = document.getElementsByClassName('class_name');
console.log(A[0]);

The Chrome console shows: 

<div class="class_name"> div 1 </div>

The Firefox console shows: 

<unavailable>

What's the issue or what otherwise is the possible cause?

getelementsbyclassname firefox html javascript
2 Answers

There are currently four solutions :

  1. Use console.log(JSON.stringify(variable, null, 4)) in place of console.info(variable). This has the additional advantage of catching errors caused by any type of memory management bugs, but it may cause a cyclic redundancy on actual elements when interpolating parent/child elements. Original solution by me.

  2. Use Firefox Web Console (control+shift+K, or Tools->Web Developer->Web Console) instead of the standard Firefox Browser Console (control+shift+J, or Tools->Web Developer->Browser Console). Thanks to Panos Astithas for providing this info!

  3. Disable e10s in FF config. Goto about:config as an address within Firefox, and set browser.tabs.remote.autostart or loop.remote.autostart to false. Thanks to Janekptacijarabaci for providing this info!

  4. Revert your FireFox Quantum version. I uninstalled Firefox 57 and 59 ("Firefox Quantum") and then installed Firefox version 56.0.2. This fixed the problem for me. Get it here: https://ftp.mozilla.org/pub/firefox/releases/56.0.2/ Original solution by me.

Firefox Development Ticket: https://bugzilla.mozilla.org/show_bug.cgi?id=1136995

UPDATE : Problem persists with Firefox v. 59.0.2, and v. 59.0.3.

user_24305490

Two possible workarounds:

1) Use the "Web-Console".
The "Web-Console" (CtrlShiftK instead of the "Browser-Console" CtrlShiftJ) shows the expected output.

2) Disable "e10s" multiprocessor support:

- about:config
- browser.tabs.remote.autostart = False

The Browser-Console will show the expected output if e10s is disabled.

Recap (02.01.2018):

The problem still persists in FF 64.0:
in general, objects will be shown as "unavailable" in the Browser-Console.

To reproduce (e10s enabled):

<html><head>
    <script type="text/javascript">
        console.log( 'test' );
        console.log( 123 );
        console.log( [ 1, 2, 3 ] );
        console.log( { x: 'x' } );
        console.log( document.getElementById('myDiv') );
        window.onload = function() {
            console.log( document.getElementById('myDiv') );
        };
    </script>
</head><body>
    <div id="myDiv"></div>
</body></html>

Output in Browser-Console (wrong output):

test
123
<unavailable>
<unavailable>
null
<unavailable>

Output in Web-Console (as expected):

test
123
Array(3) [ 1, 2, 3 ]
Object { x: "x" }
null
<div id="myDiv">

See also: https://bugzilla.mozilla.org/show_bug.cgi?id=1136995

user_75564570
Related