Live preview web development
️ WARNING: this extension is still under development! ️ Show
An extension that hosts a local server for you to preview your web projects on! Note: this extension is intended 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. Table of ContentsFeaturesHTML File PreviewingPreview your HTML files quickly by clicking the preview button in the top right corner of your editor or using the context menu. Embedded PreviewA preview is available in-editor for the files hosted by the server. The simple embedded browser features the following:
Live RefreshingSee 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. Persistent Server Task with Server LoggingIf you're looking for a persistent server to run, you can run a Live Preview task, which can optionally log the server traffic. You can also click on the traffic to open the file location of the file returned by the server. External Browser PreviewingAlthough all of the images above use the embedded browser, you can also experience the same features in an external browser. You can edit the preview target in the extension settings. External Browser DebuggingThe external browser preview also supports debugging via the built-in js-debug extension and attaching to the Edge Devtools Extension. This allows support for features such as setting breakpoints and inspecting elements. Run Live Preview: Show Debug Preview in the command palette to get these debugging features. Console Output Channel (For Embedded Preview)For a simple view of the embedded preview's console messages, go to the Output tab and select Embedded Live Preview Console in the dropdown. Workspace-less PreviewingNo workspace? No problem! For a quick preview of your file, the server can also access files outside of your workspace to preview. Notes about workspace-less extension use:
Multi-root SupportThe different workspaces will be assigned specific server endpoints, allowing you to easily preview files in all of your workspaces. PrerequisitesTo use this extension, you must have Node JS v14+. Running the extensionYou can install the extension in the marketplace here. To contribute, see the contributing page. FAQQ. 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." message mean? A. Either:
Why does this happen? The server is hosted from the root of the workspace that the user opens. 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. Q. I'm trying to use Live Preview in Codespaces and the embedded preview isn't working. A. Currently, you will need to manually navigate to the links host the forwarded port content before it works In the area of the editor where the integrated terminal usually is, navigate to Ports and open the local address in the browser. You can do this by using CTRL+Click on the URL in the Ports menu. Allow the browser to perform the necessary redirects, then close the windows. Re-open the preview window and it should work now. InspirationsSpecial thanks to the following extensions for inspiring Live Preview! Issue TrackingPlease file issues against the VS Code Live Preview repository. ChangelogSee the project's changelog here. |