GitHub Copilot 入门：diff、终端、浏览器协同用法

GitHub Copilot 入门：diff、终端、浏览器协同用法 | 前端进阶之旅

Full translation

完整中文译文

当一个 Agent 修改了你的代码时，你需要对它进行审查、运行，然后看看发生了什么。好消息是：现在你在 GitHub Copilot 应用里就能完成这三件事。

以前，做这三件事意味着你必须在编辑器、终端窗口和网页浏览器之间来回切换。但当这些步骤作为 Copilot 应用内置的面板并排显示时，审查 Agent 的工作就变得非常简单了。

让我们来走一遍这个应用中的各个面板，以及如何用它们来完成 AI 编码的闭环。

diff 面板（diff 是变更前后的对比）会精确显示哪些行被新增、删除或修改，新增内容用绿色高亮，删除内容用红色高亮。

这给了你完全的透明度，让你选择接下来怎么做。你可以接受变更、留下评论，或者让 Copilot 进行修改。你完全掌控，可以做出最终决定。

阅读代码是好的，但运行它更好。你可以直接在 Copilot 应用会话内的终端面板中运行命令。如果看起来令人生畏，别担心。你大多数时候只是运行项目本身的命令并读取结果。

你可以手动运行代码，也可以把它配置为脚本（通过 Run 按钮来执行）。假设你正在做一个网站，下面是它如何工作的示例：

添加开发服务器脚本，打开 client 文件夹然后运行 npm run dev。

点击 Run 启动网站服务器。

你可以同时打开多个终端窗口，这样就能在它们之间切换并持续运行命令。

对于任何有用户界面的东西，浏览器面板都完成了最后的闭环。还是以我们的网站为例：这个面板意味着你可以打开它，像真正使用网站一样测试你的新功能。

如果你想继续迭代，你可以使用 Pick & Polish 工具选择一个元素，然后用 Agent 来调整它。

要查看修复了什么，你可以在完成修改后再次运行开发服务器脚本。

现在你已经审查了 diff，在终端中启动了项目，在浏览器中查看了结果，并迭代直到它成为一个可用的功能。一旦你达到了想要的状态，你可以直接从 Copilot 应用接受变更并创建 Pull Request。从一个地方完成整个闭环意味着不需要切换标签页、不需要切换应用、也不会迷失位置。

将审查、运行和预览并排放置，让 Agent 生成的变更从令人恐惧变得令人安心，因为你能够证明你合并的代码是可以工作的。

这些内置面板回答了在接受一个 Agent 的工作之前你应该始终问自己的三个重要问题。

它真的能工作吗？

在接受 Agent 生成的代码之前跑一遍这个清单，可以帮助你理解发生了什么变更以及它是否按你想要的方式运行，让你始终保持掌控。✨

试试 GitHub Copilot 应用 >

资深 AI 开发者工具倡导者

在受控的离线评估中，HydraFusion 的选择性编码工作流在降低估算工作流成本的同时，达到了或超过了被评估的 Opus 5 基线水平。现已在 GitHub Copilot 中作为研究预览版发布。

了解如何在 GitHub Copilot 应用中并行运行多个 Agent，体验那种从恐惧到强大的转变时刻。

从循环工程到 Harness、Squads 和开放权重，GitHub Podcast 解析了出现在开发者对话中的 AI 术语。