端口与 Web 预览插件
概述
端口插件用于查看与管理工作空间内的端口，并提供预览入口与访问权限设置。
静态网页如何预览
可使用 Live Server 插件，请参考 快速预览静态网页。
一、如何打开
1）打开端口插件
在左侧工具栏点击 「端口插件」 图标，面板会展示当前已识别的端口卡片（端口号、状态、进程信息等）。
2）打开 Web 预览
在端口卡片中点击 「查看预览」，会自动打开 Web 预览窗口并加载该端口页面。
二、端口卡片信息说明
端口卡片会展示以下信息，通常无需手动查询：
- 端口号：服务监听的端口。
- 状态：端口是否正在使用。
- PID：关联进程 ID，用于定位与排查。
- 进程名称：显示规则见 八、插件按钮功能提示。
三、端口常用操作
端口卡片右侧提供常用操作按钮：
1）关闭端口
用于终止关联进程并释放端口（如端口冲突、需要重启服务）。
2）在浏览器中打开
在本地默认浏览器打开该端口页面，便于使用浏览器开发者工具调试。
3）复制分享链接
复制端口访问链接（请确保对应服务已启动）。
4）查看预览
在右侧打开 Web 预览窗口并加载该端口页面。
四、端口访问权限设置
你可以切换端口链接的可访问范围：
- 公开（默认）：链接可被外部访问（需服务已启动），适合对外展示。
- 仅自己可见：仅当前账号可访问（需服务已启动），适合隐私场景。
五、Web 预览
Web 预览用于在工作空间内快速查看页面效果。
1）切换预览端口
在 Web 预览窗口顶部点击 「端口」 下拉框，选择目标端口即可切换。
2）工具栏按钮说明
| 按钮 | 作用 |
|---|---|
 | 在本地浏览器打开预览（可配合开发者工具） |
 | 后退（上一页） |
 | 前进（下一页） |
 | 刷新预览 |
 | 显示当前预览端口号 |
 | 显示预览地址（可复制） |
 | 打开帮助文档 |
 | 切换桌面/手机视图 |
 | 生成二维码，在手机查看 |
小提示
需要深入排查问题时，优先使用 「在本地浏览器打开」，结合 Network/Console 等工具分析请求与报错。
六、插件显示端口范围
端口插件可识别并展示 0～80000 范围内的端口。
七、停止端口插件扫描
- 打开命令面板：
- Mac：
Command + Shift + P - Windows：
Ctrl + Shift + P
- Mac：
- 输入
SOP PORT，选择Port management Stop Scan。
八、插件按钮功能提示
将鼠标悬停在插件任意按钮上约 3 秒，会显示该按钮说明。
九、插件进程名称组成规则
端口卡片中的“进程名称”由以下规则生成：
- 已配置预览配置文件（
preview.yml）：显示为[preview.yml 的 name] 进程名称。
- 未配置
preview.yml：显示为[未命名] 进程名称。