Using the Live Server Extension
Eliminate the manual cycle of editing code, switching to the browser, and hitting reload. Understand how WebSocket hot-reloading works under the hood and configure custom ports and browser targets.
🎯 Learning Objectives
- Install and launch the Live Server extension in VS Code via the status bar or keyboard shortcuts.
- Explain the internal mechanism: file watchers, WebSocket connections, and client script injection.
- Understand CSS hot-swapping vs full HTML page reloads.
- Configure custom ports, root directories, and default browsers in
settings.json.
📖 Mental Model: The Automated Teleprompter with Direct Radio Link
In early television studios, if a scriptwriter changed a line, an assistant had to run onto the set, take the old paper card down, and tape up a new one while stopping the broadcast.
Live Server is a digital teleprompter connected via radio: the instant you save a file in VS Code (Ctrl+S), a message zips across a persistent WebSocket channel to the browser. The browser instantly repaints the screen without you ever lifting your hands from the keyboard.
How Live Server Works Under the Hood
When you click "Go Live" in the VS Code status bar (or press Alt+L, Alt+O), a three-step cycle is established:
The Injected WebSocket Client Script
If you inspect the Elements panel of a page served by Live Server, you will see a small script automatically injected right before </body>:
<!-- Code injected by Live Server -->
<script>
// Connects to Live Server's background WebSocket on port 5500
var socket = new WebSocket('ws://' + window.location.host + '/ws');
socket.onmessage = function (msg) {
if (msg.data == 'reload') {
window.location.reload(); // Full refresh for HTML changes
} else if (msg.data == 'refreshcss') {
refreshCSS(); // Hot-swaps CSS without losing scroll position!
}
};
</script>Configuring Live Server in settings.json
You can customize Live Server behavior in your User or Workspace settings:
| Setting Key | Default Value | Purpose |
|---|---|---|
"liveServer.settings.port" |
5500 |
Specifies the local HTTP server port (useful if 5500 is already occupied). |
"liveServer.settings.root" |
"/" |
Sets the web root folder (e.g. "/src" or "/public"). |
"liveServer.settings.CustomBrowser" |
"null" (System default) |
Directs Live Server to launch a specific browser (e.g. "chrome", "firefox", "edge"). |
"liveServer.settings.donotShowInfoMsg" |
false |
Hides pop-up notification messages when the server starts or stops. |
Live Code Example: Fast Feedback UI Component
Experience how quickly UI components can be developed and refined with immediate live visual feedback:
🏋️ Hands-On Exercise: Add Server Metrics Cards
- Expand the live server monitor card above by adding a 2-column metrics grid beneath the connected endpoint box.
- The first metric card should display "Latency" with a value of
4ms. - The second metric card should display "Reload Protocol" with a value of
WebSocket (WS). - Style the metric cards with clean background borders and bold values.
- Click ▶ Run Code to test your expanded dashboard.
⚠️ Common Pitfall: Opening a Single File Instead of an Entire Folder
If you open a single index.html file in VS Code (File → Open File), Live Server cannot determine your project root and relative paths will fail. Always open the entire project folder (File → Open Folder) so Live Server can watch all subdirectories and assets.
💡 Pro Tip: Instant CSS Hot-Swapping without Page Reset
When you edit CSS files, Live Server detects that the HTML structure hasn't changed. Instead of reloading the whole page (which resets forms, scroll position, and JavaScript memory), it replaces the <link rel="stylesheet"> tag in place with zero flicker!
📌 Key Takeaways
- The Live Server extension automates the code-save-refresh feedback loop.
- It injects a lightweight WebSocket client script before
</body>to listen for reload triggers. - HTML changes trigger a full page refresh; CSS changes are hot-swapped in place without losing scroll state.
- Always open your project as a folder (Open Folder) so Live Server establishes the proper root path.
- Customize the port, target browser, and root folder via VS Code's
settings.json.