Split screen on Visual Studio Code editor

1

I have started a javascript course using VSC as editor. I cant get a split screen to show Chrome.
It shows on the tutors screen but gives no clue how to do it.

2

Hello,
you can use an extension called Live Server for that, watch this video to set it up, it will make your HTML, CSS and JS code appear on the chrome browser and updates it every time you make a change in the code, you can then adjust both windows of VS code and Chrome to appear side by side manually

1 Like
3

Thanks. I’ll try that now.

4

Some of the code was flagged up as invalid. Also my version is slightly different to the one in the video so I failed to follow the instructions to the end. Maybe I need to find a live server video which matches my VSC.

1 Like
5

Try deleting the extension then reinstall it, make sure your work is saved then close VS code and reopen it, go the html file of the webpage you want to open with extension and search the bottom of the editor of a button called Go Live then press it to make it appear on the browser, remember you should press that button on the HTML file not a CSS or JS one because that will not work properly
If that does not work look here
javascript - Live server installed but not working in VS code - Stack Overflow

6

There is no Go Live button on the html file but I can switch on the live Server another way but it is not linking to the course files.

7

I remember I had a similar problem before, make sure that the course files are in a folder then open VS code on that folder and try activating the extension on the corresponding html file, you can do that by going to File -> open Folder then choose the folder that contains your course files

8

Thanks for all your help but I think I’ll give up on this one. None of the solutions I tried worked so I will use the debug console in VSC. It’s the long way round but preferable to wasting hours online searching for an answer.