Chrome 更新 AI 编程指南，旧网页代码可按目录检查

Chrome 团队于 2026 年 11 月 10 日发布 Modern Web Guidance 1.0，为 AI 编程工具加入旧代码扫描与现代化指导，并在 11 月 13 日整理了上手资料。对维护网站、后台和聊天界面的开发者，这提供了一条从现有代码寻找改造机会的路径。从一个中文聊天输入框开始，可以看清怎样把“帮我优化页面”变成有具体位置、有浏览器依据、能逐项验收的小任务。

原创 AI 概念插画，表现网页代码检查流程。

[配图建议：检查灯照亮输入框的结构层，焦点边框与发送按钮清楚可见 + 蓝白与珊瑚色的立体科技编辑插画]

旧项目多了一个按目录寻找问题的入口

Modern Web Guidance 是一套供编程 Agent 调用的网页开发指南，把实现建议、最佳实践和浏览器兼容信息带进任务上下文。1.0 加入的现代化工作流，可以检查已有 HTML、CSS、JavaScript 和依赖声明，再让 Agent 根据项目情况处理发现。11 月 10 日的版本公告与 11 月 13 日的回顾对应同一个稳定版本。1.0 发布公告、11 月 13 日官方回顾

这很适合一个常见处境。团队的聊天输入框已经能用，但自增高、回车发送和样式适配经历了多次修改。有人希望减少布局计算，有人反馈中文输入偶尔提前发送，维护者又担心改动影响旧设备。此时，先把检查范围收在输入组件目录，比让 AI 从整个仓库自由发挥更容易判断结果。

官方工作流先用 legacy-scan 找候选，再由 Agent 阅读周边代码、核对规则适用条件，随后读取对应指南并实施改造。静态扫描覆盖的是带确定性规则的指南子集，结果需要进入上下文核对。它提供了明确的起点，覆盖范围则应随报告一起阅读。现代化工作流文档

把扫描范围缩到一个组件，改动与验证就能围绕同一段交互展开。 对小团队，第一轮可以只处理输入框自增高，等原有行为验证完成，再考虑下一项。

[配图建议：一个组件目录通向候选位置、上下文核对、指南与改动四个节点 + 简洁工程流程图]

同一个输入框，哪些发现值得继续查

自增高是文档里的一个具体例子。旧实现可能在每次输入时读取 scrollHeight，再写回高度。指南给出的现代路径是 field-sizing: content，同时设置合适的尺寸约束。对于多行输入框，固定横向宽度、合理的最小和最大高度，有助于避免输入第一字后宽度突变，或长消息把页面持续撑高。表单内容自适应指南

这也解释了为何还要让 Agent 读周边代码。同样出现 scrollHeight，可能服务于虚拟滚动，也可能只是输入框的高度补丁。工作流中的保留与排除条件，让 Agent 判断这次命中是否适用。已有兼容分支、组件库封装和全局样式，都可能改变改造方案。扫描后的核对流程

中文输入是同一交互里的另一项检查。用户按回车可能是在确认候选汉字，自定义发送监听需要考虑输入法组合状态。官方指南还讨论了 Safari 的事件顺序差异，并要求保留明确的提交按钮和可关联的标签。验收时应在实际目标浏览器里完成中文输入、确认候选和发送整条消息这段操作。输入法安全提交指南

这张表是本文建议的验证记录。它把代码变化对应到用户动作，便于发现“代码少了，但长消息不能正常滚动”这类回归。

[配图建议：同一输入框展示空白、中文候选确认、长消息三个状态 + 清楚标注交互条件的产品分镜]

指南按任务读取，浏览器范围随项目确定

指南数量增加之后，如何找到相关内容也会影响体验。Chrome 在 11 月 12 日公开了本地检索实现，采用搜索命令返回简短候选，再按标识读取所需指南。检索同时结合关键词与语义匹配，让明确的 API 名称和描述需求的短语都能参与查找。官方检索技术说明

对应到输入框任务，Agent 可以先搜索自动调整表单尺寸，再读取相关指南。开发者可以检查它实际采用了哪条建议，以及建议是否回答当前问题。任务上下文由这一轮需要的材料组成，后续换任务时再查找其他内容。

1.0 的另一个条件是兼容范围。项目由 Chrome、Edge、Firefox 等团队协作推进，指南带有 Baseline 与浏览器支持信息。选择实现时，仍需告诉 Agent 产品支持哪些版本、是否包含内嵌浏览器，以及哪些交互必须保持。版本公告中的跨浏览器设计

例如，自增高指南将新属性作为渐进增强处理。缺少支持时，表单可使用固定尺寸与内部滚动。如果你的产品要求旧浏览器也必须自动增高，就要将这个要求交给改造任务，并按指南选择回退策略。浏览器支持目标写清楚，AI 才能据此选择实现和回退。自增高指南的回退策略

[配图建议：一条组件需求先找到相关指南，再连向目标浏览器与回退路径 + 留白充分的技术示意图]

从一份扫描报告开始试用

官方提供交互式安装入口，也允许直接调用 CLI 搜索、读取和扫描。已有预览版用户可使用 update 更新。下面以项目中常见的组件目录名为例，路径需要换成自己的实际位置。官方仓库快速入门

npx modern-web-guidance@latest install
npx modern-web-guidance@latest legacy-scan src/components/chat --json
npx modern-web-guidance@latest search "auto growing textarea"
npx modern-web-guidance@latest retrieve form-fields-automatically-fit-contents

扫描前先保存当前可工作的代码版本，再把现有行为写进任务。例如，可以让 Agent 输出命中位置、核对结论及相关指南，并围绕聊天输入框给出小范围改造方案。产品要求可以写成下面这段话。

检查聊天输入框的旧写法，结合上下文核对扫描发现。保留中文候选确认、回车发送和换行约定，按项目的目标浏览器选择自增高方案，并列出需要验证的交互。

改完以后，重新扫描能帮助核对规则命中是否消失，项目已有测试则负责检查相关行为。还需要在浏览器里输入中文、粘贴长文本、清空内容并用键盘切换焦点。完整操作能暴露尺寸、状态和事件之间的连带影响。

试用成本要把指南读取、模型调用、代码审查和浏览器验证一起算进去。 官方公开评估及客户案例能提供观察方向，你的项目仍要用相同任务前后的操作结果判断收益。已有设计系统的团队，也应把组件规范交给 Agent 一并遵循。发布公告中的验证流程与评估范围

[配图建议：扫描报告、组件差异与浏览器操作记录并排呈现 + 克制的开发工作台插画]

今天先检查一个经常修改的输入框

维护现有网页、愿意检查代码差异的团队，可以从一个组件试用这套工作流。项目若受旧设备约束，先整理浏览器支持范围和必须保留的行为。今天可做的一步，是扫描聊天输入组件，挑一处经过上下文核对的发现，验证改动前后的完整交互。你的输入框目前最常遇到的是高度跳动、中文提前发送，还是键盘操作不顺？

[配图建议：只选中一个输入组件，旁边留下改造前后操作记录 + 蓝白简洁收尾插画]

资料核查于 2026 年 11 月 14 日，Asia/Shanghai。本文依据 Chrome 官方公告、技术说明、仓库与指南整理，属于近 7 天深读。命令与聊天场景为试用示例，本站未进行安装或性能实测。封面为原创 AI 概念图。