可使用Chrome开发者工具的Sources面板进行断点调试：先打开工具并进入Sources，再在代码行设断点，触发后观察变量与调用栈，用F8/F10/F11等键单步执行，最后在Console中动态查看或修改变量值。
如果您在Chrome浏览器中编写或运行JavaScript代码时遇到逻辑错误，需要逐行检查变量值和执行流程，则可以使用开发者工具的断点调试功能。以下是进行F12断点调试JavaScript代码的具体操作步骤：
一、打开开发者工具并切换到Sources面板
该步骤是启动调试环境的基础，确保能访问脚本文件并设置断点。Chrome开发者工具的Sources面板提供完整的源码视图、断点管理及执行控制能力。
1、在Chrome浏览器中打开目标网页。
2、按下 F12 键或右键页面选择“检查”，唤出开发者工具。
立即学习“Java免费学习笔记（深入）”；
3、点击顶部标签栏中的 Sources 选项卡。
4、在左侧文件树中展开 Page 或 Snippets，找到待调试的JS文件或创建新片段。
二、在代码行设置断点
断点用于暂停JavaScript执行，使您能在特定位置查看调用栈、作用域变量和表达式值。支持行断点、条件断点和事件监听器断点等多种类型。
1、在Sources面板右侧代码编辑区中，点击目标行号左侧的空白区域。
2、该行号处将出现一个 深蓝色圆点，表示断点已激活。
3、若需条件断点，右键该行号区域，选择“Edit breakpoint”，输入布尔表达式如 i === 5。
三、触发断点并观察调试信息
当JavaScript执行流到达断点所在行时，页面将暂停，此时可实时查看当前上下文状态，包括局部变量、闭包、this指向及调用堆栈。
1、在网页中执行会调用该JS代码的操作（例如点击按钮、提交表单）。
2、执行暂停后，右侧面板自动显示 Scope 区域，列出当前作用域内所有变量及其值。
3、在 Call Stack 中可查看函数调用路径，点击任一层可跳转至对应源码位置。
四、使用调试控制按钮单步执行
调试控制按钮位于Sources面板顶部工具栏，用于精细化控制代码执行节奏，便于追踪逻辑分支与异常路径。
1、点击 Resume script execution（F8） 继续运行至下一个断点或脚本结束。
2、点击 Step over next function call（F10） 执行当前行，不进入函数内部。
3、点击 Step into next function call（F11） 进入当前行调用的函数体第一行。
4、点击 Step out of current function（Shift+F11） 快速执行完当前函数剩余部分并返回上层。
五、在Console中动态执行与修改变量
在断点暂停状态下，Console面板处于调试上下文中，输入的表达式将在当前作用域执行，支持即时验证假设与临时修复逻辑。
1、确保开发者工具处于断点暂停状态，并切换到 Console 面板。
2、输入变量名（如 data）并回车，查看其当前值。
3、输入赋值语句（如 count = 0）可直接修改变量，影响后续执行流程。
4、调用函数或打印对象属性（如 console.log(obj.name)）可验证数据结构完整性。
