Live Server 使用指南：在 VSCode 里搭一个实时预览的本地开发服务器

Live Server 使用指南在 VSCode 里搭一个实时预览的本地开发服务器【免费下载链接】vscode-live-serverLaunch a development local Server with live reload feature for static dynamic pages.项目地址: https://gitcode.com/gh_mirrors/vs/vscode-live-serverLive Server 是 Visual Studio Code 的一款免费扩展它在本地启动一个带实时重载功能的开发服务器保存 HTML、CSS 或 JS 文件后浏览器自动刷新到最新状态。写静态页面、做演示、需要在手机上联调的前端开发者用它基本可以省去手动刷新的动作。安装扩展与首次预览先安装扩展按 CtrlP 打开命令面板输入ext install ritwickdey.liveserver或在扩展商店搜索 Live Server 后安装。安装后状态栏会出现 Go Live 按钮。打开一个包含 HTML 文件的文件夹用下面任意一种方式启动点状态栏的 Go Live在资源管理器中右键 HTML 文件选 Open with Live Server快捷键 AltL 再按 AltO 启动AltL 再按 AltC 停止命令面板输入Live Server: Open With Live Server。服务器默认运行在 5500 端口并自动打开系统浏览器。注意工作区里没有任何 .html 文件时状态栏按钮不可用需要走快捷键或命令面板。如果页面放在子目录里可以设置liveServer.settings.root例如/src把服务根目录指过去。 手机与多设备预览Live Server 监听局域网手机和电脑连在同一网络时可以直接访问在电脑上查 IPv4 地址Windows 打开 CMD 执行ipconfigLinux/macOS 在终端执行ifconfig记下形如 192.168.x.x 的地址在手机浏览器输入http://IP:5500端口就是 PC 端显示的端口号。如果访问不通检查liveServer.settings.host默认 127.0.0.1可换成 localhost以及网络设备是否允许同网段互通。更完整的步骤见 docs/faqs.md。 与 Chrome 调试器配合做断点调试只刷新页面往往不够调试 JS 逻辑时还需要断点。先安装 Debugger for Chrome 扩展再开启挂载liveServer.settings.ChromeDebuggingAttachment: true启动 Live Server 后在调试窗口选择 Attach to Chrome调试能力会注入到正在运行的浏览器窗口改完代码保存页面自动重载断点依然有效。⚠️ 踩坑端口占用与页面不刷新现象启动时提示端口被占用。可能原因5500 端口被其他程序占了。处理把端口设为 0让系统自动分配空闲端口liveServer.settings.port: 0新版在端口被占时也会自动回退到随机端口。现象保存文件后浏览器没有刷新。可能原因文件类型命中了 ignoreFiles 的默认忽略列表.vscode/**、**/*.scss、**/*.sass、**/*.ts或服务器状态已停止。处理按需删掉 docs/settings.md 中对应的忽略规则并确认状态栏仍是活动状态。现象服务器启动了但浏览器没自动打开。可能原因NoBrowser 被设为 true或默认浏览器路径不对。处理把liveServer.settings.NoBrowser改回 false或用liveServer.settings.CustomBrowser指定 chrome、firefox 等。源码与文档入口src/extension.ts扩展激活入口注册命令、菜单与状态栏。src/appModel.ts服务器生命周期与主逻辑启动、停止和页面路由都在这里。src/Config.ts配置项的读取与校验所有 liveServer.settings.* 配置在此落地。docs/settings.md全部配置项说明含默认值。docs/faqs.md常见问题含手机访问与项目级配置写法。从状态栏点一次 Go Live再改一行样式并保存浏览器会自动完成重载。如果今天只想试一小步就从打开一个带 index.html 的文件夹开始。【免费下载链接】vscode-live-serverLaunch a development local Server with live reload feature for static dynamic pages.项目地址: https://gitcode.com/gh_mirrors/vs/vscode-live-server创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考