Run your web application inside VS Code.
You're developing a web application, and you've got some kind of a live/hot reloading setup. Instead of switching between your editor and a browser, with Live Frame you can see your changes without leaving VS Code.
Or, perhaps, you're streaming or recording a screen cast, and you just want everything nicely in one window. Whatever your reasons, we're not here to judge.
- Install Live Frame from the VS Code Marketplace.
- Start your local development server
- Run (
Cmd+Shift+P) commandLive Frame: Open - Follow the displayed configuration instructions.
Add the following to your User or Workspace settings. Given that your app's development URL is probably project specific, Workspace settings may make more sense.
{
// Required: The website to display
"liveFrame.url": "http://localhost:3000",
// Optional: Title for the pane tab heading
"liveFrame.title": "Local Development",
// Optional: Which pane to open the frame in
"liveFrame.pane": "Beside"
}If you have a fast hot reloading setup, you can turn on VS Code's Auto Save on a short delay when you need an extra blazing feedback loop.
{
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 50,
}Because of the way Live Frame renders your site in an iframe-inside-webview, there are a couple of limitations.
If your website prevents itself being loaded in an iframe e.g. via X-Frame-Options or Content-Security-Policy, it won't work inside Live Frame.
This should not be an issue for most development setups, but if it is, try VSCode Browser Preview instead.
You can open dev tools by running (Cmd+Shift+P) the Open WebView Developer Tools command. However, the point and click element selector doesn't select element inside the iframe.
This is a known issue in VS Code.
As a workaround, you can send your keystrokes to the extension using postMessage, and we'll forward them to VS Code for you. Just add the following somewhere in your application code:
if (window.parent !== window) {
// If using TypeScript, next line should be:
// let listener = (e: KeyboardEvent) =>
let listener = (e) =>
window.parent.postMessage(
JSON.stringify({
altKey: e.altKey,
code: e.code,
ctrlKey: e.ctrlKey,
isComposing: e.isComposing,
key: e.key,
location: e.location,
metaKey: e.metaKey,
repeat: e.repeat,
shiftKey: e.shiftKey,
}),
"*"
);
if (!window.hasOwnProperty("keyhookInstalled")) {
// If using TypeScript, next line should be:
// (window as any).keyhookInstalled = true;
window.keyhookInstalled = true;
window.addEventListener("keydown", listener);
}
}If you can think of a better solution (to fix the keyboard issue, or that doesn't involve using an iframe at all), see Contributing.
All of them. Livereload, webpack, vite, servor, whatever angular people use... shouldn't matter. If yours doesn't work, double check it's not your own fault, and open an issue.
Sort of. Browser Preview embeds a headless Chrome, which is awesome, but also very resource intensive and kept crashing my VS Code. Then there are about a dozen extensions that live reload HTML in various ways, but if you're working with a web application with a build step, they're no use.
Live Frame takes a simple but lightweight route and uses a VS Code Webview pane, and inside it renders your app in a full-screen iframe. You can see the full implementation in extension.ts.
Not really. It's an embedded Electron webview with known limitations, and I'm sure many other minor differences to a full browser.
Use at your own peril during development, not for acceptance testing!
Add workaround for keyboard binding issue.
Initial release.
Pull requests are welcome! For anything that significantly grows the scope of this project or complicates its maintenance, please open an issue to discuss first.
Install dependencies with yarn, and run the project with Run > Start Debugging from within VS Code.