25

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

invinciblejai
  • 1,103
  • 1
  • 8
  • 15
  • Please clarify what you are asking here. As it stands, your current question is difficult to parse. – ifconfig Sep 22 '17 at 04:17
  • @ifconfig does it give some clarity now? – invinciblejai Sep 22 '17 at 04:22
  • previewHTML takes html content to render , i want to load some url ( https://developers.redhat.com/ ) i can use iframe in previewHTML but is there a way load/open browser within VSCode? – invinciblejai Sep 22 '17 at 04:30
  • *There you go!* That is what you should have asked in your question the first time. Are you writing your extension in TypeScript or JavaScript? – ifconfig Sep 22 '17 at 04:37
  • @ifconfig i tried to rephrase my question , sorry about that. Am writing in typescript – invinciblejai Sep 22 '17 at 04:45
  • Possible duplicate of [How to open HTML file in vscode like in browser?](https://stackoverflow.com/questions/47301694/how-to-open-html-file-in-vscode-like-in-browser) – Matt Bierner Oct 31 '18 at 03:49

3 Answers3

10

It's possible now with Microsoft's extension 'Live Preview'. Open command palette (F1) and search for "Simple Browser: Show".

This is how it looks:

vscode browser tab

LukasKroess
  • 125
  • 2
  • 13
Eray Erdin
  • 2,633
  • 1
  • 32
  • 66
  • 1
    That is an extension. – Arlen Beiler Aug 25 '22 at 16:10
  • If it is an extension, I can't find it and I don't recall installing it. Works in my VS Code (and does just what it's supposed to) – Tatiana Racheva Aug 28 '22 at 01:50
  • I spoke too soon. It has many flaws. For example, you can only open one tab of this Simple Browser at a time, and it doesn't let you do simple things like copy-and-paste. The utility of this extension is significantly less than what I was expecting. – Tatiana Racheva Aug 28 '22 at 02:08
  • Can it show an inspector? – Philippe Fanaro Dec 10 '22 at 18:34
  • 1
    @PhilippeFanaro | No, it can't. – Eray Erdin Dec 12 '22 at 12:17
  • Command palette is "Cmd + Shift + P" on macos. – Fred Rocha Mar 09 '23 at 10:32
  • @PhilippeFanaro Yes. You can use the VSCode developer tools, under 'Help' (@Eray Erdin) – LukasKroess Apr 27 '23 at 07:08
  • @LukasKroess | Did you verify that that developer console attaches itself to the simple browser or the whole VSCode? – Eray Erdin Jun 18 '23 at 20:19
  • 1
    @ErayErdin The devtools attach themselves to the whole VSCode; The LivePreview window is a iframe element inside the vscode dom and as such you can see the LivePreview dom (be sure to enable shadowdom) aswell as use the console (you have to toggle the active console window in the dropdown on the top left corner) EDIT: You actually don't need to have shadowdom enabled, I just checked – LukasKroess Jun 19 '23 at 06:10
5

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

Mando
  • 11,414
  • 17
  • 86
  • 167
  • 7
    That is a only a "hint as to how to build it", not a "here is a plugin that does it" or a "there is no such tool/feature available now" answer. – smallscript Nov 17 '20 at 20:02
  • 3
    Is it possible to open a 3rd party URL like `https://google.com` using webview? The documentation only talks of rendering locally saved HTML. – secretshardul Jan 10 '21 at 08:06
  • 1
    @secretshardul Yes you can, you will have to use an ` – Shady Jan 20 '22 at 12:27
3

Microsoft has an extension in development, Live Preview. I use it to view html codecov reports inside of VSCODE and it at least works for that.

You just search for it in extensions and add it to VSCODE

Michael Oliver
  • 161
  • 1
  • 4