DEV Community

Cover image for VSCode - Hidden Browser Inside
Camilo Martinez
Camilo Martinez

Posted on • Updated on

VSCode - Hidden Browser Inside

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


Enter fullscreen mode Exit fullscreen mode

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.

simple-browser

Press the return key and write http://localhost:3000 or the URL you want to open and press the return key again.

localhost

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.

new-tab


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"
            ]
        }
    ]
}


Enter fullscreen mode Exit fullscreen mode

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"
  },
]


Enter fullscreen mode Exit fullscreen mode

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
🖖

beer

Sources

Top comments (4)

Collapse
 
xkeshav profile image
Keshav Mohta

This is awesome.
when Tasks: Open User Tasks -> select "Others" option.

Collapse
 
greggcbs profile image
GreggHume

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.

Collapse
 
equiman profile image
Camilo Martinez

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.

Collapse
 
siwalikm profile image
Siwalik Mukherjee

@greggcbs prepend URL with http://