VSCode如何运行HTML网页？这四种方法最推荐-VSCode-PHP中文网

live server 是唯一能真正解决 html 预览问题的工具，因其通过 http:// 协议启动本地服务器，规避 file:// 协议下 fetch、模块导入、相对路径及 storage 等安全限制；必须安装 ritwick dey 原版插件、用“文件→打开文件夹”建立工作区、右键 html 文件启动，且不适用于 vite/webpack 或 .vue/.ts 项目。

vscode如何运行html网页？这四种方法最推荐

Live Server 插件是目前最可靠的选择，其他方式各有适用边界——别指望 VSCode 自己“运行” HTML，它只是编辑器，最终得靠浏览器渲染。

为什么直接双击或右键打开经常出错？

因为浏览器对 file:// 协议做了严格限制：fetch 本地 JSON、import ES 模块、XMLHttpRequest 加载同目录资源，全都会被拦住，报错类似 net::ERR_FILE_PROTOCOL 或 CORS error。这不是你代码写错了，是协议本身不支持跨文件资源加载。

常见误操作：

用 Edge 打开 file:// 地址，JS 被静默禁用（尤其 Windows 默认设置）
路径含中文或空格，某些旧版插件解析失败（虽 Live Server 已修复，但其他轻量方案可能挂）
以为“保存就生效”，结果刷新页面没变——其实是缓存或没触发重载

`Live Server` 怎么装、怎么用、怎么调端口？

装完插件后，关键不是点“Go Live”，而是确认你当前在编辑器里打开了某个 .html 文件——右键菜单才会有 Open with Live Server 选项。状态栏右下角的 Go Live 按钮也只对已打开的 HTML 文件生效。

默认启动地址是 http://127.0.0.1:5500/xxx.html，如果端口被占（比如另一个 Live Server 实例或 Python 的 http.server），会自动换端口并提示，但最好主动配：

打开 VSCode 设置（Ctrl+,），搜 liveServer.settings.port，填入想用的数字（如 3000）
想让局域网设备访问（比如手机连同一 Wi-Fi 查看效果），设 liveServer.settings.host 为 0.0.0.0
项目根目录不是当前文件所在目录？改 liveServer.settings.root，填相对路径如 "./src"

调试 JS 时，`launch.json` 必须改这三处

VSCode 默认的 Chrome 调试配置想找 http://localhost:8080，但 Live Server 启的是 http://127.0.0.1:5500，不改就断连。别抄网上旧配置，直接用这个最小可用版：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against Live Server",
      "url": "http://127.0.0.1:5500/index.html",
      "webRoot": "${workspaceFolder}",
      "file": "${workspaceFolder}/index.html"
    }
  ]
}

注意：