VSCode - Hidden Browser Inside
Tags: vscode, productivity, webdev, programming
Published: 2023-04-03 02:27:32

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

```bash
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](https://marketplace.visualstudio.com/items?itemName=WallabyJs.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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxu38b4vfu2dmlr8khzk.png)

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

![localhost](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s7btd3kyfbtbb4nmyops.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjcti91ikk1gfy924yv6.png)

---

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.

```json
# 📄 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](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) (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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkgsx4aw6qn9i9ax6as9.png)](https://github.com/sponsors/deinsoftware?frequency=one-time&sponsor=equiman)

> **Sources**
> - [VS Code task to open VS Code's simple browser with a url](hhttps://stackoverflow.com/questions/68486893/vs-code-task-to-open-vs-codes-simple-browser-with-a-url)