Console：让代码把现场告诉你

先打开它

1. 在 Chrome 打开你要检查的网页。
2. Mac 按 ⌘ + Option + J；Windows 按 Ctrl + Shift + J。
3. 右侧或底部出现开发者工具，并自动进入 Console。
4. 找到最下方带 > 的输入行，输入 1 + 1，按回车。
5. 看到 2，说明你已经成功运行第一段 JavaScript。

不要只打印 data

console.log('准备发送的项目', project)
console.log('接口返回状态', res.status)
console.error('保存失败', error)

前面的中文标签告诉你日志来自哪个阶段。真实排查时按顺序编号也很好用：1. 点击后、2. 请求前、3. 响应后。

真实项目里已经有日志

manga_studio/canvas-v2/src/App.tsx 第 149–151 行只在第一次或每十次重试时打印警告：

if (attempt === 1 || attempt % 10 === 0) {
  console.warn('failed to notify frontend readiness', error)
}

它没有每次都刷屏，而是保留足够判断的信息。这比随处打印变量更有用。

动手练习在安全练习区打印数据

你的任务

项目实际有 5 个节点。把 nodeCount 从 3 改成 5，让第二行输出“节点数量 5”。

1. 在第 1 行找到 nodeCount: 3
2. 只把 3 改成 5
3. 点“运行并检查”

代码区你可以直接点进去修改

123

const project = { name: '第一话', nodeCount: 3 } console.log('当前项目', project) console.log('节点数量', project.nodeCount)

电脑输出

还没有运行。完成左边的小任务后，点下面的绿色按钮。

注意

练习结束后删除可能暴露 Cookie、Token、用户资料或 API 密钥的日志。真正的密钥永远不要粘贴进任何在线练习区。

为什么 console.log(data) 不如 console.log('请求前', data)？

答案：日志多起来后，标签能告诉你它来自哪个阶段和哪段代码，否则只看到 data 很难定位。