How to use Browser Preview within VSCode

For those who do not have various screens, or for those who have to switch screens every couple of seconds, going back and forth to the browser and VSCode software. This is for you!

There is a way to open up a Browser Preview within VSCode. Wait… What? Once again, VSCode has a way for developers to have a browser preview without going back and forth. I will go step by step in order for you to achieve this.

Step 1: Open VSCode and go to Extensions

Step 2: In the Extension search bar, type in ‘Browser Preview’ by Kenneth Auchenberg (as shown above).

Step 3: Once it is installed, there will be a link within the navbar of VSCode that will open up your browser within the software (as shown above). Click it.

This will open up a preview of a browser on your right hand side. If you are running a rails app and running the server on localhost:3000, make sure the path on the ‘Browser Preview’ is on localhost:3000 (as shown below).