VsCode Tutorial: How to use Live Server and view updates right in VsCode without using a web browser

in this brief tutorial we're going to talk about a extension for vs code called live server and when we use this extension it'll give us the opportunity to see our code changes as as we update our code in a web browser so let's take a look first we'll go to the extensions and we'll search for live server type in live and server and you'll see it come up and we're going to install it and now that it's installed you're going to see a little option down in the bottom that says click to run live server what that's going to do is open up your default web browser and show you your code file in what's called live server so you can see your changes so i have a little test page here if i go down there and go live or i can right click in my code and say open with live server and what you'll see here is a web browser tab opened okay this is a sample page to use live server nvs code and that's going to show my current code now what i'm going to do is i'm going to show some changes i am making changes and hit save and as soon as i hit save in vs code my web browser will update no page refresh necessary which is a pretty cool thing now some folks have asked me how can i actually see my code or my browser changes right inside of vs code without having that having to have a separate browser open and such so what if i wanted the tab in vs code to see it what i can do here is i can take the web address of the live server which is running on port 5500 currently and i can copy this so this is going to be the address and like i can go open up another page and i can pull it up right so it's still a live server in another page and if i was to make changes it would update here as well but what if i want an nvs code well that's pretty simple let's go up to our command palette and in our command palette and i've done it recently if you start typing for simple browser and you click on simple browser and with simple browser just paste in the address and hit enter and now you'll have a tab to a web browser inside of vs code and if we're making changes here i am making changes more changes coming hit save flip over to your simple browser and there you go more change is coming so updates and if we say let's you know take this away once that is a fun tutorial hit save and go over you see it keeps up to date that's how you use live server in vs code and for some of you who want to see your code changes right inside vs code just after you get your live server address open up simple browser again that was up in the command palette and simple browser it gives you a browser inside a vs code and just paste in the address to your live server hope you found that helpful if you have any questions or any ideas for some future tutorials just reach out and let me know be more than happy to put something together for you hope you follow my page and see you soon

Channel: Dr. Todd Wolfe Technology Training and Tutorials

Views: 60,165

Keywords: VSCode, Dr. Todd Wolfe, Syracuse Best Professor, Dr. Wolfe, Dr. Wolfe Tutorials, Live Server, View in VsCode

Id: ZfCi0Is9gLU

Length: 3min 52sec (232 seconds)

Published: Sat Jul 02 2022