"服务器起来了吗?它跑在哪个端口来着?" 当你同时在 3000 上跑一个 API、在 5173 上跑前端、在 5432 上跑数据库时,这个问题很快就让人厌烦。端口标签一眼就能回答:本地端口的实时列表、哪些真正在监听、上面跑着什么,以及一个一键在浏览器中打开任意端口的按钮。
从底部面板把它打开,即 端口(电源插头图标)。关于它与终端及其他标签的关系,见底部面板总览。
列表有一个表头行——Port、Status、Process / Label——以及每个被跟踪端口一行:
每行右侧有两个按钮:一个地球和一个 ✕(下面会讲)。如果你从没跟踪过任何端口,看到的会是一个空状态——一个天线图标、"No ports forwarded",以及一个 Add Port 按钮让你开始。
点击任意行上的地球图标,LingCode 就会在你的默认浏览器中打开 http://localhost:<端口>。悬停时会显示它将要打开的确切 URL,所以不会搞错去向。这是日常操作:启动你的开发服务器,看着那一行翻成绿色 Active,点击地球,你就看到了你的应用——不用敲任何 localhost: 开头的东西。
点击标签工具栏里的 +(它会变成一个 ✕ 用于取消),会出现一个已经聚焦的添加行。输入一个端口号(该字段是数字型——在它是一个有效整数之前,Add 按钮保持禁用),以及一个可选的标签(Label)来记住它的用途("API"、"Storybook")。按回车或点击 Add。该端口会加入列表,并和其他端口一样获得一个实时状态点。
添加端口适用于那些你想在它起来之前就盯着的东西——把 3000 钉住并标上 "API",你就能在服务器一启动的那一刻看到点变绿,而不用自己去轮询它。要停止跟踪某个端口,点击它那一行上的 ✕。
你不必手动添加每一个端口。这个标签打开期间会留意正在监听的端口并把它们呈现出来,而从 devcontainer 转发的端口会带着 "devcontainer" 标签出现。手动的 Add 流程是为那些你提前就关心、或想加个友好标签的端口准备的;其余的往往会自己冒出来。