Gemini Canvas页面按钮没反应怎么办？控制台、代码差异与最小修复

Canvas生成的小页面看起来正常，点按钮却没反应，反复要求“修好”可能带来更多变化。Google提供Show console查看预览错误和日志，Code查看源码，Show recent changes检查差异。本文围绕一个练习用人均费用计算器，说明如何复现、定位、只改必要代码，再验证没有引入新问题。

第一步：保留当前版本与复现条件

在电脑登录gemini.google.com，打开已有Canvas聊天；新建练习时可在输入框下选择Add Files中的Canvas，再描述需求。现有应用调试应留在原聊天，先复制需要保留的代码与复现信息。Canvas修改自动保存，连续要求整页重写可能使你更难比较前后。

这是练习用人均费用计算器。预期总额120、人数3时显示40；人数0、空值或负数时显示输入提示。请先只读检查，不重写界面、不增加登录、数据库或AI功能。先列出需要我复现和提供的信息。

若实际不是计算器，把示例替换成自己的最小场景。记录输入值、点击哪个按钮、预期结果、实际现象和是否每次复现。不要只描述“坏了”，也不把不同按钮的多个问题一次混在一起；先选能稳定出现的一条路径。

第二步：打开Show console收集错误

在Canvas面板右上角点Show console，重复刚才操作，观察新出现的错误或日志。只复制与这次动作有关的内容，包括错误文字与可见位置；分享前去掉令牌、个人资料和不相关数据。没有日志并不表示业务逻辑正确，错误也可能是输入校验或事件绑定问题。

复现：总额120、人数3，点“计算”后结果区不变化。
控制台：粘贴这次操作新产生且已脱敏的实际错误；无新增则写无。
请区分已观察到的事实和待验证原因。先解释你准备检查的函数与事件绑定，不凭空编出控制台报错。

如果错误指向第三方资源加载，先核对资源能否访问，不直接删除所有相关功能。若是函数名或变量不存在，检查定义与调用位置。每次只针对有证据的一条原因修改，方便判断哪项变化产生效果。

第三步：用Code定位并限制修改范围

点面板右上角Code打开并编辑源码。你可直接改代码，也可让Gemini修改；使用Select & ask时，在面板右下选择区域，再描述只需修改的部分。区域选择是给上下文，不保证程序依赖只在那一块，因此仍要查看实际差异。

请只修复这次“计算无反应”的根因，保留现有布局和其他行为。人数必须是正整数，总额必须是有效非负数；无效输入显示文字提示，不输出Infinity或NaN。解释修改依据，列出实际改动，不添加网络请求或新的依赖。

这些输入规则是本练习的需求，不是Canvas强制规则。真实应用应先明确自己的合法范围，例如退款场景是否允许负金额。把业务规则说清楚比让模型自由“优化体验”更有助于控制调试范围。

第四步：查看Show recent changes

在Code中打开Show recent changes，比较本次改了哪些代码。检查是否只涉及计算与提示，是否顺手删掉了原有功能，或把测试数据写成固定答案。结果显示40不一定意味着计算正确，也可能只是把40写死；回看表达式与输入来源才能判断。

如出现与故障无关的大范围变动，要求解释后再决定保留，不继续在未知版本上叠加更多改动。Canvas文档的版本按钮与代码差异用途也不同，不把一个界面中的版本能力直接套用到所有内容类型。需要时保存当前源码作为独立备份。

第五步：用测试矩阵复查预览

人工回归：
120、3 → 40。
0、3 → 0。
120、0 → 人数提示。
120、空值 → 人数提示。
空总额、3 → 金额提示。
先输入无效值再改成120、3 → 错误提示清除并显示40。

逐项在预览操作，同时看控制台是否新增错误。本文测试矩阵是可自行执行的示例，未声称已亲测你的应用。至少再点一次其他原有按钮，确认修复没有破坏相关交互；如果只在第一次成功、第二次失败，应记录状态变化继续定位。

调试完成后再考虑分享。公开Canvas应用链接可能让持有链接者查看或修改关联数据，真实金额和个人资料不要当测试夹具。完成标准是原故障可解释、修改范围清楚、正常与边界输入都符合需求，不能只以“页面能打开”作为验收。

官方资料

资料核对日期：2026年11月6日。

• Google：Canvas编辑与调试