端口与 Web 预览插件

最近更新时间:2026-05-19 18:07:22

我的收藏

概述

端口插件用于查看与管理工作空间内的端口,并提供预览入口与访问权限设置。
静态网页如何预览
可使用 Live Server 插件,请参考 快速预览静态网页

一、如何打开

1)打开端口插件

在左侧工具栏点击 「端口插件」 图标,面板会展示当前已识别的端口卡片(端口号、状态、进程信息等)。


2)打开 Web 预览

在端口卡片中点击 「查看预览」,会自动打开 Web 预览窗口并加载该端口页面。


二、端口卡片信息说明

端口卡片会展示以下信息,通常无需手动查询:
端口号:服务监听的端口。
状态:端口是否正在使用。
PID:关联进程 ID,用于定位与排查。
进程名称:显示规则见 八、插件按钮功能提示。

三、端口常用操作

端口卡片右侧提供常用操作按钮:

1)关闭端口

用于终止关联进程并释放端口(如端口冲突、需要重启服务)。


2)在浏览器中打开

在本地默认浏览器打开该端口页面,便于使用浏览器开发者工具调试。


3)复制分享链接

复制端口访问链接(请确保对应服务已启动)。


4)查看预览

在右侧打开 Web 预览窗口并加载该端口页面。


四、端口访问权限设置

您可以切换端口链接的可访问范围:
公开(默认):链接可被外部访问(需服务已启动),适合对外展示。

仅自己可见:仅当前账号可访问(需服务已启动),适合隐私场景。


五、Web 预览

Web 预览用于在工作空间内快速查看页面效果。

1)切换预览端口

在 Web 预览窗口顶部点击 「端口」 下拉框,选择目标端口即可切换。

2)工具栏按钮说明


按钮
作用


在本地浏览器打开预览(可配合开发者工具)



后退(上一页)


前进(下一页)


刷新预览


显示当前预览端口号


显示预览地址(可复制)


打开帮助文档


切换桌面/手机视图


生成二维码,在手机查看
提示
需要深入排查问题时,优先使用 「在本地浏览器打开」,结合 Network/Console 等工具分析请求与报错。

六、插件显示端口范围

端口插件可识别并展示 0~80000 范围内的端口。

七、停止端口插件扫描

1. 打开命令面板:
MacCommand + Shift + P
WindowsCtrl + Shift + P
2. 输入 SOP PORT,选择 Port management Stop Scan


八、插件按钮功能提示

将鼠标悬停在插件任意按钮上约 3 秒,会显示该按钮说明。


九、插件进程名称组成规则

端口卡片中的“进程名称”由以下规则生成:
已配置预览配置文件(preview.yml:显示为 [preview.yml 的 name] 进程名称

未配置 preview.yml:显示为 [未命名] 进程名称