<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Live Preview &#8211; About Things | A Hans Scharler Blog</title>
	<atom:link href="https://nothans.com/tag/live-preview/feed" rel="self" type="application/rss+xml" />
	<link>https://nothans.com</link>
	<description>Life, Comedy, Games, Tech, Marketing, and Community</description>
	<lastBuildDate>Wed, 05 Aug 2026 18:45:13 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://i0.wp.com/nothans.com/wp-content/uploads/2023/02/cropped-settings.png?fit=32%2C32&#038;ssl=1</url>
	<title>Live Preview &#8211; About Things | A Hans Scharler Blog</title>
	<link>https://nothans.com</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">114568856</site>	<item>
		<title>Live Preview of HTML Files in Visual Studio Code</title>
		<link>https://nothans.com/live-preview-of-html-files-in-visual-studio-code</link>
					<comments>https://nothans.com/live-preview-of-html-files-in-visual-studio-code#respond</comments>
		
		<dc:creator><![CDATA[Hans Scharler]]></dc:creator>
		<pubDate>Wed, 05 Aug 2026 18:45:07 +0000</pubDate>
				<category><![CDATA[Software]]></category>
		<category><![CDATA[Live Preview]]></category>
		<category><![CDATA[Visual Studio Code]]></category>
		<guid isPermaLink="false">https://nothans.com/?p=5560</guid>

					<description><![CDATA[]]></description>
										<content:encoded><![CDATA[
<p>This post started as a <a href="https://nothans.com/til-how-to-use-live-server-in-visual-studio-code">TIL</a>: I was building a little arcade game called <a href="https://shoot.nothans.com/">Shoot</a>, opened the index.html and the Web Audio API refused to load a single sound because of CORS. (A shooter with no shooting sounds is mostly just pointing.) The fix was a local development server, and the tool I found was the Live Server extension for Visual Studio Code.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img data-recalc-dims="1" fetchpriority="high" decoding="async" width="750" height="460" data-attachment-id="4817" data-permalink="https://nothans.com/til-how-to-use-live-server-in-visual-studio-code/image-47" data-orig-file="https://i0.wp.com/nothans.com/wp-content/uploads/2024/10/image.png?fit=971%2C595&amp;ssl=1" data-orig-size="971,595" data-comments-opened="0" data-image-title="Live Preview extension for Visual Studio Code" data-image-description="" data-image-caption="" data-large-file="https://i0.wp.com/nothans.com/wp-content/uploads/2024/10/image.png?fit=750%2C460&amp;ssl=1" src="https://i0.wp.com/nothans.com/wp-content/uploads/2024/10/image.png?resize=750%2C460&#038;ssl=1" alt="" class="wp-image-4817" srcset="https://i0.wp.com/nothans.com/wp-content/uploads/2024/10/image.png?w=971&amp;ssl=1 971w, https://i0.wp.com/nothans.com/wp-content/uploads/2024/10/image.png?resize=300%2C184&amp;ssl=1 300w, https://i0.wp.com/nothans.com/wp-content/uploads/2024/10/image.png?resize=768%2C471&amp;ssl=1 768w, https://i0.wp.com/nothans.com/wp-content/uploads/2024/10/image.png?resize=750%2C460&amp;ssl=1 750w" sizes="(max-width: 750px) 100vw, 750px" /></figure>
</div>


<p>That problem I had hasn&#8217;t changed, but the best answer has. Live Server went years without maintenance, and in early 2026 a critical security vulnerability in its dev server was publicly disclosed before it finally got a patch. Meanwhile, Microsoft now ships a first-party extension that does the same job: <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server">Live Preview</a>. Same right-click workflow, actively maintained, and it&#8217;s what I use now.</p>


<h2 class="wp-block-heading" id="why-you-need-a-local-server-at-all">Why you need a local server at all</h2>


<p>Open an HTML file from disk and the browser loads it with a&nbsp;<code>file://</code>&nbsp;address. That works right up until your page tries to fetch a file, load a JavaScript module, or play audio. Then the browser blocks it, for security reasons. Your code isn&#8217;t broken; it just needs to be served over HTTP like a real website. A local development server does exactly that, on your own machine, at an address like&nbsp;<code>http://127.0.0.1:3000</code>.</p>


<h2 class="wp-block-heading" id="the-quick-answer-live-preview">The quick answer: Live Preview</h2>


<p><a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server">Live Preview</a>&nbsp;is Microsoft&#8217;s extension for exactly this.</p>



<ol class="wp-block-list">
<li>Open the Extensions panel (<code>Ctrl+Shift+X</code>), search for <strong>Live Preview</strong> by Microsoft, and install it.</li>



<li>Open your HTML file.</li>



<li>Right-click in the editor and choose <strong>Show Preview</strong>.</li>
</ol>



<p>You get a live browser panel right inside VS Code, and it refreshes automatically as you type. When you want the full browser experience (developer tools, real window size), use&nbsp;<strong>Show Preview in External Browser</strong>&nbsp;instead, or just open the&nbsp;<code>http://127.0.0.1:3000</code>&nbsp;address it prints.</p>


<h2 class="wp-block-heading" id="what-happened-to-live-server">What happened to Live Server</h2>


<p>The original version of this post recommended the Live Server extension by Ritwick Dey, and 80 million installs say I wasn&#8217;t alone. It still works, and the workflow is nearly identical: right-click the file,&nbsp;<strong>Open with Live Server</strong>, or hit the&nbsp;<strong>Go Live</strong>&nbsp;button in the status bar.</p>



<p>But the extension went years without maintenance, and in February 2026 a critical vulnerability (CVE-2025-65717) was publicly disclosed: visit the wrong webpage while Live Server is running, and that page can quietly pull files off your machine through the extension&#8217;s local server. Source code, config files, <code>.env</code> secrets, whatever the server can reach. Security researchers had been trying to reach the maintainer since mid-2025; the patch (version 5.7.10) landed only after the story went public. If you have Live Server installed, make sure it&#8217;s updated to 5.7.10 or later. Better yet, switch.</p>


<h2 class="wp-block-heading" id="no-extension-at-all">No extension at all</h2>


<p>If you&#8217;d rather not install anything, you already have a server or two on your machine:</p>



<pre class="wp-block-code"><code># Node
npx serve

# Python
python -m http.server 8000</code></pre>



<p>Run either one in your project folder and open the address it prints. You lose the auto-refresh, but for a quick test it&#8217;s hard to beat.</p>


<h2 class="wp-block-heading" id="debugging">Debugging</h2>


<p>Once the page is served, the browser&#8217;s developer tools (<code>F12</code>&nbsp;or&nbsp;<code>Ctrl+Shift+I</code>) work exactly as you&#8217;d expect: console, breakpoints, network tab, the works.</p>



<p>The original post suggested installing the &#8220;Debugger for Chrome&#8221; extension to debug from inside VS Code. You don&#8217;t need it anymore; JavaScript debugging is built into VS Code now. Create a&nbsp;<code>launch.json</code>&nbsp;with a&nbsp;<code>chrome</code>&nbsp;or&nbsp;<code>msedge</code>&nbsp;configuration pointed at your local server URL, hit F5, and set breakpoints right in the editor.</p>


<h2 class="wp-block-heading" id="the-game-by-the-way">The game, by the way</h2>


<p>Shoot shipped with sound! Play it here: <a href="https://shoot.nothans.com/">https://shoot.nothans.com/</a></p>
]]></content:encoded>
					
					<wfw:commentRss>https://nothans.com/live-preview-of-html-files-in-visual-studio-code/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">5560</post-id>	</item>
	</channel>
</rss>
