VSCode Live Share View In Browser

Viewed 2907

In a VSCode Live Share session how can each of the participants view the HTML file in a browser or preview mode?

The "View In Browser" extensions I have tried do not work for the remote users in "Live Share" mode. This seems to be a critical missing feature in Visual Studio Code "Live Share".

1 Answers

It depends what you're trying to achieve. If you're writing plain HTML & CSS you can try this extension out: https://marketplace.visualstudio.com/items?itemName=hdg.live-html-previewer

It opens a preview of the HTML document right inside of VS Code.

But if you're viewing your website through a browser you'll have to use a tool like ngrok (which is a CLI tool). This will create a publicly accessible URL for you that you can share with the people you're working with. This only works if you're already serving your website which you can use the "View in Browser" extensions you've used as long as they actually host it on your localhost.

For example a lot of extensions will open up a browser tab at localhost:3000. Make sure that when you run ngrok you set the port to be the same.

This will let you and the people you're collaborating with see the same preview of the website.

There's also a VS Code extension for ngrok too that you can try out: https://marketplace.visualstudio.com/items?itemName=philnash.ngrok-for-vscode

Related