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