Live Preview and Debug in Visual Studio Code

Question

I am using Visual Studio Code in Mac to do web programming.

I see we could use shift+cmd+v to launch a preview and cmd+kv to launch a preview in a separate window.

But once we modify code and save it, does anyone know how to reload and update the preview (by shortcut by preference)? Additionally, is it possible to automate the updates?

Moreover, I have opened the Debug panel, once I click on the green button, it lets me Select Environment :

Does anyone know which one I should choose to debug client side HTML+JavaScript programs?

Answer 1

1.) The "Preview" you mention is for Markdown files. Its not supposed to render a proper HTML preview, that's why it doesn't work or refresh. As soon as you use it with Markdown files, it updates / refreshes as you type.

But there are a couple of HTML preview extensions in the marketplace, just search for "HTML Preview" and you should be able to find some.

2.) None of those options in your screenshot, VSCode does not ship with a client side debugger by default.

But you can install Debugger for Chrome which uses Chromes debugging protocol. Detailed instructions on how to use it are in the extensions README.