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)
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>
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: