chrome devtools 中 logpoint 本质是可视化 console.log 替代方案，不中断执行、不污染源码；在 sources 面板行号区右键选 add logpoint 或用 shift+f8（win/linux）/cmd+shift+f8（macos）设置，支持模板字符串、json.stringify 等表达式，可转为条件日志断点。
在 Chrome DevTools 中，Logpoints 是一种不中断代码执行、又能动态输出变量值的调试功能，它本质上是 console.log 的可视化替代方案，无需修改源码、也不用担心上线前忘记删除。
如何设置 Logpoint
在 DevTools 的 Sources 面板中，右键点击某行代码左侧的行号区域（不是断点图标本身），选择 Add logpoint；或者使用快捷键：Shift + F8（Windows/Linux）或 Cmd + Shift + F8（macOS）。
输入表达式即可，支持任意可求值的 JS 表达式，例如：
user.name`ID: ${id}, Status: ${status}`JSON.stringify(data, null, 2)-
error?.stack（可选链安全输出）
Logpoint 和 console.log 的关键区别
不污染源码：Logpoint 存在于 DevTools 中，刷新页面或重新加载后依然保留（若启用 “Preserve log”），但不会写入你的 JS 文件。
运行时求值：每次执行到该行时，表达式才被计算，和 console.log 效果一致，但无副作用（比如不会触发 getter 副作用——除非你显式调用）。
条件控制更直观：右键 Logpoint 可编辑为 Conditional logpoint，填入布尔表达式（如 count > 10），只在满足条件时打印。
实用技巧与注意事项
避免副作用表达式：不要在 Logpoint 中写 doSomething() 或 arr.push(x)，它虽不暂停，但仍会执行——这可能改变程序状态，造成难以复现的问题。
支持多表达式（用逗号分隔）：例如 user.id, user.role, Date.now() 会以逗号分隔形式输出到 Console。
查看上下文更方便：悬停 Logpoint 标记可看到当前作用域内的局部变量预览，比反复敲 console.log 更快定位。
不支持异步等待：不能写 await fetch(...) 或 Promise.resolve().then(...)，Logpoint 是同步求值机制。
什么时候优先用 Logpoint 而不是 console.log
当你需要临时观察高频执行路径（如渲染循环、事件回调、数组遍历）中的变量，又不想因 console.log 大量输出卡住 Console 或影响性能时；
当协作开发中不想提交调试代码，或 CI/CD 流程对 console.* 有 lint 拦截时；
当想快速复现某个中间状态（比如第 7 次点击后），配合条件 Logpoint 比手动加 if 判断再 log 更轻量。
