vscode如何运行HTML并查看源码_vscode运行HTML同时查看源代码的方法

安装 Live Server 插件后，右键 HTML 文件选择 Open with Live Server 即可在浏览器预览，同时在 VSCode 中实时编辑源码，修改保存后浏览器自动刷新，左侧文件栏和编辑器始终显示原始代码，便于开发。

在 VSCode 中运行 HTML 并同时查看源码，其实不需要复杂的配置。VSCode 本身是一个代码编辑器，并不直接运行网页，但你可以通过插件或浏览器配合来实现快速预览和源码查看。

1. 安装 Live Server 插件

这是最常用的方法，能让你在浏览器中实时预览 HTML 页面，同时保留源码编辑能力。

• 打开 VSCode，点击左侧活动栏的扩展图标（或按 Ctrl+Shift+X）
• 搜索 Live Server
• 找到由 Ritwick Dey 开发的 Live Server，点击安装

2. 使用 Live Server 运行 HTML

安装完成后，操作非常简单：

• 打开一个 HTML 文件（例如 index.html）
• 右键点击编辑器中的代码区域，选择 Open with Live Server
• 浏览器会自动打开并显示页面内容，地址通常是 http://127.0.0.1:5500

此时你在 VSCode 中修改代码并保存，浏览器会自动刷新，实时看到效果。

3. 同时查看源码的方法

你可以在编辑器中继续查看和编辑源码，无需切换工具。

• VSCode 左侧就是你的项目文件和源代码
• 浏览器中按 F12 可查看页面的 DOM 结构（注意：这是渲染后的结构，不是原始源码）
• 原始 HTML 源码始终在 VSCode 中可见，可随时修改

4. 快捷操作建议

• 给常用 HTML 文件设置标签页常驻，方便快速切换
• 使用 Ctrl+S 保存后，浏览器自动更新
• 可在 VSCode 设置中开启自动保存：File → Auto Save

基本上就这些。Live Server 让你在写代码的同时，拥有类似本地服务器的预览环境，开发 HTML 更高效。源码始终在编辑器里，想看就看，不用导出或打包。