Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to open a browser within VSCode just like another editor tab

For a VSCode extension i want open browser within VSCode not externally, wherein i can load some URL (https://developers.redhat.com/)

I tried looking into various options to achieve it in VScode extension, what i came across is with help of webview i.e 'vscode.previewHtml' we can pass html content which would be rendered with in VSCode editor tab, but what i have is url to load. Can pass it to iframe but i can't open it in iframe

Another option is to open it in browser but it opens external browser.

what i need is to open a browser within IDE (VSCode), experience should be similar to what we get for 'vscode.previewHtml'

or as we see in IDEs like eclipse where browser window is opened right inside IDE.

As we can see below

enter image description here

Please give inputs, suggestions

like image 713
invinciblejai Avatar asked Sep 22 '17 04:09

invinciblejai


People also ask

How do I open a browser tab in VS Code?

Using the Visual Studio Code Editor, open the desired file. Go to the toolbar on the left and select “Extensions.” Click on the search bar in the Extensions panel and write “open in browser.”

How do I open a separate window in VS Code?

The Best Answer is. On Windows and Linux, press Ctrl + K , then release the keys and press O (the letter O, not Zero). On macOS, press command + K , then O (without holding command ). This will open the active file tab in a new window/instance.

How do you change the tab in VS Code?

When using Visual Studio Code on Windows, you can use CTRL + PAGE_UP to switch to the previous tab, and CTRL + PAGE_DN to switch to the next tab. You also have the ability to switch to tabs based on their (non-zero relative) index. You can do so, by pressing and holding ALT , followed by a number (1 through 9).


2 Answers

In order to render your html you can use the WebView API: https://code.visualstudio.com/docs/extensions/webview

like image 173
Alexey Strakh Avatar answered Oct 14 '22 01:10

Alexey Strakh


It's possible now without extension. Open command palette (CTRL+P) and search for "Simple Browser: Show".

This is how it looks:

vscode browser tab

like image 22
Eray Erdin Avatar answered Oct 14 '22 00:10

Eray Erdin