Hello @Paula Henderson,

Thank you for taking time to post this issue in Microsoft Q&A forum.

As Visual Studio(VS IDE) and Visual Studio Code(VS Code) are two different products, their extensions are usually different. May I firstly confirm, if you are using this extension: Live Preview? If so, it’s an extension for VS Code, not for VS IDE.

If you are using VS Code, the preview option should be there when you right-click one of the web pages. For example, I tested with a single .html file, see following screenshot:

If you are using VS IDE, then maybe you mean the integrated Web Live Preview feature? If so, you may need to use it in ASP .NET Web applications. You can right-click one of the web pages, select "View in Browser" or "Browse With…"(choose the Internal Web Browser or other web browsers, click Browse button) to live preview this web page.  

Don't forget to enable web live preview feature and restart VS(Tools > Options > Web Forms Designer > General >Web Forms designer (requires restart) > Web Live Preview).

For example, tested with an ASP .NET Web application(.NET Framework, Web Forms):

Above is for VS 2022, if you are using VS 2019, you should follow the guidance here to enable it:

Web Live Preview (Preview)

If you still fail to see the corresponding options, please kindly share us some screenshots to confirm the issue and check further.

Please don’t hesitate to contact us.

Sincerely,

Tianyu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Try installing other version of live preview which is six months or older. It worked for me.

Sadly the preview function has been on the fritz for about a year now. It started out with markdown, extended into HTML and now is affecting everything including Live Server. A whole bunch of GH issues have been closed without a resolution and I have no idea why. I've given up and just side-run a live version. Sorry I can't be of more help, maybe someone else can help us both!

The Dev Tools Pane looks like this because that is Visual Studio Codes developer tool pane. You are seeing all of the elements and scripts that Visual Studio Code uses plus your document. You will get the same results if you open the developer tools in Visual Studio Code via the command palette. This isn't something specific to this extension.

This answer provides some insight on why this is, but basically it's because Visual Studio Code is built like a desktop application but with web-based (like?) technologies such as HTML and Javascript.

If you are looking for specific elements in your document, I recommend you use the element picker icon in the top left of the dev tools to inspect it, which will automatically navigate the HTML code in the developer pane to the element you wish to inspect. Or, open the file in a browser separately as you have.

There's some chatter on Github about it, but nothing to solve it. Try uninstalling/reinstalling it to see if that does anything.

Yes, it only shows the HTML preview without CSS. You have to use "Live Server" extension for that.

Download that from here: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

GitHub Source: https://github.com/ritwickdey/vscode-live-server-plus-plus

Preview:

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.

Did you got a solution??

Try de-selecting the “No Browser” option. Is liveServer.settings.AdvanceCustomBrowserCmdLine set to false? Does it work with your system’s default browser if you set “Custom browser” to null? Anyway, there are other extensions you can try. “Five Server” is a fork of Live Server, and “Live Previe…

I think I found my solution - looks like the codeswing extension ( https://aka.ms/codeswing ) supports live preview, even in vscode.dev . Awesome!