Entertainment & Lifestyle

Shopping & deals, utilities & tools, business & productivity, study & reference, security & privacy, information & communication.

  • File & Download Management

Experience the Power of Live Server - A Game-Changing Web Extension

  • 0 Downloads

Live Server Web Extension

Table of contents:

The Ultimate Solution for Live Reloading

Easy installation and setup, real user reviews, experience live server in action.

Are you tired of constantly refreshing your browser to see the changes you make to your dynamic content ? Look no further, Live Server is here to revolutionize your web development experience. With a total rating of 4.1 based on user reviews, this Chrome extension is a must-have for developers seeking to enhance their workflow.

Live Server is a powerful web extension that seamlessly integrates with your existing server, allowing you to instantly see the changes you make to your PHP, Node.js, or ASPNET projects. It eliminates the need for manual refreshing, saving you valuable time and effort.

To get started with Live Server, simply install the Live Server extension for VSCode, version 3.0.0 or higher. Once installed, you can easily set up the extension by following the step-by-step instructions provided in the setup guide. It's quick, hassle-free, and ensures you can start leveraging the full potential of Live Server in no time.

Let's hear what users have to say about their experience with Live Server:

  • Cody Kim: "Best extension ever."
  • Jason Mendoza: "I love it! I would love it even more if it had more flexibility, but still, thanks for your effort!"
  • Erin Lubiansky: "Exactly what I was looking for! I tried several other extensions, and this is the only one that worked (and works so fast too!)"
  • Wilson Rosa Gomes: "Perfeito! This extension made my work with ASP CLASSIC so much easier. Congratulations to the developer!"
  • Peter Stavrou: "Excellent! I use this for Django and it works great!"
  • Xolelani Terrence Mdima: "Does not work with index.php as the root file. It only displays the directory and when the file is selected, it downloads rather than displaying."
  • ziu C: "很棒,这就是我想要的拓展!" (Translation: "Great, this is what I want!")
  • ashen madusanka: "Working."
  • chayan mitra: "Great extension!"
  • koro: "Not working."

Curious to see how Live Server works? Check out this demo to witness the seamless live reloading of dynamic content.

Don't let manual browser refreshing slow you down. Install Live Server today and experience a whole new level of efficiency in your web development workflow.

Pros and Cons

Live reload feature for dynamic content

Easy setup with clear instructions

Requires installation of Live Server extension

User Reviews

11 reviews for this extension.

Arctic Fox

How to use it???

meysam abbasi

No instructions. Doesn't work. Should work like the Preview extension in VC.

L. Aerin

I was doing a tutorial where they didn't have this installed (At least not yet) and they just made a php file, a "hello world" echo and refreshed. I was expecting this to reload my page on-save and it didn't work and it had me frustrated because I had the settings right....five-server was working...the addresses in this extension were there.... then I realized that I didn't have the usual skeletal HTML tags in there. As soon as I added those like you would an HTML file, it fired right up. Just mentioning that incase anyone else runs into that. Seems pretty obvious but maybe not if you're down an overthinking rabbit hole.

Cody Kim

Best extension ever.

Go Beyond

I love it, I would more love it if it is flexible, for example, it doesn't work with "localhost, localhost:5500", thanks for your effort!

Astrosoft Lab

Exactly what I was looking for. I already had my own server running (WP Local) and while that has an addon for reloading, it only monitors CSS files. I'm using the Tailwind framework so I needed something to monitor PHP files as well. I tried several other extensions and this is the only one that worked (and works so fast too!)

Peter Stavrou

Excellent! I use this for Django and works great!

Xolelani Terrence Mdima

Does not work with index.php as root file. It only displays the directory and when the file is selected it downloads rather than display.

ashen madusanka

Users count

Live server web extension.

  • Share on Facebook Share on Twitter Share on WhatsApp Copy link Share

Security impact analysis

Manifest The manifest file lacks essential security details and may pose significant risks to user privacy and system security. Note: A high risk score does not necessarily mean the extension is malicious

Content Script Some security measures are implemented in the content scripts, but there are notable gaps that need to be addressed to ensure robust security. Note: A moderate risk score does not imply malicious intent

Permissions The permissions requested by the extension are well-documented and limited to what is strictly necessary, reflecting a strong commitment to user privacy and security. Note: A low risk score does not imply malicious intent

Host Permissions Host permissions are used sparingly and purposefully, with stringent controls to prevent abuse and protect user security. Note: A low risk score does not imply malicious intent

Current Version

Payment type

Explore Related Topics

Pinterest downloader, pinterest video downloader, chrome extensions, chrome extension download, top chrome extensions, download images from web, image downloaders.

Entertainment & Lifestyle

Related extensions

A Game-Changing Chrome Extension for LiveReload Integration

Responsive Viewer

CSSViewer: A Powerful Chrome Extension for CSS Properties Viewing

Mobile simulator - responsive testing tool

Enhance Your Web Development Experience with the Web Developer Extension

Web Developer

Debugging Vue.js Applications with the Chrome DevTools Extension

Vue.js devtools

Enhance Your React Development with React Developer Tools Chrome Extension

React Developer Tools

Related articles.

Best Chrome Extensions to Improve Your Productivity

Best Chrome Extensions to Improve Your Productivity

Supercharge Your Web Design with These Must-Have Chrome Extensions

Supercharge Your Web Design with These Must-Have Chrome Extensions

Unlocking the Power of Chrome Extensions for Google Classroom

Unlocking the Power of Chrome Extensions for Google Classroom

Streamline Your Browsing Experience with the Top 5 AdBlock Extensions for Chrome

Streamline Your Browsing Experience with the Top 5 AdBlock Extensions for Chrome

Discover Top Best VPN extensions for Chrome

Discover Top Best VPN extensions for Chrome

Unlocking Savings: Unveiling the Top Chrome Coupon Extensions for Maximum Discounts

Unlocking Savings: Unveiling the Top Chrome Coupon Extensions for Maximum Discounts

Best Chrome Extensions for improving your Productivity

Best Chrome Extensions for improving your Productivity

Ad Blocker Showdown: Discover Your Perfect Ad-Free Browsing Solution

Ad Blocker Showdown: Discover Your Perfect Ad-Free Browsing Solution

Discover the world of Roblox with Top Chrome Extensions for Gamers

Discover the world of Roblox with Top Chrome Extensions for Gamers

Maximizing Savings - the Ultimate guide to Top Chrome Extensions for Coupons, Price tracking & Shopping deals

Maximizing Savings - the Ultimate guide to Top Chrome Extensions for Coupons, Price tracking & Shopping deals

THIS SITE USES COOKIES

This site, like many others, uses small files called cookies to help us improve and customize your experience. Learn more about how we use cookies in our cookie policy .

VS Code Live Server – How to Auto-Refresh Your Browser with this Simple Extension

Cem Eygi

Visual Studio Code is one of the most popular code editors out there. It's free, it has a clean interface, and it has countless extensions which make programming easier and more fun.

I'm a frontend web developer and I use VS Code while I work and on my YouTube channel. I've had many people ask me how the browser gets refreshed automatically while I'm coding, without clicking the reload button.

Well, this is possible if you configure a useful extension in VS Code called live-server. In this post, I will explain the details of how it works and how to set up and configure a live server in your VS Code editor.

Why should I use the live-server extension?

Normally, when you make a change in your code or write something new, you need to refresh the page manually to see the changes.

In other words, if you make 100 changes in your code each day, you need to refresh the browser 100 times.

The live-server extension, however, automates this for you. After installing it, an automated localhost will be able to run in your browser, which you can start with a single button.

Once you make changes in your code or write something new, after saving it, the browser will auto-refresh itself. Then you will be able to see the changes quickly and automatically.

If you prefer, you can also watch the tutorial video below:

First, Install VS Code

You can skip this part if you have already installed VS Code on your computer. Otherwise, you can download it from its official website .

1-3

After you've downloaded and installed VS Code, you are going to see the welcome screen:

2-3

On the left side, you should see a couple of icons. One of them (under the no bugs icon) is the extensions button:

2-4

Once you click on it a search bar will appear. Just type in “live server”.

3-2

You will see many options, so you can choose whichever one works for your system. I use Live Server by Ritwick Dey, so let's continue with that one in this example:

4-2

Click on the install button and it will install the extension.

Create a New HTML Page

To start the live server, make sure you at least have an HTML page created. To do that, click on the file button at the very top, then choose the new file button and type index.html:

6-2

Configuration Issues

Now after you created an HTML page and installed the extension you should be able to see a “Go Live” icon right below in the blue field:

5-2

If you don’t see it just restart VS Code. Then it should be OK.

Click on the "Go Live" button and the localhost (assigned to a port number) should start on your default browser. You can start and stop your live server anytime by clicking on the same button.

If you have reached this step, congratulations! :) Now you can work with the live-server. Otherwise, if you are still having issues, check out this post for more info .

I hope this post helps you install and configure the live server extension in VS Code. If you want to learn more about web development, feel free to visit my Youtube channel .

Thank you for reading!

Front-end Developer // Follow Me on Youtube: https://bit.ly/3dBiTUT

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

How To Run HTML On localhost In VSCode On Mac | Live Server

To run html in vscode on a mac is relatively simple. to setup vscode for running your html website or javascript application on a macbook pro will require taking steps outlined in this tutorial. just watch the video below, it's the fastest way to learn. by end of this tutorial you'll be able to run html and javascript on your mac, from terminal or by using liveserver extension, which makes your javascript code run like a real web application on localhost..

Let's run HTML on localhost like a web application!

So this is how you would run HTML in VSCode on a Mac / Macbook Pro / Macbook Air

Okay guys, you can read this article and learn the step by step process for running your HTML, CSS and JavaScript on localhost. But there is a faster way to learn.

If you don't like reading, simply watch these video tutorials.

It will only take 2 to 3 minutes of your time to learn how to run HTML on localhost.

So let's get started 🙂

Video is probably the fastest way to learn how to run HTML locally:

How To Run HTML File In VSCode On Localhost On A Mac (Live Server)

How to run html file in vscode on localhost on windows.

And this is how you would run HTML files in VS Code on Windows 7 10 or 11

Still reading? Great let's take a look how to set up HTML to run locally in your browser.

If you just started coding in Visual Studio Code and you are still llearning HTML, one of the first things you want to do is run HTML files from localhost address in your browser.

An alternative to running HTML files on localhost is simply opening them in your browser. But the problem with doing that is that HTML doesn't function in the same way as a real web application.

So let's learn how to run HTML on localhost in your browser.

Step 1 - Download And Install Visual Studio Code

Get your VSCode editor ready.

One of the fastest ways to get started with running an HTML file on your localhost is to use Live Server extension which is part of VS Code editor. Best part is that both VSCode and Live Server are free!

Step 2 - Open VSCode And Install Live Server Extension

Let's install Live Server!

1. With Visual Studio Code open, navigate to the extensions button.

2. Start typing live server into extensions' search box.

3. Click on first search result that should say Live Server.

4. Click on the install button.

Step 3 - Configuring Live Server To Run In Chrome (Or Another Browser)

1. Go to the Settings button, and select "Extension Settings" option from its drop down menu.

This will open Live Server Extension's settings page.

2. In the upper right corner, click on small button to open settings.json file as shown in the screenshot above.

3. Edit settings.json file by adding the following new property and "chrome" value.

Add the line to your settings.json file as follows:

So now your settings.json file will look something like:

This will setup Live Server for opening your HTML file in chrome browser. But you can also specify other values like firefox or safari for example.

4. Run HTML File On Localhost in VSCode

So how do you run an HTML file on localhost as though on a live server?

1. Create a new folder for your HTML project.

2. In VSCode menu go to File > Open Folder.

3. Add a new file to your project, let's say index.html and type some basic HTML.

4. Important: In order for Live Server to launch your HTML file, it must contain <head> and <body> tags. Without them, Live Server will not run your HTML file and display an error message.

What is one of the best reasons to learn how to run HTML on localhost?

One of the greatest reasons that generally we build HTML apps to run on localhost is due to the fact that running HTML files in browser is a matter of security. And while we should prevent any random script from gaining access to our system, we as developers still want to be able to edit our code and run it on our PC with full system access.

Imagine opening an HTML file containing a webapp that someone else created. If you run it locally in your browser, it would gain access to your hard drive, network, etc. Because naturally this is how web applications are written, to run as a server, so they can have complete access to the system.

So this is why we should learn how to run HTML files from localhost. (Same goes for CSS and JavaScript, as they will be usually bundled together with your main HTML file.)

Why should you learn to run HTML from localhost?

The reason you want to learn how to run HTML from localhost is that it will be running as a real web application on a web server (but you can still continue to test and run it on your computer, as if it was being hosted online.)

This is really useful for many reasons. First you'll be learning how professional web applications run, and not just opening an HTML file in your browser. Also to deploy your app online all you will have to do is copy the files to your web host server.

Articles Related To Vscode Community

  • VSCode Keyboard Shortcuts on 13 Jan 2023 by Ghost Together
  • VSCode: How To Disable Red Wavy Underline (Warnings) on 6 Oct 2022 by Ghost Together
  • How To Create A New File In VSCode on 8 Sep 2022 by Ghost Together
  • Fastest Way To Open settings.json In VSCode on 14 Aug 2022 by Ghost Together
  • VSCode Keyboard Shortcuts on 17 Apr 2021 by Ghost Together

Last 10 Articles Written On Ghost Together

  • Free GPT4 For Lawyers, Legal Practice and Case Research on 5 Apr 2024 by Ghost Together
  • Is There a Free GPT Platform For Data Analysis on 5 Apr 2024 by Ghost Together
  • How to use ChatGPT4 for coding on 5 Apr 2024 by Ghost Together
  • How To Use GPT4 For Academic Writing on 5 Apr 2024 by Ghost Together
  • The Manifestation of Electricity: Sparks Museum of Electrical Innovation on 4 Apr 2024 by A. Stranger
  • THE MANIFESTATION of ELECTRICITY: Sparks Museum of Electrical Innovation on 4 Apr 2024 by A. Stranger
  • aeaeeeae on 1 Apr 2024 by Scripted556
  • Hi on 27 Mar 2024 by Harmattan193
  • Testing Ghost on 25 Mar 2024 by Flex854
  • Comparison of the Wise and Philosophical Ideas in Ferdowsi’s Shahnameh and Nasse... on 24 Mar 2024 by Flex688

Last 10 Vscode Questions Asked On Ghost Overflow

  • Ask your first Vscode question! (Help us build the largest database of questions on any subject)

Comments (2) New! (You can now post comments on articles!)

Live Server | VSCode Extension

Launch a development local Server by a single click and watch live changes with some extra functionality

  • Default value is 5500 .

Example: /sub_folder1/sub_folder2 . Now sub_folder2 will be root of the server.

Default value is “ / ”.(The Workspace Root) .

  • Default value is "Null" [String, not null ]. (It will open your system’s default browser.)
  • chrome:PrivateMode
  • firefox:PrivateMode
  • microsoft-edge

Not enough? need more? open an/a issue/pull request on github. For now, use liveServer.settings.AdvanceCustomBrowserCmdLine settings (see below).

liveServer.settings.AdvanceCustomBrowserCmdLine : To set your any favorite browser (Eg: Chrome Canary, Firefox Nightly) using advance Command Line. (You can specify full path of your favorite custom browser) .

  • This setting will override CustomBrowser and ChromeDebuggingAttachment settings.
  • Default Value is null
  • chrome –incognito –headless –remote-debugging-port=9222
  • C:\Program Files\Firefox Developer Edition\firefox.exe –private-window
Note: Either use AdvanceCustomBrowserCmdLine or CustomBrowser . If you use both, AdvanceCustomBrowserCmdLine has higher priority.

NOTE : You must have to install Debugger for Chrome.

If the value is true , Start Live Server and select ‘Attach to Chrome’ from Debug Window to start debugging. Debugger for Chrome Extension will inject debugging feature into running instance of browser window.

Default value is false .

liveServer.settings.NoBrowser : If it is true live server will start without browser opened.

  • Default Value is false

Now, by default Live Server will not track changes of your .scss & .sass files.

liveServer.settings.donotShowInfoMsg : To turn off information pop-up messages like “Server starts with port xxxx” or like that. To turn off it, you can set the value as true or you can click to “Don’t show again” when a information message pop-up.

  • Default value is : false
  • Default is 127.0.0.1 .
[This Settings is dropped and this feature can be replacemented with Live Server Web Extension]
  • Default value if false
  • Properties : "liveServer.settings.https" : { "enable" : false , //set it true to enable the feature. "cert" : "C: \\ https \\ server.cert" , //full path "key" : "C: \\ https \\ server.key" , //full path "passphrase" : "12345" },
  • Properties : ```js /* In easy word, it means you’re shifting your real url (actual PHP url) to another url (which LiveSever will start). */

“liveServer.settings.proxy”: { “enable”: false, //set it true to enable the feature. “baseUri”: “/”, //from where you want to proxy. “proxyUri”: “http://localhost/php/” //the actual url. }, ```

  • Default is false

liveServer.settings.fullReload: : By Default Live Server inject CSS changes without full reloading of browser. You can change this behviour by making this setting as true .

  • Default: false

liveServer.settings.wait: : Delay before live reloading. Value in milliseconds.

  • Default: 100

liveServer.settings.mount: : Mount a directory to a route.

Default: []

liveServer.settings.useLocalIp: : Use local IP as host.

liveServer.settings.file: : Path to the entry point file. Useful for SPA

  • Default: ""

liveServer.settings.multiRootWorkspaceName: : This the entry point of server when you’re in multiroot workspace.

Default: null

You can change it using Command Palette ctrl+shift+p & type Live Server: Change Live Server workspace

Tips: You don’t need to set this setting, Live Server is smart enough, it’ll eigher ask what you want or automatically set the correct workspace if open the server by right clicking any HTML file.

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

  • Notifications

How to Install PHP Server in Microsoft Visual Studio Code (2022)

Some of the links in this article are "affiliate links", a link with a special tracking code. This means if you click on an affiliate link and purchase the item, we will receive an affiliate commission.

The price of the item is the same whether it is an affiliate link or not. Regardless, we only recommend products or services we believe will add value to our readers.

By using the affiliate links, you are helping support our Website, and we genuinely appreciate your support.

What is Microsoft Visual Studio Code?

Visual Studio Code is  a streamlined code editor with support for development operations like debugging, task running, and version control . It aims to provide just the tools a developer needs for a quick code-build-debug cycle and leaves more complex workflows to fuller featured IDEs, such as Visual Studio IDE. code.visualstudio.com

What is Microsoft Visual Studio Code PHP Server?

PHP Server is a Microsoft Visual Studio Code extension that enables you to:

Host / serve current workspace (or subfolder) with PHP. marketplace.visualstudio.com

Prerequisites

PHP Server requires some servers and Microsoft Visual Studio Code to be installed .

PHP Server needs Live Server Web Extension installed on the browser it will be using.

Table of Contents

Live server web extension, what is live server web extension.

Live Server Web Extension is a browser extension that allows PHP Server (via Live Server) to update your browser. It will do this whenever you save your code in VS Code.

Why use Live Server Web Extension?

Used with Microsoft Visual Studio Code, this is very convenient. It allows you to immediately see how your local website looks and works. You do not have to click over and refresh your browser each time. It also avoids the annoying issue of forgetting to refresh your webpage and wondering why your working code is not working!

How to Install Live Server Web Extension

Install Live Server Web Extension on the browser VS Code will be using. Often, this is the default browser.

If you are planning on installing Live Server Web Extension on Safari or Microsoft Edge, click the appropriate + sign below for important information.

[sp_easyaccordion id=”12400″]

Search for Live Server Web Extension

For instructions about searching for the Live Server Web Extension, click the tab for the appropriate browser.

[TABS_R id=12342]

At this point, the procedure for each browser is basically the same. The differences are minor and straightforward to figure out. The exact procedure for a specific browser is shown under the corresponding tab.

Add Live Server Web Extension to Browser

Click on the Add to Browser button.

[TABS_R id=12360]

Click the Add Extension Button.

[TABS_R id=12363]

Remove the “Live Web Extension has been added to Browser ” message.

This means clicking an X or an Okay button.

[TABS_R id=12369]

Pin the Live Server Web Extension

Some browsers pin the Live Server Web Extension automatically. Others don’t.

Click on the Extensions icon.

[TABS_R id=12377]

Pin Live Server Web Extension.

[TABS_R id=12383]

Enter the Live Server Web Extension Settings

Click on the Live Server Web Extension icon.

[TABS_R id=12387]

Set Live Server Web Extension to the following settings:

Enable Live Reload.

Leave a checkmark for “I don’t want proxy setup (recommended)”.

Enter http://localhost:3000/ for “Actual Server Address”.

Enter http://127.0.0.1:5500/ for “Live Server Address”.

Click the Apply button.

[TABS_R id=12390]

Live Server Web Extension is now installed. If you are finished setting up your browsers, install PHP Server for VS Code.

[TABS_R id=12393]

How to Install PHP Server in Microsoft Visual Studio Code

Open Microsoft Visual Studio Code.

[TABS_R id=12288]

VS Code Click Extensions Icon

Add the Live Server Extension in VS Code

In the Search Extensions in Marketplace box, enter live server. Several choices will be shown.

Find the one called Live Server by Ritwick Dey. Click on its Install button.

VS Code Live Server Click Install

Wait several seconds for the Live Server extension to install. When the installation is done, you will see this:

VS Code Live Server Extension is Installed

Add the PHP Server Extension in VS Code

In the Search Extensions in Marketplace box, enter php server. Several choices will be shown.

Find the one called PHP Server by brapifra. Click on its Install button.

VS Code PHP Server Click Install

Wait several seconds for the PHP Server extension to install. When the installation is done, you will see this:

VS Code PHP Server Extension is Installed

At the bottom left, click on the Manage icon.

VS Code Click Manage Icon

Then click on Settings.

[TABS_R id=12292]

Remove all text from the Search Settings search box. Set Files: Auto Save to either off or afterDelay.

If Auto Save is off, you will have to press Cmd-S to save the file before the browser will update.

If Auto Save is set to afterDelay, then the browser will update about one second after you made a change to the file. This is the setting I prefer. Sometimes, I press Cmd-S if I want a browser update without changing my file.

VS Code Set AutoSave to afterDelay

Enter browser in the Search Settings search box. Then put a checkmark on Live Server – Settings: No Browser.

VS Code Set Live Server to No Browser

In the text field for “Phpserver: Browser”, enter the browser you want VS Code to use. I entered opera.

For Google Chrome, enter chrome. For Firefox, enter Firefox. For Opera, enter opera. For Chromium, enter chrome.

VS Code Set PHPserver Browser to Opera

If you leave it blank, the default browser will be used. I am going to blank Phpserver: Browser to go back to the default browser.

Enter php into the Search Settings search box.

In the field for Phpserver: PHP Config Path, enter the file path to the PHP initialization file.

In the field for Phpserver: PHP Path, enter the file path to the PHP executable file.

Note that the / must be used.

For Mac, change the 8.0.8 to the number for your PHP version.

For Ubuntu, change the 8.1 to the number for your PHP version.

[TABS_R id=12297]

Go to the part for PHP > Validate Executable Path, and click on the “Edit in settings.json” link.

VS Code Set Validate Executable Path Edit in settings json

You will see the following.

The line for phpserver.browser is optional and may not be there. That is okay. In my case, it is there and is blank (“”). This due to me entering opera into the Phpserver: Browser field and then deleting it.

[TABS_R id=12307]

We want to change it to this:

[TABS_R id=12300]

We want to add two lines before the closing curly brace. The “php.executablePath” line, and the “php.validate.executablePath” line.

The easiest way is to simply replace everything with the following code, and adjust it to your preferences and settings.

[TABS_R id=12314]

Save the settings.

[TABS_R id=12322]

Quit VS Code.

[TABS_R id=12323]

Visual Studio Code is now configured.

Start Live Server

Wait for Go Live to be displayed in the status bar. This can take a few seconds. If it doesn’t show up, click on an HTML or PHP file and then wait a few seconds for Go Live to show up.

You may not see all the following text because the startup is fairly quick. I literally had to go through frame-by-frame through the video to get these pictures.

First, Plain Text is displayed.

VS Code Live Server at Plain Text

Then JSON with Commentsis displayed. This normally goes away quickly. If it does not go away after several seconds, click on an HTML or PHP file and wait.

VS Code Live Server at JSON with Comments

Then HTML is displayed.

VS Code Live Server at HTML

Then PHP is displayed.

VS Code Live Server at PHP

Then Go Live is displayed. Yay!!

VS Code Live Server at Go Live

Click on Go Live to start Live Server.

VS Code Live Server Click Go Live

Live Server will start running.

VS Code Live Server is Running

Start PHP Server

Click on the PHP file you want to display in the browser.

VS Code Click on PHP file

On the right side, right-click on the code. Click on PHP Server: Serve project.

[TABS_R id=12334]

The PHP server will start running and will display “Serving project”.

VS Code PHP Server Serving project

Right-click on the code again. Click on PHP Server: Open file in browser.

[TABS_R id=12335]

The browser will open up and display the file contents. In this case, it is a webpage.

VS Code Webpage Opens

Make a change to the PHP code for the webpage. Either save the file, or if auto save is set to afterDelay, the browser will update in about one second.

VS Code Webpage Changed via VSCode

Microsoft Visual Studio Code is installed and working!

PHP Server, brapifra

Visual Studio Marketplace, Live Server, Ritwick Dey

Live Server Settings Document

Related posts:

  • How to Install a LAMP Stack and phpMyAdmin and Microsoft Visual Studio Code on Ubuntu (2022)
  • Install XAMPP and Microsoft Visual Studio Code on a Windows 10 PC (2022)
  • How to Update the Snap Store in Ubuntu 22.04
  • How to Set up a Local WordPress Website in Microsoft Visual Studio Code (Halloween 2022)

Terms and Conditions - Privacy Policy

Item logo image for Live Server Web Extension

Live Server Web Extension

Makes your existing server live. This is a browser extension that helps you to live reload feature for dynamic pages

Live Server - Makes your existing server live - this is a Web Extension that helps you to live reload feature for dynamic content (PHP, Node.js, ASPNET -- Whatever, it doesn't matter). This extension is for Live Server (VSCode Extension - required v3.0.0+). You have to install Live Server extension for vscode in order to use this Add On. Follow this link to setup : https://github.com/ritwickdey/live-server-web-extension#setup Demo : https://raw.githubusercontent.com/ritwickdey/live-server-web-extension/master/img/screenshots/live-server-web-extension.gif

4.0 out of 5 58 ratings Google doesn't verify reviews. Learn more about results and reviews.

Review's profile picture

Arctic Fox Jan 24, 2024

How to use it???

Review's profile picture

meysam abbasi Nov 29, 2023

Review's profile picture

Laura R Aug 21, 2023

No instructions. Doesn't work. Should work like the Preview extension in VC.

  • Version 1.4.0
  • Updated May 2, 2021
  • Report a concern
  • Offered by ritwickdey
  • Size 429KiB
  • Languages English (United States)
  • Developer Email [email protected]
  • Non-trader This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

For help with questions, suggestions, or problems, visit the developer's support site

live server web extension safari

A simple CSS property viewer.

live server web extension safari

Provides Chrome browser integration for the official LiveReload apps (Mac & Windows) and third-parties like guard-livereload and…

live server web extension safari

Vue.js devtools

Browser DevTools extension for debugging Vue.js applications.

live server web extension safari

Open source browser design tools

live server web extension safari

Open in VSCode

Open Github and Gitlab links in VSCode

live server web extension safari

Validate and view PHP print_r outputs

live server web extension safari

Web Developer

Adds a toolbar button with various web developer tools.

live server web extension safari

React Developer Tools

Adds React debugging tools to the Chrome Developer Tools. Created from revision 47cf347e4 on 3/8/2024.

live server web extension safari

Mobile simulator - responsive testing tool

Smartphone and tablet simulator on computer with several models to test mobile responsive websites.

live server web extension safari

Responsive Viewer

Show multiple screens once, Responsive design tester

live server web extension safari

Extract CSS and build beautiful styleguides.

live server web extension safari

Measure page elements size in pixel with an easy-to-use ruler.

live server web extension safari

live server web extension safari

Live Reload

Description.

  • for Firefox
  • Dictionaries & Language Packs
  • Other Browser Sites
  • Add-ons for Android

Preview of Live Server Web Extension

Live Server Web Extension by Ritwick Dey

Live Reload feature for Dynamic content (PHP, Node.js, ASPNET - Whatever, it doesn't matter). This extension is for Live Server - VSCode Extension (required v3.0.0+).

Extension Metadata

Star rating saved

The developer of this extension asks that you help support its continued development by making a small contribution.

Contribute now

This add-on needs to:

  • Access browser tabs
  • Access your data for all web sites
  • Support site
  • Support Email
  • Web Development
  • See all versions

IMAGES

  1. VS Code Live Server Extension: How to Auto Reload Your Browser?

    live server web extension safari

  2. Create a Safari Extension With OpenShift PaaS as Server Backend

    live server web extension safari

  3. Convert a Chrome Extension to Safari Web Extension

    live server web extension safari

  4. ⚡️ Powerful Web Experience with the new Safari Web Extension and More!

    live server web extension safari

  5. Safari Web extension

    live server web extension safari

  6. How to Install Live Server and Browser Auto Refresh In Visual Studio

    live server web extension safari

VIDEO

  1. HTML Tutorial: Installation VS Code & Live Server

  2. How to Add the Live Server Web Extension to Chromium on Ubuntu Desktop 22.04

  3. Safari Extension

  4. Menjalankan Live Server pada Projek Laravel

  5. Live server setup in VS Code and Get HTML output in Browser

  6. Live server in vs code + php

COMMENTS

  1. Live Server Web Extension

    This is a browser extension that helps you to live reload feature for dynamic pages. Live Server - Makes your existing server live - this is a Web Extension that helps you to live reload feature for dynamic content (PHP, Node.js, ASPNET -- Whatever, it doesn't matter). This extension is for Live Server (VSCode Extension - required v3.0.0+).

  2. How to change default browser with VS Code's "open with live server

    steps (change default browser for open with Live Server) Go to File > Prefrences > Settings. Copy and paste liveServer.settings.CustomBrowser into the Search settings bar. Find the setting: Live Server › Settings: Custom Browser. Choose chrome or chrome:PrivateMode from the dropdown menu.

  3. Releases · ritwickdey/live-server-web-extension · GitHub

    11d5f85. Compare. v0.0.1 Pre-release. Initial Release. Assets 2. It makes your existing server live. This is a browser extension that helps you to live reload feature for dynamic content (PHP, Node.js, ASP.NET -- Whatever, it doesn't matter) - Releases · ritwickdey/live-server-web-extension.

  4. Is there any alternative for live server web extension on safari?

    2. Sort by: adarkenigma. • 2 yr. ago. There use to be page specifically for safari extension but now everything must come through App Store. r/Safari. 133 upvotes · 50 comments. 138 upvotes · 41 comments. 6 · 7.

  5. Live Server

    This browser add-on is an extension for a developer tool in VS Code editor (Live Server).With this add-on installed, along with the VS Code extension, it gives you a functionality to automatically update your website on save; for other files than just .htm and .html.. So specifically, with this add-on, live reload will also work with the following server-side files within the spectrum of: PHP ...

  6. Live Server

    Open a project and click to Go Live from the status bar to turn the server on/off. Right click on a HTML file from Explorer Window and click on Open with Live Server . . Open a HTML file and right-click on the editor and click on Open with Live Server . Hit (alt+L, alt+O) to Open the Server and (alt+L, alt+C) to Stop the server (You can change ...

  7. Experience the Power of Live Server

    Boost your productivity with our browser extension. Easily live reload dynamic pages, making your server come alive. Experience seamless development today!

  8. VS Code Live Server

    Configuration Issues. Now after you created an HTML page and installed the extension you should be able to see a "Go Live" icon right below in the blue field: If you don't see it just restart VS Code. Then it should be OK. Click on the "Go Live" button and the localhost (assigned to a port number) should start on your default browser.

  9. FAQs

    How to access the server from Mobile? First, make a sure that your PC & Mobile are connected through same network. Windows : Open CMD and enter ipconfig. Linux/macOS : Open terminal and enter ifconfig. And note down the IPv4 Address (probably it will look like 192.168.xx.xx). This is your PC's IP address.

  10. How To Run HTML On localhost In VSCode On Mac

    2. Start typing live server into extensions' search box. 3. Click on first search result that should say Live Server. 4. Click on the install button. Step 3 - Configuring Live Server To Run In Chrome (Or Another Browser) 1. Go to the Settings button, and select "Extension Settings" option from its drop down menu. This will open Live Server ...

  11. Settings

    liveServer.settings.multiRootWorkspaceName:: This the entry point of server when you're in multiroot workspace. Default: null You can change it using Command Palette ctrl+shift+p & type Live Server: Change Live Server workspace. Tips: You don't need to set this setting, Live Server is smart enough, it'll eigher ask what you want or automatically set the correct workspace if open the ...

  12. Live Server Extension for Visual Studio Code

    Are you a web developer who is tired of manually refreshing your browser every time you make a change to your code? If so, then you need to check out the Liv...

  13. live-server-web-extension/docs/FAQ.md at master

    Answer: The two main reasons are the flexibility, and the complexity of server-side environment. For instance, in order to be able to use this add-on in all environments and not to prevent the user from a specific php verion, or running Apache with PHP. It is therefore preferable that you as a user can decide for yourself which environment to use.

  14. Live Server Web Extension

    Live Server - Web Extension is a browser extension that helps you to live reload feature for dynamic content (PHP, Node.js, ASPNET -- Whatever, it doesn't matter). This extension is for Live Server (VSCode Extension - required v3.0.0+).

  15. How to Install PHP Server in Microsoft Visual Studio Code (2022)

    Add the PHP Server Extension in VS Code. In the Search Extensions in Marketplace box, enter php server. Several choices will be shown. Find the one called PHP Server by brapifra. Click on its Install button. Wait several seconds for the PHP Server extension to install. When the installation is done, you will see this:

  16. Live Server Web Extension

    Makes your existing server live. This is a browser extension that helps you to live reload feature for dynamic pages

  17. Live Preview

    Live Preview - VS Code Extension 📡. An extension that hosts a local server for you to preview your web projects on! This extension is most useful for projects where a server is not already created (e.g. not for apps using React, Angular, etc.). To work with these, feel free to run the Simple Browser: Show command that is already built-in ...

  18. How to Add the Live Server Web Extension to Edge on Windows 11 Pro

    How to Add the Live Server Web Extension to Edge on Windows 11 Pro.From Soup to Nuts: How to Install Microsoft Visual Studio Code With WordPress from Scratch...

  19. Live Reload

    Not sure why your page is not reloading? — Debug your rules by navigating to edge://extensions, find the Live Reload extension in the list, click "background page", visit the "Console" tab and monitor "All levels". Due to security restrictions in web extensions, files served using the file system (file://...) *cannot* be monitored.

  20. Live Server Web Extension

    Download Live Server Web Extension for Firefox. Live Reload feature for Dynamic content (PHP, Node.js, ASPNET - Whatever, it doesn't matter). This extension is for Live Server - VSCode Extension (required v3.0.0+).