Adir-SL/Visual-Console

Unfortunately, get 'Uncaught TypeError'

Closed this issue · 4 comments

KoljaL commented

Hi Adir,

great idea to make a console output for mobile debugging :-)

I have a static site, just HTML, CSS and some simple JS to test the Visual-Console,
but i always get an Uncaught TypeError.
MacOS & FF & Safari tested.

Maybe you can help me?

There is no difference, where i put the <script src="..."></script>.
I tried <head> , <body> before and after the content.

The vconsole will be shown on the page and their console works.

first error:

But when i put an console.log('foo') inside the source code i get this:

Uncaught TypeError: document.getElementById(...) is null
...
[vconsole.js:195:18](http://localhost:9999/vconsole.js)

I got the vconsole.jsfile locally and "maybe" new formatted, so these are the lines:

    } else {
        document.getElementById("vconsole_" + window.checkTime).getElementsByTagName("details")[document.getElementById("vconsole_" + window.checkTime).getElementsByTagName("details").length - 1].innerHTML += y;
        setTimeout(function() {
            checkForChars();
        }, 50);
    }

And of cause, no output in the console window on the page.

second error:

If i try to toggleConsole() i got this error:

Uncaught TypeError: document.getElementsByClassName(...)[1] is undefined
...
[vconsole.js:281:22](http://localhost:9999/vconsole.js)

this are these lines:

function toggleConsole() {
    if (window.hideConsole != true) {
        if (document.getElementsByClassName('tabSelect')[1].innerText == "Elements") {

I would love to get it running

Kolja

Adir-SL commented

Hello,
I'm not sure exactly what's the problem,
it might have something to do with your currently selected object.
Try running:
console.log(vcon.outerHTML)
in order to see your selected object (at least, according to the Visual Console).

By the way,
in my testings, it is best to put the <script> tag
in the end of the <body> tag in your document.
like so:

<script src="vconsole.js"></script>
</body>
KoljaL commented

Hi and thanks for your reply.

Either i did not understand, or there is a ghost in my script:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://adir-sl.github.io/Visual-Console/vconsole.min.js"></script>
</body>
<script>
    console.log(vcon.outerHTML)
</script>

</html>
Uncaught ReferenceError: vcon is not defined
    <anonymous> http://localhost:1234/test.html:15

Tried with the liveServer from VSC and the instant server from PHP

Adir-SL commented

Hello again,
I'm afraid I was misleading you, since I didn't realize your code structure.
What I think happens in your code is that the Visual Console doesn't load quick enough to execute the console.log() right after it (which I changed to 'foo' because the vcon variable is something else, never mind it - that's the part I misunderstood your problem.)
I tried delaying the console.log() and in my testings this code works, please try the same in your machine:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://adir-sl.github.io/Visual-Console/vconsole.min.js"></script>
</body>
<script>
    setTimeout(() => {
        console.log('foo');
    }, 100)
</script>

</html>
KoljaL commented

Yea, thanks a lot.
That is the solution.

Now I`m looking foreward for the first use 😃