在Chrome DevTools中可直接点击行号旁设断点，程序运行至此暂停并实时显示变量值；通过Scope、Watch、悬停提示及Debug Console查看变量；用F10/F11/Shift+F11单步执行；支持条件断点精准触发。
直接在代码行号旁点击设置断点，程序运行到该行就会暂停，此时变量值会实时显示在调试面板中。
在 Chrome DevTools 中设置行断点
打开网页后按 F12 或右键“检查”，切换到 Sources 面板；在左侧文件树中找到目标 JS 文件，点击展开并打开；将鼠标移到想暂停的那行代码的行号左侧空白处，单击出现蓝色箭头，表示断点已生效。刷新页面，代码执行到此处自动暂停。
查看变量值的几个关键位置
暂停后，右侧默认显示 Scope 区域，里面分 Local、Closure、Global 等作用域，当前函数内的变量（如 x、user.name）会直接列出并显示实时值。你还可以：
- 选中某段表达式（比如
items.length），右键选择 Add to watches，它就会固定出现在 Watch 面板中，持续跟踪变化 - 在 Debug Console（调试控制台）里直接输入变量名回车，查看当前值或执行临时表达式
- 把鼠标悬停在代码中的变量名上，几秒后会浮出该变量的当前值提示
用单步操作观察变量如何变化
断点暂停后，别急着跳过整行——用快捷键逐步推进，才能看清每一步对变量的影响：
立即学习“Java免费学习笔记（深入）”；
-
F10（Step Over）：执行当前行，不进入函数内部；适合跳过
console.log()或简单赋值 -
F11（Step Into）：进入当前行调用的函数内部；比如
processData(arr)，按 F11 就能进去看arr在函数里怎么被处理 - Shift+F11（Step Out）：跳出当前函数，回到调用它的地方；方便快速退出深层逻辑，聚焦主流程
每次单步后，Scope 和 Watch 面板都会即时更新，变量值变化一目了然。
条件断点：只在关心的时候暂停
如果循环执行上百次，但只想看第 50 次时的 item 值，不用手动点 49 次“继续”。右键断点所在行号 → Add conditional breakpoint → 输入 index === 49（注意索引从 0 开始）。这样只有满足条件时才会暂停，省时又精准。
