[TIL] How to Use Live Server in Visual Studio Code

Geroge and I have been working on a modern retro arcade game in HTML, CSS, and JavaScript called, “Shoot”. We made a bunch of edits within Visual Studio Code and Cursor and then opened the HTML in Chrome to see the changes. Lots of changes and refreshes of the page. But, when we changed the audio to use the Web Audio API, the app stopped playing sounds when it ran directly from an HTML file. I researched the error messages and found that sounds via the Web Audio API need to be served from a web server to get around CORS issues with local files. In researching options, I learned about the Live Server extension for Visual Studio Code.

Live Server is a Visual Studio Code extension that allows developers to run a local development server directly from the editor. It provides a quick and easy way to preview HTML, CSS, and JavaScript files in the browser with live-reloading capabilities. When you change your code, the browser automatically updates without needing to refresh manually. This makes it ideal for fast development and debugging. It also works well with single-page applications and supports multiple file types. With just a right-click on an HTML file and selecting “Open with Live Server,” you can immediately launch a server and start developing.

Live Server Extension in Visual Studio Code Step-by-Step

Step 1: Install the Live Server Extension

1. Open Visual Studio Code.
2. Go to the Extensions view by clicking the Extensions icon on the left sidebar (or press Ctrl+Shift+X).
3. In the search bar, type “Live Server.”
4. Click on the Live Server extension (by Ritwick Dey) and then click the Install button.

Step 2: Open Your HTML File

1. After installing the Live Server extension, open the HTML file you want to run.
2. Right-click on the HTML file in the editor or in the file explorer.

Step 3: Start Live Server

1. Choose the option Open with Live Server from the right-click context menu. This will start a local development server and open your HTML file in your default web browser.
2. The server will automatically update whenever you make changes to the HTML, CSS, or JavaScript files, making debugging easier.

Step 4: Debugging HTML with Developer Tools

1. Once the HTML file is running in the browser, open the browser’s developer tools (press F12 or Ctrl+Shift+I in most browsers).
2. Use the Elements, Console, and Network tabs to debug your HTML, CSS, and JavaScript in real-time.

Step 5: Additional Debugging Options for JavaScript

If you need to debug JavaScript in VS Code, you can also attach a debugger. Here’s how:

1. Install the Debugger for Chrome/Edge Extension (Optional):
   • Install the Debugger for Chrome or Debugger for Edge extension from the VS Code extensions marketplace.
   • This allows you to attach a VS Code debugger to the browser session for step-through debugging.
2. Set Up a Launch Configuration:
   • Go to the Run and Debug view (on the left sidebar or press Ctrl+Shift+D).
   • Click on create a launch.json file.
   • Select Chrome (or Edge) as the environment.
   • A launch.json configuration file will be created, which allows you to configure your debugging session.
   • Set up the URL to point to the Live Server URL (e.g., http://127.0.0.1:5500/index.html).