VS Code’s Integrated Browser: Faster Web Development Without Leaving the Editor

Added: 2026-05-13

[00:00:00]Today, let's talk about the integrated browser in VS Code. So, if you're a web developer, you're constantly going back and forth with your browser as you're making UI changes to make sure everything looks right. Well, now with integrated browser, you can stay entirely within VS Code without having to leave, and you can do all of your live edits there. So, let's jump right in, and I'm going to show you how you can get started using it.

[00:00:21]Okay, so first up, let's open the integrated browser. We can do that a few different ways. The first is by typing control shift P.

[00:00:30]You can find browser open integrated browser.

[00:00:34]And then from here, you can navigate to the URL of what you want to see in the browser window. So, for me, I have this running at localhost 3000, so we're going to put this in the address bar.

[00:00:47]And then I'm able to directly see the website without leaving VS Code.

[00:00:52]Another way to do this is when you're using an agent. If you have it do any UI work, it will automatically ask if you want to start the website in the integrated browser, and you can allow it to do so here.

[00:01:08]Now, when you're working on web development, let's say you want to always open your localhost links in the integrated browser, you can enable this via a setting. So, we're going to head into settings in workbench, and then under browser, we want to select open localhost links.

[00:01:27]So, when this is enabled, localhost links and all interface links from the terminal chat and other sources will be opened in the integrated browser instead of the system browser. So, now we never have to leave VS Code, we can just do all of our web development here in the editor. Now, let's say you want to open multiple browser tabs at once, you can do that by navigating to this globe icon here on the top, or you can type control alt slash.

[00:01:51]And then you can create a new integrated browser tab here. So, let's say I wanted to work on the library as well, I can navigate to localhost:3000/library.

[00:02:03]And the integrated browser works with any URL and any file URL as well.

[00:02:08]So, we can open a new browser and maybe we wanted to check out some documentation while we're working. We can head over to the code.visualstudio website all from here without having to leave.

[00:02:27]So, now let's say we want to work with our agent and reference things on the page itself or the whole page all together. We can add the browser tab to the context of the chat by clicking on this plus button here.

[00:02:40]And then we're being asked do we want to share the browser page with the agent?

[00:02:43]It'll be able to read and modify browser content. I'm going to hit allow.

[00:02:48]So, now the agent is able to see what's going on in the browser page and you can also see that in the address bar, I am sharing this with the agent and I can stop sharing from here, too, by clicking on this.

[00:03:00]So, this page isn't resizing correctly.

[00:03:02]The account name is now dropping down to a new line and I want everything to be responsive. So, I'm going to ask Copilot to make this a more responsive UI design.

[00:03:15]And we can also see while the agent is thinking, it captured a browser screenshot. So, it's able to directly reference what's going on in the browser UI itself, make changes, and then check again to make sure the task was completed.

[00:03:28]And what's also great is that we can see the UI update in real time as the agent's making changes and we can steer if needed if things are going a way we don't want them to.

[00:03:38]So, it finished the task and now you can see that the header is now more responsive and nothing is doing any weird line wrapping and we can also shrink the browser tab to kind of get a sense of what different screen sizes would look like.

[00:03:51]So, that's how you could share the entire tab with the agent as context, so it's able to do some UI design and iterate over the browser page itself without having to leave VS Code. Now, let's say we just wanted to reference a specific part of the web page, but not the whole browser tab itself. We can add specific elements of this page to a chat and then have the agent work on it. So, I think these plant cards are a little too big and you have to scroll quite a bit just to see five of them. So, I want to change them into rows. So, I'm going to click this button here, add element to chat. You can also type control shift C.

[00:04:26]And then here, I can select any of the elements on the web page. So, I'm just going to click one of these cards.

[00:04:32]And now, you can see that the element was screenshotted and added to the context along with the HTML and CSS that makes up that content as well. So, now we can give it a task saying, "Make these tiles into rows so don't have to scroll to see all of them."

[00:04:50]And then, we can go ahead and watch this UI update in real time as the agent's working.

[00:04:56]Okay, great. It finished and now, these are all rows, which is a bit more compact and cleaner. So, I'm able to see all of my plants at once.

[00:05:03]And let's say I wanted to do some work by hand and I didn't want to work with the agents.

[00:05:07]The browser tab does have developer tools that you can toggle with F12 and this is very similar to regular browser tools where you can then do some development here, find the UI elements that you want to modify, and then you can go and make as you would with regular browser development.

[00:05:24]And it also has the console, so you can see if there's any errors or issues that showed up as well. So, let's recap. We started with how to open the integrated browser along with the setting that allows you to always open the integrated browser when you click on local host links. We added the browser tab as well as UI elements directly to the context of our agent's chat, so we're able to give it more information as the agents work on our UI. and then we finished by showing the developer tools that come with the integrated browser as well if you want to do some of that UI work by hand. So if you're a web developer go get the latest version of VS Code and try out integrated browser today and as always happy coding.