0

I am new to programming, and just started to learn JavaScript. I use VScode and found LiveServer Preview is very useful as I can see the changes I made straight away. However, I only can see Html, Css even other simple JS input (as long as they are not pop ups), but not Alert and Prompt in JavaScript - for example, simple alert message window. If I open the same html page alone as a separate page not within VScode, then I can see the javascript changes.

Would be great if someone can help and hope the screenshots helps.

Thank you so much.

the extension in VSCode open it outside VSCode - can see the alert message

After researched on this side, I uninstalled and reinstalled LiveServer Preview, I also closed and reopened VSCode and expect to see the JS changes. But still only can see the HTML part.

Sophie
  • 1
  • 1
  • Have you tried enabling auto-save? Refer to [this](https://stackoverflow.com/questions/70249584/live-server-not-refreshing-browser). If that doesn't work, try the other suggestions from that page – NerdyGamer Jul 31 '23 at 15:19
  • HI, yes, already switched on autosave. – Sophie Jul 31 '23 at 15:23
  • Could you share your `settings.json` file so that I can try to find the problem? To do so, press F1 or Control + Shift + P, type "settings.json", then press enter. – NerdyGamer Jul 31 '23 at 15:30
  • Sorry, I tried both F1 and Control + Shift + P on my HTML page and nothing happened. I am using a Mac. Thank you very much, – Sophie Jul 31 '23 at 16:02
  • I also just released that I can see Document.Write changes on the live preview, just not Alert and Prompt ones seemed disabled. Also added this to the main post. – Sophie Jul 31 '23 at 16:03
  • The keybinds I shared above are for VSCode, not for the LiveServer. You can access your `settings.json` file by going to `View > Command Palette`, typing "settings.json" and pressing enter. Sorry for the confusion. – NerdyGamer Jul 31 '23 at 16:23
  • Also could you check the console on the LiveServer for any errors when using `alert()` or `prompt()`. It's very possible that they are not compatible with this extension, but I just want to be sure. – NerdyGamer Jul 31 '23 at 16:32
  • @starball - sorry I don't know how to send the link as I am new to programming hope this is ok - Thank you very much: Name: Live Server Preview Id: negokaz.live-server-preview Description: Preview your HTML file with localhost server live-reloading enabled Version: 0.1.4 Publisher: negokaz VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=negokaz.live-server-preview – Sophie Aug 01 '23 at 09:29
  • @NerdyGamer - thank you so much for your patience. I did 'Control + Shift + P' in VSCode, and searched Setting Json but found no result. However, there are options called "user Json" and I can see this: "{ "prettier.insertPragma": true, "workbench.iconTheme": "material-icon-theme", "files.autoSave": "afterDelay" }" – Sophie Aug 01 '23 at 09:59
  • @NerdyGamer here is the extension I use. Guess my point is that other JS effects show, just not alert and prompt (so far). Name: Live Server Preview Id: negokaz.live-server-preview Description: Preview your HTML file with localhost server live-reloading enabled Version: 0.1.4 Publisher: negokaz VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=negokaz.live-server-preview – Sophie Aug 01 '23 at 10:02
  • you can raise this as an issue ticket. https://github.com/negokaz/vscode-live-server-preview/issues/new. if you do, please link us to it. – starball Aug 01 '23 at 16:58
  • I'm guessing that the issue is with the extension. You could try raising an issue as @starball suggested, however, that project seems to have been abandoned so you probably won't get a response. I would recommend using this extension instead: [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer). I use it and I find it very easy to use (I haven't had any issues with it). The live updating isn't as precise, but it's still pretty good, so I would recommend trying it out – NerdyGamer Aug 01 '23 at 18:01
  • @NerdyGamer - Thank you so much for your help. Yes, I did download Live server but I cannot open it inside my VScode. It always opens a new web page. Can you please tell me how to view it inside VSCode? Thank you again. – Sophie Aug 02 '23 at 15:53
  • That extension cannot be opened in VSCode to my knowledge. However, you could use a [split screen view.](https://support.apple.com/guide/mac-help/use-apps-in-split-view-mchl4fbe2921/mac) Personally, I just switch between VSCode and my browser using Alt + Tab since I want to have a standard view of whatever I'm developing, since users will most likely not be using a split screen view. If you have any more questions or concerns, please let me know. – NerdyGamer Aug 03 '23 at 00:19

0 Answers0