浏览器、截图与图片协作

返回 Codex 教学总目录

目标与准备

本段提到的教学与资源: 第一个专案

步骤 1：选择浏览器入口

Codex 桌面可用内建浏览器共同查看网页，从工具列、网址连结或 @Browser 指定使用；macOS 的开启快捷键是 Cmd＋Shift＋B，Windows 是 Ctrl＋Shift＋B。Linux 先依实际桌面版本的工具列与功能提供情形确认，不假定任何发行版快捷键都相同。内建 Browser 不提供给 CLI／IDE；这两个入口若另有已设定的浏览器 MCP，应先按 MCP 教学验证，否则自行开网页并附截图。

内建浏览器有独立的个人资料与登入状态，不会自动接管一般 Chrome／Edge 的分页。要用平常浏览器的既有登入页，依官方浏览器扩充功能的连线流程操作，不把两个环境混在同一份验收。网站权限允许互动，不代表页面里的指令可信；只处理你提出的工作，不因页面要求就上传其他专案档案或更改帐号权限。

步骤 2：启动与确认正确页面

先在 expected 根目录跑原三项测试，确认材料正常；再用下列平台命令启动仅限本机的静态伺服器，这个终端机保持开启。若 4173 已被使用，选另一个未使用 port，同步修改后续网址，不停止其他人的服务。这是自己电脑的练习预览，不是公开网站部署。

node --test core.test.mjs

py -m http.server 4173 --bind 127.0.0.1

python3 -m http.server 4173 --bind 127.0.0.1

打开 http://127.0.0.1:4173，确认标题、New task 表单及 Show 筛选都出现，新增 Build 与 Read the AGENTS.md rules，将 Build 设为完成。预期 1 active／2 total。不同浏览器设定档可能各自有 localStorage，因此用同一个设定档做前后比较；若已有资料，使用独立练习设定档或另一个 port，不清除整个日常浏览器的储存内容。

若 Codex 执行在另一台远端主机，127.0.0.1 指的是那台主机；ChatGPT 网页的云端工作也不能直接把自己的 localhost 当成你的电脑。先核对程式与浏览器所在主机，再使用环境正式提供的预览或转送方式。手机可透过 Remote 检视连线电脑的工作，但本篇没有教你把练习伺服器公开到网际网路，详见跨装置工作。

步骤 3：准备截图与文字条件

在浏览器的响应式模式依序使用 390×900 与 1280×900 CSS 像素，固定缩放与相同两笔资料。用 Windows 截图工具、macOS 区域截图，或 Linux 所提供的截图程式只撷取页面内容，保存 before-390.png 与 before-1280.png。截图档本身的像素可能受装置缩放影响，因此把 CSS viewport、缩放比例、浏览器版本与日期另外写在文字纪录，不单靠 PNG 尺寸猜测。

# Visual check
Route: http://127.0.0.1:4173
Browser / version:
OS / date:
CSS viewport: 390 x 900, then 1280 x 900
Zoom:
State: Build complete; Read the AGENTS.md rules active
Before images:
Requested change: reduce header bottom spacing from 36px to 24px
Preserve: task data, labels, focus outline and control sizes
After images:
Behavior checks:
Unverified platforms:

截图之前先移开帐号区、私人分页或通知，必要时重新撷取较小范围。不要拿另一个平台的画面改一个图说就宣称已测该平台；图片含个人资料时由你先遮蔽再提供。概念图与生成图片可帮助说明外观方向，但应写「示意图」，不能用它代替实际操作结果。采用别人的图片时保存来源、作者、授权与必要署名，图说与替代文字仍用文章的当前语言。

步骤 4：用标注要求一个具体修改

先在 Codex 桌面版开启练习专案与一个新任务；走 CLI 路线则在练习专案目录执行 codex 并开始新的互动工作阶段。桌面内建浏览器若有 Annotation mode，开启后选取标题与表单之间的区域，留言说明要缩小哪一段间距，再回到主任务送出要求。若没有标注入口，附上两张 before 图并指出标题下方的空白，同样有效；注解保存不代表模型已开始修改，仍须送出任务。不要只写「更好看」，把要改的值、保留项目及两种宽度的验收说清楚。

Use the attached before screenshots and the local practice page at http://127.0.0.1:4173.
In style.css, reduce the existing header bottom margin from 36px to 24px.
Keep the task data, labels, responsive form layout, 46px controls and visible focus outline unchanged.
Verify the actual page at 390x900 and 1280x900 CSS pixels with the same two tasks.
Check no horizontal page overflow, usable filtering, keyboard focus and persistence after reload.
Report the file diff and before/after evidence. If the browser is unavailable, identify that limitation instead of claiming visual verification.

header { margin-bottom: 24px; }

参考修改只把原本 36px 改为 24px，不追加一份可能被后面 CSS 盖掉的同名规则。完成后查看 diff，确认 core.mjs 与 app.js 没有被顺便重构，也没有把焦点外框移除。桌面开发模式或浏览器检查工具可查看 header 的实际 computed margin-bottom；这种量测比只凭两张图的相似程度更明确。没有工具可量测时记录限制，仍可人工对照。

在自己的练习页开启浏览器开发者工具，选 Console，先确认目前页面网址，再执行下面的唯读量测。修改前 headerMarginBottom 应为 36px，修改后为 24px；两个尺寸都要分别记录。若 header 不存在会显示 null，代表应先核对页面与元素，不能当成 0px 或通过。

(() => {
  const header = document.querySelector('header');
  const page = document.documentElement;
  return {
    url: location.href,
    viewportWidth: page.clientWidth,
    headerMarginBottom: header ? getComputedStyle(header).marginBottom : null,
    horizontalOverflow: page.scrollWidth > page.clientWidth,
  };
})()

horizontalOverflow 预期为 false，但它只检查整页宽度，不能证明每个按钮都可操作、文字都可读或焦点可见。量测后仍依下一步做键盘、长标题与保存测试；没有实际开启 Console 的环境只记未量测，不把这段程式的预期值抄成观察结果。 数值定义见 getComputedStyle 与 scrollWidth。

步骤 5：回到画面验收与恢复

重新整理后在同两个 viewport 保存 after 图，检查间距缩小、表单可输入、筛选 Active 只剩一笔、Tab 焦点可见，以及重新整理后原两笔资料还在。加入一笔接近 100 字元的长标题，确认文字能换行且页面不横向溢出；这是边界案例，不能只看短标题正常就通过。最后再跑 core.test.mjs，程式测试与画面验收分两栏记录。

画面没变先查网址、伺服器目录与 CSS 是否真正保存，再确认快取或覆盖规则；空白页先看模组是否透过 HTTP 正确载入，不能拿 file:// 造成的模组限制当成程式回归。浏览器不能操作时，回报已完成程式修改但未做画面确认，不生成一张漂亮的 after 图充当证据。要还原只将本次 margin 值改回 36px，核对 diff 后重读页面；按 Ctrl＋C 停止自己这个练习伺服器。

完成纪录应能回答：哪个真实页面、哪两个尺寸、改哪个档案、哪些行为已测、哪些平台未测。读者自行截图与文章已有参考图分开保存，图说标日期与来源。内建浏览器的开启、标注与权限依官方文件查证；本文不宣称已操作你的帐号或所有平台。下一步读排程与自动化，理解背景执行需要哪些环境。

返回 Codex 教学总目录

阅读完整文字说明

Reference to Change to Compare

• AI 工具
• 教程
• Codex