VSCode Auto Reload Browser during code change
For Static HTML CSS (Live Server)
Live Server Extension install into VSCode
-
Open the VSCode and click to Extensions from the left menu or press Ctrl + Shift + X shortcut from keyboard.
-
Search the Extension called Live Server click to the extension.
-
Click on Install, wait until the extension install.
Run project using Live Server and hot reload
-
Open the HTML project and the file for example index.html
-
Right click on it Open with Live server or Alt + L + O
-
Now you can see the pages open to the browser & when you changed to any file it will reload automatically.
For any kind of Local server (LiveReload)
For Auto Reload Browser during the codes changes into the VSCode we will use 2 things, lets see them
-
LiveReload Extension on VS Code
-
LiveReload chrome addons
LiveReload Extension install into VSCode
-
Open the VSCode and click to Extensions from the left menu or press Ctrl + Shift + X shortcut from keyboard.
-
Search the Extension called LiveReload click to the extension.
-
Click on Install, wait until the extension install. (If show any warring please click on Trust Workspace & Install)
LiveReload Addons install into Chrome
-
Open the Chrome browser
-
Now go to the Chrome Web Store
-
Search Extension called LiveReload if not found then go to google.com and search livereload chrome pick the first result
-
The direct link of the LiveReload extension of chrome
-
Then add the extension.
LiveReload Enable on VSCode
-
Open the VSCode and click to Manage (Setting icon) from the left menu, then click Command Paletter.. or press Ctrl + Shift + P shortcut from keyboard.
-
Search LiveReload, LiveReload: Enable/disable server click on it for run the server. The server will start
LiveReload Enable on Chrome
-
Open the Browser and the url of the project
-
Find the extension called LiveReload and press the icon. now the site will auto reload when the codes change in VS Code.