This extension is most useful for projects where a server is not already created (e.g. not for apps using React, Angular, etc.). To work with these, feel free to run the `Simple Browser: Show` command that is already built-in with VS Code.
See the changes as you make them. By default, changes appear as you make them in the editor. You can also change this in settings to refresh the preview on save or not at all.
If you're looking for a persistent server to run, you can run a `Live Preview` task, which also logs the server traffic. This can also be launched using the `Live Preview: Start Server Logging` command. You can click on the traffic to open the file location of the file returned by the server.
The external browser preview also supports debugging via the built-in [js-debug](https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug) extension and attaching to the [Edge Devtools Extension](https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools). This allows support for features such as setting breakpoints and inspecting elements.
- Tasks do not work outside of a workspace, so a server will just launch in the background upon external preview when outside of a workspace. You can use the `Live Preview: Stop Server` command to kill the server in this case.
You can install the extension [in the marketplace here](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server). To contribute, see the [contributing page](https://github.com/microsoft/vscode-livepreview/blob/main/CONTRIBUTING.md).
**Q. What does the `"Previewing a file that is not a child of the server root. To see fully correct relative file links, please open a workspace at the project root or consider changing your server root settings for Live Preview."` message mean?**
The server is hosted from the root of the workspace that the user opens (or a subfolder of the workspace based on `livePreview.serverRoot`). Files outside of this can be previewed, but some file paths (such as a link to the root) may not go to the right place. **If you are working on a web project, it is advised that you open a workspace at the root of the project.**
In the area of the editor where the integrated terminal usually is, navigate to `Ports` and open the local addresses (usually at ports 3000 and 3001) in the browser. You can do this by using <kbd>CTRL</kbd>+<kbd>Click</kbd> on the URLs in the `Ports` menu.
**Q. Why does my external browser preview look different than the preview in the embedded browser preview?**
A. Aspects such as styling might look different based on the browser cache of your external browser or any other client-side state. Try clearing your cache and restarting your browser.
