ritwickdey / live-server-web-extension

It makes your existing server live. This is a browser extension that helps you to live reload feature for dynamic content (PHP, Node.js, ASP.NET -- Whatever, it doesn't matter)
https://chrome.google.com/webstore/detail/live-server-web-extension/fiegdmejfepffgpnejdinekhfieaogmj/
MIT License
808 stars 342 forks source link

CSS is not updating in liveserver #29

Closed josectobar closed 5 years ago

josectobar commented 5 years ago

Live server is not working whenever I make changes in my CSS, it does for HTML but when I modify the CSS, it get this message in the console:

(index):60 Live reload enabled. (index):44 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at refreshCSS (http://127.0.0.1:8080/:44:11) at WebSocket.socket.onmessage (http://127.0.0.1:8080/:58:40) refreshCSS @ (index):44 socket.onmessage @ (index):58

This is what my code looks like:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title id="title">Tribute to Fernando Llort</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="/main.css">
</head>
<body id="main">
    <div id="img-div" class="cover">
            <div class="top-bar">
                <div class="signature">
                </div>
            </div>
        <div class="center-message">
            <h1>Tribute to Fernando Llort</h1>
        </div>
    </div>
    <div class="container">
        <div>
            orange left
        </div>
        <div>
            orange right
        </div>
        <div id="tribute-info">
            center container
        </div>
    </div>
    <footer>
        light orange footer
    </footer>
<!-- Code injected by live-server -->
<script type="text/javascript">
    // <![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];
                    head.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());
                    }
                    head.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();
            };
            console.log('Live reload enabled.');
        })();
    }
    // ]]>
</script>
</body>
</html>
josectobar commented 5 years ago

It seems to be working today, I did reboot my computer, I don't know if that did the trick.