I don't know why my script is not working

Question

i don't understand why my console always adding extra code that i didn't added

so wrote this

<!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>
    
</body>
</html>

but if i look sources in the chrome browser it's always be like

<!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>
    
<!-- Code injected by live-server -->
<script>
    // <![CDATA[  <-- For SVG support
    if ('WebSocket' in window) {
        (function () {
            function refreshCSS() {
                var sheets = [].slice.call(document.getElementsByTagName("link"));
                var head = document.getElementsByTagName("head")[0];
                for (var i = 0; i < sheets.length; ++i) {
                    var elem = sheets[i];
                    var parent = elem.parentElement || head;
                    parent.removeChild(elem);
                    var rel = elem.rel;
                    if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
                        var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
                        elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
                    }
                    parent.appendChild(elem);
                }
            }
            var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
            var address = protocol + window.location.host + window.location.pathname + '/ws';
            var socket = new WebSocket(address);
            socket.onmessage = function (msg) {
                if (msg.data == 'reload') window.location.reload();
                else if (msg.data == 'refreshcss') refreshCSS();
            };
            if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
                console.log('Live reload enabled.');
                sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
            }
        })();
    }
    else {
        console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
    }
    // ]]>
</script>
</body>
</html>

it happened to me before few hours ago. few days before it was just fine I really need to fix this issue and wanted to know why.

`` - the live server on vscode is injecting that code - as stated, quite clearly, in the comment. This code won't be present in a production build, of course. — Jaromanda X, Oct 19 '22 at 05:28
Have a look at [this](https://stackoverflow.com/questions/68973113/why-is-live-server-injecting-these-javascript-codes) — Samsil Arefeen, Oct 19 '22 at 05:30
why don't you read what is added, the first line tells it all — rioV8, Oct 19 '22 at 09:40

score 0 · Answer 1 · answered Oct 19 '22 at 05:56

0

It's because you are using VS code's live server for viewing in the browser.

Whenever you use live sever, your all edits are updated to DOM without a manual refresh and this is one of the main features of VScode's live server. VS code handles this by having a separate WebSocket connection from the rendered HTML page through which it can change the dom on editing in the file.

So whenever you render an HTML page, VS code adds some extra javascript code ( related to WebSocket and reloading the DOM or CSS ) through which it can handle the things I mentioned above.

Note: This code will not harm your actual code in any way. And you can just go to the file's path, open with browser if you still want to avoid this.

Hope this explanation helps you!

answered Oct 19 '22 at 05:56

sachin

1,075
1
7
11

but there are always message showed up like "Live reload enabled." how can i solve this? – 신민준 Oct 19 '22 at 06:21
That's not an issue. Every time you edit the code, your web page will be reloaded. that's what it says. – sachin Oct 19 '22 at 07:11
@신민준 - not everything in the console is an error to be solved - but, since you asked *how can i solve this?* the answer is, stop using VS code live server – Jaromanda X Oct 19 '22 at 07:36

I don't know why my script is not working

1 Answers1