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 (22)
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
Oh, i wil add that to the list of discovering more new stuff everyday π
Thank you for sharing Sahra π
You're welcome :)
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."
Yeah, you are correct on that one
I have been using VSCode for years and had no idea that this was there. Thanks for sharing!
Haha, you are very welcome, Aaron π
Thank you
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
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
Thank you it can be handy
I am glad, Antonov!
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:
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.
why not just add a new browser window to the workspace?
nice, would be good if it had access to dev tools to see errors and console logs.
Great π
This simple browser thingy can't even display my site. I think I will stick to using firefox with tree style tabs.
Hi Nadia,
Your tips are very useful
Thanks for sharing
Thanks for telling us Nadia. I use the built in browser and find it exceedingly handy.
I am glad, you are very welcomeπ
Very practical and simple. I also use "Live Server", which helps me a lot.
thanks