跳到主要内容

端口与 Web 预览插件

端口插件是集成端口管理与预览控制的工具，支持端口关闭、多场景预览、权限设置等功能，Web 浏览功能作为预览辅助需通过端口插件触发。以下为详细功能与操作指南：

一、插件及 Web 浏览功能打开方式​

（一）端口插件​

点击左侧工具栏 「端口插件」 图标打开，面板自动展示当前项目已启动的端口卡片，包含端口号、状态、关联进程信息（PID、进程名称）及操作按钮，直观呈现端口动态。

（二）Web 浏览功能​

通过端口插件触发：在端口卡片中点击 「查看预览」 按钮，自动打开 Web 浏览窗口并加载该端口预览效果。

二、核心功能与操作指南​

（一）端口基础信息展示​

插件面板自动显示关键信息，无需手动查询：

（二）端口操作功能​

每个端口卡片旁设有操作按钮，鼠标悬停 3 秒可查看提示，具体如下：

  • 关闭端口：点击 「关闭」 按钮，终止关联进程，释放端口资源（适用于端口冲突或重启服务）。

  • 在浏览器中打开：点击 「在浏览器打开」 按钮，本地默认浏览器自动打开端口预览页面，支持结合开发者工具调试。

  • 复制分享链接：点击 「复制分享链接」 按钮，快速复制端口访问链接（需确保进程已启动）。

    )

  • 查看预览：点击 「查看预览」 按钮，右侧 「Web 浏览插件」 自动打开并加载该端口预览效果。

（三）端口访问权限设置​

通过按钮调整端口访问范围：

  • 公开（默认状态）：端口链接可被外部访问（需对应服务已启动），适合展示项目效果。

  • 仅自己可见：端口链接仅当前账户可访问（需对应服务已启动），保障隐私与安全。

（四）Web 浏览功能说明（预览辅助）​

1.端口切换​

在 Web 浏览窗口顶部点击 「端口」 框，从下拉列表选择目标端口，切换预览内容。

2.预览窗口功能​

提供丰富辅助功能，优化查看体验：

功能按钮​作用​
在本地浏览器打开预览，支持使用浏览器开发者工具调试
回退到上一浏览页面（类似浏览器后退）
前进到下一浏览页面（类似浏览器前进）
手动刷新预览内容，适用于自动更新失效时
显示当前预览的端口号，方便核对配置是否正确
显示预览地址，支持复制后在其他工具中使用
打开预览功能帮助文档，获取更多操作指引
切换手机、桌面端视图，适配不同设备尺寸预览
扫描二维码，在手机上查看预览效果

通过预览功能可实时验证项目效果，减少试错成本。如需深入调试，推荐使用 「在本地浏览器打开」 结合开发者工具分析页面结构与网络请求。

三、插件显示端口范围​

支持显示的端口范围为 0～80000，覆盖主流项目开发常用端口。

四、停止端口插件扫描​

按系统快捷键打开命令面板：

  • Mac：command + shift + p
  • Windows：ctrl + shift + p

输入 “SOP PORT”，选择 Port management Stop Scan 选项停止扫描。

五、插件按钮功能查看​

将鼠标悬停在插件任意按钮上保持 3 秒，自动显示该按钮的功能介绍，无需记忆图标含义。

六、插件进程名称组成规则​

进程名称由两部分组合显示：

  • 已配置预览配置文件（preview.yml）：格式为 [预览配置文件 name 字段名称] 进程名称。

  • 未配置预览配置文件：格式为 [未命名] 进程名称。