0Pricing
JavaScript Academy · 课时

逐步执行代码

逐步跳过、进入和退出函数。

逐步执行代码 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

单步执行代码

在断点处暂停后，您可以单步执行代码，每次执行一个操作，逐行观察状态如何变化。

继续执行

继续执行按钮会恢复正常执行，直到遇到下一个断点或程序结束。当您已经充分查看当前暂停位置时，可以使用它。

单步跳过

单步跳过会完整执行当前行，包括该行调用的任何函数，然后在同一函数的下一行暂停。它不会进入被调用的函数。

function helper() {
  return 5
}
function main() {
  const a = helper()
  const b = a + 1
  return b
}

单步进入

单步进入会进入当前行中的函数调用，并在函数的第一条语句处暂停，以便您在其中进行调试。

function helper() {
  const x = 10
  return x
}
function main() {
  return helper()
}

单步跳出

单步跳出会完成当前函数的执行，并在将您带入该函数的调用之后那一行暂停。当您不再需要检查某个函数时，可以使用它离开该函数。

选择单步命令

信任某个函数时使用单步跳过，需要调查该函数时使用单步进入，确认内部逻辑没有问题后使用单步跳出。

调用栈面板

单步执行时，调用栈面板会显示导致当前行的函数调用链。点击某个栈帧即可跳转到对应的上下文。

观察状态变化

单步执行时，作用域窗格和监视窗格会更新，让您准确看到是哪一行意外修改了变量。

在循环中单步执行

在循环中，单步执行会在每次迭代中重复执行循环体。与手动单步执行许多次相比，条件断点通常更快。

function sumTo(n) {
  let total = 0
  for (let i = 1; i <= n; i++) {
    total += i
  }
  return total
}

单步进入库代码

单步进入可能会将您带入库的内部实现。DevTools 提供了忽略指定脚本的功能，让您可以一直停留在自己的代码中。

典型工作流

在疑似存在错误的位置附近设置断点，然后逐行单步执行并观察变量，直到找到实际情况偏离预期的位置。

快速检查

测试您对单步执行的了解。

回顾

回顾：单步执行可以在控制下逐步运行代码。

  • 单步跳过会执行一行代码，但不会进入其中的调用
  • 单步进入会进入被调用的函数
  • 单步跳出会完成当前函数
  • 调用栈会显示您是如何到达当前位置的

常见问题解答

「逐步执行代码」课时是免费的吗？

是的 — 「逐步执行代码」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「逐步执行代码」这节课中我会学到什么？

逐步跳过、进入和退出函数。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「逐步执行代码」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 超越 console.log
  2. 设置断点
  3. 逐步执行代码
  4. 阅读堆栈跟踪
← 返回 JavaScript Academy