How do I make a live server split screen using visual studio code?

842 views Asked by At

As a beginner starting my first project, I wanted to download an extension so that I could see my code while coding it and do a split screen thing. So following instructions I got from chatgpt I installed the extension live server ( by ritwickdey) and when I clicked on its file, at the bottom right of the page there was a small symbol that says go live when you hover over it, I clicked and it directed to my web project live server which was fine now from there I have both my visual studio code and live web browser sever opened I go on VSC and right click on my HTML file specifically then click split to the right. I was expecting to have the live web browser split to the right vertically and adjustable but it wasn't it was my current HTML code but just copied and split to the right I tried other options from what it gave me before that remotely related to what I was trying to do like open with the live server but they didn't work. I tried some troubleshooting like copy-pasting the link into a different browser and trying again and closing the app and trying again. After that, I went searching for another way to do split screen I found one on a yt tutorial and started by going on the view option at the top left click on it, and from there going to the command palette then searching live server/open with the live server then from there I go on the HTML tab at the top right click then click split right I was expecting for it to work and have my live web server browser open but it didn't. Can anyone help me and tell me what I should do?

2

There are 2 answers

4
Sam Cutter On

It looks like all you're trying to do is view both your code and your browser simultaneously.

You can do this by re-sizing your Visual Studio Code window and placing it on the left of your screen, then re-sizing your browser window and placing it on the right of your screen (or vice versa, depending on your preference).

Whenever you update your code (HTML, CSS, etc.) the Live Server extension will automatically refresh your browser window, allowing you to see your website.

2
Peace Chinagwam On

VS Code

Use command+shift+P it will give you a prompt then you enter the URL, your localhost URL.