There are a lot of options like npm packages or VSCode extension to create a live server. For me, one of the better is using Vite as a live server
npx vite dev --port 3000
It's my favorite option because it can be used on projects that don't use vite under the hood, given us Hot Reload with a simple project with vanilla HTML, CSS, and JavaScript, and also use with debugger extensions like Console Ninja.
That's a piece of good information to have, but surely that is not what you are here, right?
Ok, I'll show you a hidden 💎 in VSCode where you can open this live server (or a page) in a new tab with a simple browser inside.
Open the command palette with ctrl+shift+p and search for Simple Browser.
Press the return key and write http://localhost:3000 or the URL you want to open and press the return key again.
It will open a new tab inside VSCode with a simple browser and you can move aside to see the code and the result at the same time.
It was good, but take a lot of steps and effort. I'll show you how to create a task and assign a shortcut to open the simple browser easily.
Start creating a .vscode folder with a tasks.json file inside the project, or if you want it to be available at profile level (no matter the project) press ctrl+shift+p (or cmd+shift+p on macOS) and run the command Tasks: Open User Tasks.
# 📄 File: /.vscode/tasks.json
-----------------------------------
{
"version": "2.0.0",
"tasks": [
{
"label": "Simple Browser",
"command": "${input:openSimpleBrowser}",
"problemMatcher": []
}
],
"inputs": [
{
"id": "openSimpleBrowser",
"type": "command",
"command": "simpleBrowser.show",
"args": [
"http://localhost:3000"
]
}
]
}
And also define the shortcut using the File > Preferences > Keyboard Shortcuts menu.
# 📄 File: keybindings.json
-----------------------------------
// Place your key bindings in this file to override the defaults
[
// Browser
{
"key": "alt+shift+b",
"command": "workbench.action.tasks.runTask",
"args": "Simple Browser"
},
]
The next time you can open the simple browser by pressing alt+shift+b.
You don't need that extension 🚫
By the way, you don't need an extension like Live Preview (or any of the many others that exist) to achieve it.
But if you prefer to have all the browser dev tools inside VSCode instead of using the Browser, then use the extension.
That’s All Folks!
Happy Coding 🖖
Sources
Top comments (4)
This is awesome.
when Tasks: Open User Tasks -> select "Others" option.
All i see is a white page. On my server I see the built in browser is calling index.html which shows how basic it is.
You can navigate the path you want, just change the URL.
It's very basic, indeed, but you can debug it without leaving the VS Code.
@greggcbs prepend URL with
http://