I can’t figure out what the problem is .__.
Liveserver extension does not react on html/css changes
This line in html is present `
<meta charset="UTF-8">
Here is my settings (cant post image):
{
"files.autoSave": "afterDelay",
"liveServer.settings.AdvanceCustomBrowserCmdLine": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
"liveServer.settings.useWebExt": true,
"liveServer.settings.fullReload": true,
"liveServer.settings.ChromeDebuggingAttachment": false,
"liveServer.settings.wait": 3,
"liveServer.settings.CustomBrowser": "chrome",
}
here is markup:
<!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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
test
</body>
</html>
Updated question shows complete HTML example that should work with default preferences. Presumably the problem lies in the
"liveServer.settings.useWebExt": true,
preference: if the browser you are starting does not have installed required Live Server - Web Extension and if your preferences do not adhere to Setup Documentation, then reloads will not be triggered according docs.
Frankly, I was not able to set it up to work with web extension so I've either missed some detail there or it is a bug probably.
Plus, Preferences documentation tells that Web Extension approach should even work with head- and body-less documents.
liveServer.settings.useWebExt: : If it is true, Live Reload will be fully controled by the Live Server Web Extension. And also, it does not matter if your HTML have <body> tag or not, Live Reload will work for every file. :smile:
Default is false
Original question included just first the HTML example (and I've missed aforementioned documentation part) so it seemed that problem might be that uch empty file does not work with the Live Server (ritwickdey.LiveServer) extension's "Live Reload" feature, and it even warns you about that in a notification bubble:
Live Reload is not possible without a head or body tag.
I understand, don't show again
So use more complete HTML skeleton with those optional <head> and <body> tags if you want to see it live-reloaded upon save with this extension.
Related
Im developing my first vscode extension. trying to create webview and open a webpage inside vscode editor.
Case 1 :
Im using iframe with sandbox attributes. when i tried loading http site which runs locally, i can see js content not getting loaded in webview.
const panel = vscode.window.createWebviewPanel(
'Editor',
'Editor',
vscode.ViewColumn.One,
{
enableScripts: true
}
);
panel.webview.html = getWebviewContent();
function getWebviewContent() {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<iframe src="http://localhost:8988" sandbox="allow-scripts" width="100%" height="400px"></iframe>
</body>
</html>`;
}
Case 2 :
I also tried opening https site, https://cssgradient.io/. In that site also js content is not getting loaded.
Note : No error logs in console.
Can you please let me know if im missing something?
If you can check on the console logs (by using the command: Open Webview Developer Tools), you may can see some security errors as follows.
Refused to frame 'http://127.0.0.1:3000/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors *
Refused to display document because display forbidden by X-Frame-Options.
Therefore you need to change specific Content Security Policies in-order to load your domain in an iframe.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-src
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors
In my case, it works after update frame-src CSP policy.
I've noticed while I deploy my flutter web project with nginx, after doing a "flutter build web" that if I don't delete the cache the old files are still in my chrome browser. Is there a way to force a refresh for users automatically if I deploy updates?
Every browser does caching and is completely normal when you don't immediately see the changes on the client browser. It does take some time for the browser to realize the code has been changed on the server and needs to update its local cache. And is completely depends on the client browser settings and client's connection speed.
But if your situations demand the client to have an updated version of the website in no time, there is a workaround.
The main.dart.js file is something like this below
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Flutter App</title>
</head>
<body>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
In order to force browsers to reload the app each time we want that, add a unique parameter to the main.dart.js script-src (for example a version, though it can be anything, even just a random number after ?). The new index.html will look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Flutter App</title>
</head>
<body>
<script src="main.dart.js?version=1" type="application/javascript"></script>
</body>
</html>
Cons:
You have to manually add the incremented version number every time you want to deploy. Maybe you can write a script for doing that.
It does still take time if the client has slow internet connection. The problem arises when browsers like Chrome show Lite(cached) version of the website untill internet connection is fast enough.
Previous versions still persist to live on the client's browser till timeout
For testing purposes, I have a simple html file that contains two lines of Javascript. I'm using Visual Studio Code (version 1.29.0) with the Live Server extension (version 5.1.1). With the html file loaded in the browser via Live Server, whenever the html file is saved, the browser refreshes (producing a random number in the console). After roughly 1 second, the browser will refresh again (producing a different random number in the console). It does this every time I save the file. The same issue occurs when I try it using Browser-Sync.
I've tried this with Chrome, Firefox, Opera and Edge. They all exhibit the same behavior.
I've been using Visual Studio Code for several months and this wasn't happening until recently that I can remember. I've toggled all of the settings in VSCode that I think might be relevant to the problem, but can't seem to find the issue.
Any ideas as to what is making the browsers refresh twice?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Javascript Sandbox</title>
</head>
<script>
var a = Math.floor(Math.random() * 10);
console.log(a);
</script>
<body>
<h1>Javascript Sandbox</h1>
</body>
</html>
I figured it out. I use Windows 10. The problem has to do with OneDrive. My html file is stored in a folder within my OneDrive folder. I have that folder set to "Always keep on this device", which means it's stored as a local copy. However, when I copy the file onto my Desktop and run it from there, the browser only refreshes once.
As of today, whenever I open a work item from the Visual Studio Team Services Board view, an index. html file gets downloaded, which has nothing to do with the work item I'm trying to open.
The contents of that file is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="scripts/VSS.SDK.min.js"></script>
</head>
<body>
<script type="text/javascript">
// Initialize framework
VSS.init({
explicitNotifyLoaded: true,
usePlatformScripts: true,
configureModuleLoader: true
});
// Load main entry point for extension
VSS.require(["scripts/app"], function () {
// Loading succeeded
VSS.notifyLoadSucceeded();
});
</script>
</body>
</html>
This is happening only for a few work items, but could not identify what is different for those files.
I have looked what VSS.SDK.min.js is, and it appears to be a Visual Studio Teams Service Web Extension SDK, but I have no I idea why my browser would try to download that.
This behavior reproduces in the following browsers: Chrome, Mozilla, Edge and Internet Explorer.
I'd appreciate an advice as to how to stop this from happening, but still not block downloads from other sources.
I have saved the source of sample AMP video http://amp.azure.net/libs/amp/latest/samples/dynamic_setsource.html locally and trying to play video. It works in IE and Edge but not in chrome. if i host this file it works.
Can you please help me understand what is wrong here?
You can try running script in IE an Chrome to see the difference.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Skill Cloud</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://amp.azure.net/libs/amp/1.7.1/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="http://amp.azure.net/libs/amp/1.7.1/azuremediaplayer.min.js"></script>
</head>
<body>
<h1>Skill Cloud</h1>
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video>
<script>
var myOptions = {
autoplay: true,
controls: true,
width: "100%",
height: "auto",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" }, ]);
</script>
<footer>
<br />
<p>© Microsoft Corporation 2016</p>
</footer>
</body>
</html>
Thanks
When you run the code locally, Chrome opens your index.html with the file:// protocol. Due to Chrome's security policy local resources aren't allowed to be loaded and that's what's preventing playback. (If you check out your JavaScript console, I bet you'll see a similar error.)
To workaround this, you can use an IDE like Visual Studio or WebMatrix that will automatically set up a local web server for you so you can access your page with http://localhost:8000 or whichever port you prefer.
If you don't want to use VS or WebMatrix, you could also use Python's Simple HTTP server. Hope this helps and happy coding :)