波仔
🧡 第十二章 实战项目1：Chrome扩展
📄 一句话概括

调试就是【看对地方】：五种症状各有一个先看的地方；先刷新再怀疑、报错读第一行、把报错整段贴给它。

📝 本节和前面几节的关系

上一节把功能一个个做出来了；这一节讲做出来不生效时怎么办。

一、五种症状，五个先看的地方

改了代码没反应 → 扩展页点【重新加载】，再刷新网页。 点图标没反应 → 右键图标，检查弹出式窗口。 页面里没动静 → F12 打开 Console 看报错。 后台逻辑不动 → 扩展页点 service worker 看日志；权限不足 → 回去查 manifest。

二、三条经验

一、先刷新再怀疑——改完不重新加载，看什么都是旧的。 二、报错读第一行——第一行是结论，后面是推理过程。 三、把报错整段贴给它——别只贴一句【报错了】。

三、为什么要把报错给足

上下文给多少，它就只能在多少里找答案（第 6.2 节）。 只贴一句【报错了】，它只能猜；把整段报错和前因后果贴上去，它才可能一次改对。 这是省钱也是省时间：猜错一轮的成本，比复制粘贴一次高得多（第 10.2 节）。

四、什么时候该停下

同一个问题它给到第三版差不多的方案 → 该停了（第 10.5 节）。 越改越乱，修一处坏一处 → 说明方向错了，退回上一个能跑的状态。 退回的底气来自 git：每一次跑通都存一次档（第 4.4 节）。

五、动手 Demo：Phase 4——调试技巧

下面把五种症状与各自【先看哪里】排开。

TH([u"症状", u"先看哪里"], [30, 48])
T([u"改了代码却一点反应没有", u"扩展页点【重新加载】，再刷新网页"], [30, 48])
T([u"提示权限不足", u"回去检查 manifest 里的 permissions"], [30, 48])

实跑输出：

--------------------------------------------------------------------
Phase 4——调试技巧
--------------------------------------------------------------------

扩展的调试入口只有几个，**记住【什么症状先看哪里】就够了**：

  症状                       先看哪里
  ---------------------------------------------------------------
  改了代码却一点反应没有     扩展页点【重新加载】，再刷新网页
  点图标没反应               右键图标 → 检查弹出式窗口
  页面里没动静               F12 打开 Console，看有没有报错
  后台逻辑不动               扩展页点 service worker，看它的日志
  提示权限不足               回去检查 manifest 里的 permissions

三条经验，比表格更值钱：

    ① **先刷新再怀疑**：改完代码不重新加载，看什么都是旧的
    ② **报错读第一行**：第一行是结论，后面是推理过程
    ③ **把报错整段贴给它**：别只贴一句【报错了】——
       上下文给足，它才能一次改对（第 6.2 节）

三条经验：先刷新再怀疑、报错读第一行、把报错整段贴给它。 只贴一句【报错了】，它只能猜；上下文给足，才有可能一次改对。

30 秒实验

  1. 故意把 manifest 里一个字段改错，按对照表定位一次，记下你实际看了几个地方。
  2. 下一次报错时，把整段报错连同上一步做了什么一起贴给它，对比一下它改对的轮数。

常见误区

  1. 改了代码不重新加载就开始怀疑代码。先刷新，再看别的。
  2. 只贴一句【报错了】。它看不到报错内容，只能猜——猜错一轮更贵（第 10.2 节）。
自测三问（点开对答案） 1. 【改了代码却一点反应没有】先看哪里？ —— 扩展页点【重新加载】，再刷新网页。 2. 报错时该怎么贴给它？ —— 整段报错连同上一步做了什么一起贴，别只贴一句报错了。 3. 什么信号说明该停下退回？ —— 它给到第三版差不多的方案，或者越改越乱、修一处坏一处。

相关笔记