文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载调试Debugging是指在一个脚本中找出并修复错误的过程它是每个前端开发者必须掌握的核心技能。本文基于 zh.javascript.info现代 JavaScript 教程仓库中的「代码质量 · 在浏览器中调试」章节展开结合仓库自带的 调试示例页 与 hello.js 源码系统讲解如何使用 Chrome谷歌浏览器开发者工具从打开 Sources 面板、设置断点、使用debugger命令暂停脚本到跟踪执行、检查变量与调用栈再到用console.log记录日志。学完本章你将能够独立完成脚本的断点调试、定位逻辑错误并理解调试器背后「暂停—观察—步进」的核心工作流。调试是什么为什么需要调试工具在编写更复杂的代码之前先聊聊调试。所有现代浏览器和大多数其他环境都支持调试工具——即开发者工具中的一个特殊用户界面它让调试变得更加容易。它允许我们一步步地跟踪代码随时查看当前实际运行的情况而不是靠猜测或盲目地往代码里塞输出语句。本教程以 Chrome 为例展开讲解因为它拥有足够多的功能其他大部分浏览器Firefox、Edge、Safari 等的开发者工具功能与它也基本类似掌握 Chrome 的操作后可以快速迁移。仓库中该章节位于 1-js/03-code-quality/01-debugging-chrome/article.md属于「代码质量」篇见 章节索引的第一课目的是在深入学习编码实践之前先解决「如何发现并定位错误」的问题。准备调试示例仓库自带的可运行页面本仓库为该章节准备了两个配套文件可以直接在浏览器中打开演练示例页面 index.html页面通过script srchello.js/script引入脚本并在页面加载时调用hello(John)示例脚本 hello.js包含两个函数hello()与say()它们会依次被调用。index.html的核心结构如下!DOCTYPE HTML html body script srchello.js/script An example for debugging. script hello(John); /script /body /htmlhello.js的全部源码如下注意行号后面的断点设置会精确到行function hello(name) { let phrase Hello, ${name}!; say(phrase); } function say(phrase) { alert(** ${phrase} **); }调用链非常简单页面加载 →hello(John)被调用 → 构造phrase字符串 → 调用say(phrase)→say弹出alert对话框。这个极简的例子足以演示断点、步进与变量检查等全部核心操作是后面所有调试练习的载体。打开开发者工具Sources资源面板在 Chrome 中打开上面的示例页面后按下快捷键Windows / LinuxF12MacCmdOptI即可打开开发者工具然后选择Sources资源面板。首次打开时界面大致如下不同 Chrome 版本可能略有差异但面板位置通常很明显界面顶部的切换按钮Toggle可以打开/关闭左侧的文件列表选项卡。在文件预览树中点击并选择hello.jsSources 面板会呈现出三个主要区域文件导航File Navigator列出依附于当前页面的所有文件包括 HTML、JavaScript、CSS 以及图片等资源Chrome 扩展程序也会显示在这里代码编辑Code Editor展示当前选中文件的源码可直接阅读也可以在断点处高亮当前执行位置JavaScript 调试JavaScript Debugging用于调试的区域包含断点列表、变量观察、调用栈、作用域等工具我们马上会逐一探索。如果觉得左侧文件列表占空间可以再次点击切换按钮将其隐藏为代码编辑区腾出更多空间。控制台Console随时执行表达式在 Sources 面板按下Esc键底部会滑出一个控制台Console。在这里输入命令并按Enter即可立即执行执行结果会显示在下方。例如输入12并回车会返回3输入hello(debugger)并回车函数调用执行完毕但没有任何返回值所以结果是undefined。控制台是调试过程中最常用的辅助工具之一当脚本在断点处暂停时你可以在控制台里直接查看或修改当前作用域内的变量、调用函数验证假设后继续执行从而快速缩小问题范围。断点Breakpoints让调试器自动暂停断点breakpoint是调试器会自动暂停 JavaScript 执行的位置。当代码在断点处暂停时我们可以检查当前变量、在控制台执行命令等——换句话说我们可以开始「调试」它。设置断点继续使用hello.js在代码编辑区中点击第 4 行的行号数字say(phrase);那一行注意是点击行号本身不是点击代码同样地在第 8 行的行号上再点击一下alert(...)那一行。设置完成后第 4 行和第 8 行的行号左侧会显示断点标记效果如下图蓝色标记处即断点位置管理断点右侧的「断点列表」面板会汇总所有文件中设置的断点当项目中有多个文件、多个断点时尤为有用快速跳转点击右侧面板中的某个断点可直接跳到源码中对应的位置临时禁用取消选中某个断点前的复选框即可临时禁用该断点断点仍在列表中但不会触发删除断点右键单击断点并选择移除可彻底删除等等。条件断点在行号上右键单击可以创建一个条件conditional断点只有你提供的表达式为真时断点才会触发暂停。例如在一个循环中只有当变量 i 等于某个特定值时如 i 5或者在某个参数为特定值时如 name admin才暂停执行。这可以避免手动多次点击「恢复」来跳过无关迭代非常适合在特定变量值或特定参数出现时进行定点排查。debugger 命令在代码中直接指定暂停点除了在开发者工具里点击行号我们还可以直接在源码中使用debugger命令来暂停代码例如把hello.js修改为function hello(name) { let phrase Hello, ${name}!; debugger; // -- 调试器会在这里停止 say(phrase); }当 JavaScript 引擎执行到debugger语句时如果开发者工具处于打开状态执行会立即暂停如果开发者工具没有打开浏览器会直接忽略该语句不影响正常运行。因此debugger命令非常适合在开发阶段临时埋点无需在 UI 上翻找行号代码即调试点逻辑一目了然。调试完成后再删除或注释掉即可。暂停并查看Watch、Call Stack 与 Scope在示例中hello()函数是在页面加载期间被调用的因此激活调试器最简单的方式是——在设置好断点后重新加载页面按下F5Windows / Linux或CmdRMac。页面重新加载后程序会在第 4 行的断点处暂停执行当前行会被高亮同时编辑器上方会出现「暂停」状态栏暂停后打开右侧的信息下拉列表箭头指示的位置这里有三个核心工具面板用于查看当前的代码状态1. Watch察看—— 显示任意表达式的当前值点击加号并输入一个表达式例如变量名、1 2、name.toUpperCase()等调试器会显示它的当前值并在执行过程中自动重新计算。当我们需要持续观察某个关键变量在多次步进中的变化时Watch 是最直接的方案。2. Call Stack调用栈—— 显示嵌套的调用链此时调试器正停在hello()的调用链中hello()由index.html中的一个脚本调用由于该调用发生在全局脚本不在任何函数内调用栈中显示为anonymous匿名。如果点击调用栈中的某一项调试器会跳到对应的代码位置并且可以查看该层栈帧的所有变量。在多层函数嵌套调用时调用栈能清楚回答「我是被谁调进来的」「上一层是什么状态」这两个关键问题。3. Scope作用域—— 显示当前的变量Local局部显示当前函数中的变量对应变量在源代码中也会以高亮形式标出当前值例如本例中可以看到name John、phrase Hello, John!Global全局显示全局变量不在任何函数中的变量此外还有this关键字的值——本教程此阶段尚未讲到this后续章节会专门学习。暂停时这三块面板配合控制台足以对当前执行环境做一次完整的「体检」。跟踪执行逐条语句地观察脚本暂停之后我们就可以开始跟踪stepping脚本了。右侧面板顶部有一组跟踪按钮作用如下按钮名称行为快捷键恢复Resume继续执行直到下一个断点若无其他断点则直接运行完F8下一步Step运行下一条当前行指令若下一条是函数调用会进入函数内部并在其第一行暂停F9跨步Step over运行下一条指令但不会进入函数内部函数调用会「不可见地」整体执行完F10步入Step into与「下一步」类似但遇到异步函数调用时会进入代码内部并等待F11步出Step out继续执行当前函数内的剩余代码暂停在调用当前函数的下一行ShiftF11注表格中的图标在仓库中由 largeIcons.svg 提供并由 head.html 中的 CSS 类渲染界面截图见 chrome-sources-debugger-trace-1.svg。各按钮的详细行为如下。恢复Resume——F8继续执行。如果没有其他的断点程序就会继续跑完调试器不再控制它。在示例中点击「恢复」后执行会从第 4 行的say(phrase)调用继续随后命中say()函数内部的第 8 行断点并再次暂停。此时再看右侧的Call Stack会发现调用信息增加了一层——我们现在已经位于say()内部。下一步Step——F9运行下一条即当前行指令。以示例为例如果当前停在say(phrase)这一行点击「下一步」会进入say()函数内部如果当前在say()内点击它会执行alert语句屏幕上会弹出提示框。一次接一次地点击此按钮整个脚本的所有语句会被逐个执行。跨步Step over——F10跟上一条「下一步」类似但如果下一条语句是函数调用则表现不同。这里的「函数」指的是我们自己写的函数而不是alert这类内建函数。「下一步」会进入嵌套函数调用并在其第一行暂停「跨步」则对我们不可见地整体执行嵌套函数调用跳过函数内部然后在函数调用返回后立即暂停。如果我们对该函数的内部执行不感兴趣用「跨步」跳过它会非常高效。步入Step into——F11和「下一步」类似但在异步函数调用的情况下表现不同。如果你刚开始学 JavaScript可以先忽略这个差异——因为我们目前还没有用到异步调用。之后只需记住「下一步」会忽略异步行为例如setTimeout计划中的函数调用会过一段时间再执行「步入」会进入异步代码并等待如果需要。步出Step out——ShiftF11继续执行当前函数内的剩余代码并暂停在调用当前函数的下一行代码处。当我们不小心用「下一步」进入了一个嵌套调用但对该函数内部并不感兴趣时用它一步回到外层调用点非常方便。两个批量开关右侧面板顶部还有两个常用的开关按钮启用/禁用所有断点批量地打开或关闭全部断点。这个按钮不会影响程序的执行只是一个断点的总开关适合临时挂起整套断点策略出错时自动暂停启用后只要开发者工具是打开的任何脚本执行错误都会导致脚本自动暂停。随后就可以在调试器中分析变量、查看上下文弄清楚到底哪里出错、出错时的状态是什么。因此如果脚本因为错误「挂掉」了可以打开调试器、启用这个选项、重载页面一步步观察错误发生前的现场。Continue to here执行到此处在代码中的任意一行上右键单击弹出的关联菜单context menu里有一个非常实用的选项 ——Continue to here让程序继续执行直到这一行再暂停。当你想要向前推进很多步、但又不愿专门去设置一个断点时它是最快捷的选择。日志记录用 console.log 留下运行痕迹调试器并不是观察代码运行的唯一手段。想要向控制台输出信息可以使用console.log函数。例如将0到4的值输出到控制台// 打开控制台来查看 for (let i 0; i 5; i) { console.log(value, i); }普通用户看不到这些输出——它们只出现在控制台里。查看方式有两种打开开发者工具中的Console控制台选项卡在任意其他选项卡中按下Esc键在下方打开控制台。如果在代码中留有足够的日志记录那么即使不借助调试器我们也能从日志中还原「刚刚发生了什么」。日志适合快速粗排调试器适合精确定位两者互为补充。需要提醒的是上线前的代码里应清理掉不必要的调试日志避免噪音与敏感信息泄露。小结三种暂停脚本的方式与调试工作流综合全文共有3 种方式可以让脚本暂停断点在开发者工具中点击行号设置最常用的方式debugger语句直接在源码中写入暂停指令代码即断点error脚本错误当开发者工具打开且「出错时自动暂停」开关开启时任何执行错误都会导致脚本自动暂停。无论通过哪种方式暂停之后都可以进行完整的调试动作检查变量、查看调用栈、跟踪步进代码来定位执行出错的位置。这正是浏览器调试的核心工作流暂停 → 观察 → 步进 → 修复 → 重载验证。开发者工具中的功能远不止本文介绍的这些。完整的手册可以查阅 Chrome DevTools 官方文档本文成文时的浏览器版本请以实际界面为准本章的内容已经足够让你上手代码调试。后续随着浏览器相关的开发越来越多强烈建议进一步探索开发者工具的高级功能。最后一个小建议大胆点击开发者工具中的各个区域看看会显示什么——这可能是学习开发者工具最快的方式也别忘了右键单击和关联菜单里隐藏的各种快捷能力。赞分享文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载相关推荐JavaScript教程Chrome浏览器调试技巧详解JavaScript教程Chrome浏览器调试技巧详解 作为JavaScript开发者掌握调试技巧是必备技能。本文将深入讲解如何在Chrome浏览器中使用开终极指南Chrome DevTools MCP 如何在浏览器中运行JavaScript代码终极指南Chrome DevTools MCP 如何在浏览器中运行JavaScript代码 Chrome DevTools MCP 是一个革命性的工具它让您MCP 服务浏览器控制GUI 自动化开发者工具AI 技能JavaScript调试指南浏览器中的调试技巧JavaScript调试指南浏览器中的调试技巧 前言 调试是每个开发者必须掌握的核心技能。本文将详细介绍如何在浏览器中进行JavaScript调试帮助你快速文档/教程前端上一篇Auxílio RS SDK开发指南构建第三方集成下一篇OpenClaw × Mem0 记忆整合机制详解memory-dream 技能的 Dream 协议、触发门槛与源码实现创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考