DEV Community

Cover image for Simple Browser in VS Code: My Coding Experience just Leveled Up!πŸ™€
Nadia
Nadia

Posted on • Edited on

Simple Browser in VS Code: My Coding Experience just Leveled Up!πŸ™€

Hey there! I recently discovered something awesome, and I just had to share it with all. Some of you might say, "You just found out about this now?!" Well, as I always say, "Better late than never!"πŸ˜…

When I started my coding journey back in November 2023, I didn't even know which extensions to add to VS Code or that I could change themes. But as I've continued to learn, I keep discovering amazing features. One of them is the simple browser in VS Code. Now, for those of you who are early or fresh developers, you might be wondering what I'm talking about. Let me explain:

Are you like me, someone who, despite using 2 monitors, still struggles to find the localhost tab among endless tabs? If yes, keep reading! πŸ€“

πŸ¦Έβ€β™€οΈThe simple browser allows you to have your browser window within VS Code. Here's how to do it:

1)First, make sure your local development server is running, then copy the localhost URL of your project.

2)Next, open the command palette in VS Code by pressing Ctrl + Shift + P (or Cmd + Shift + P on macOS).

3)In the command palette, type 'Simple Browser' and hit enter. VS Code will open a simple browser within the editor.

4)Paste Your URL: Once the simple browser opens, paste the copied localhost URL into the address bar and hit enter. Your website or web application will load within VS Code.

5)Arrange for Side-by-Side View: For easy reference and testing, press Ctrl + \ (or Cmd + \ on macOS) to split the editor into two columns. Then, drag and drop the browser tab to the right-hand side.

Disclaimer: You do not need any extension for this feature!

That's it! You're all set up! I hope this will make your coding experience a bit smoother. Happy coding, everyone!πŸ™Œ

Top comments (23)

Collapse
 
sarahokolo profile image
sahra πŸ’«

This is one cool way, but an easier way is to just use the live preview extension, it opens up a browser right there in VScode

Collapse
 
nadiafedev profile image
Nadia

Oh, i wil add that to the list of discovering more new stuff everyday πŸ˜„
Thank you for sharing Sahra 😊

Collapse
 
sarahokolo profile image
sahra πŸ’«

You're welcome :)

Collapse
 
pavelee profile image
PaweΕ‚ Ciosek • Edited

It's not the same 🫣, from the extension docs:

"This extension is most useful for projects where a server is not already created (e.g. not for apps using React, Angular, etc.). To work with these, feel free to run the Simple Browser: Show command that is already built-in with VS Code."

Collapse
 
sarahokolo profile image
sahra πŸ’«

Yeah, you are correct on that one

Collapse
 
aaronblondeau profile image
aaronblondeau

I have been using VSCode for years and had no idea that this was there. Thanks for sharing!

Collapse
 
nadiafedev profile image
Nadia • Edited

Haha, you are very welcome, Aaron 😊

Collapse
 
skipperhoa profile image
HΓ²a Nguyα»…n Coder

Thank you

Collapse
 
antonov_mike profile image
Antonov Mike

Thank you it can be handy

Collapse
 
nadiafedev profile image
Nadia

I am glad, Antonov!

Collapse
 
lucifer17540 profile image
Nabhanil

You can try splitting your windows screen into vs-code and browser , so you can change things on the go . Lately I've been using it and it has been very helpful

Collapse
 
nadiafedev profile image
Nadia

I do that as well πŸ˜… Having multiple options to choose from is great because it allows me to adapt my coding environment based on my mood, the project I'm working on, or whether I'm studying and coding simultaneously. So i like to know that i have a plethora of options😊 But discovering that option in vs code, got me excited too much haha

Collapse
 
ludamillion profile image
Luke Inglis

Some of you might say, "You just found out about this now?!" Well, as I always say, "Better late than never!"πŸ˜…

She says only six months into her engineering journey. I’ve been an engineer for over a decade at this point and I’m still learning new things about the tools I use.

I feel likes it’s always good to share discoveries you’re excited about and find useful. In my experience there are two things that happen most for the time:

  1. You know about something they don’t and you get to share with them and teach them.
  2. They already know about it and they can teach you more about it that you might not now yet.

Learning about tools is a great way to stay curious too. Anytime I’m feeling a bit bored I change something up in my workflow or tools.

Anyway, welcome and great write up. Stay curious and delight in finding new things.

Collapse
 
ricky11 profile image
Rishi U

nice, would be good if it had access to dev tools to see errors and console logs.

Collapse
 
thatanjan profile image
Anjan Shomodder

why not just add a new browser window to the workspace?

Collapse
 
marciodeveloper profile image
Jose Marcio Barthem

Very practical and simple. I also use "Live Server", which helps me a lot.

Collapse
 
softwaredeveloping profile image
FrontEndWebDeveloping

Thanks for telling us Nadia. I use the built in browser and find it exceedingly handy.

Collapse
 
nadiafedev profile image
Nadia

I am glad, you are very welcome😊