Chrome原生支持Logpoint功能，可在不修改代码、不中断执行的前提下，于指定JS行自动向Console输出变量值或表达式结果；通过Sources面板或命令面板添加，以橙色菱形标记标识激活状态。

你想在不修改一行源代码、不重新编译项目、也不担心上线后残留调试语句的前提下，精准查看某行 JavaScript 执行时的变量值或表达式结果，Chrome 浏览器原生支持 Logpoint 功能，它能在目标行触发时自动向 Console 输出日志，且完全不中断运行流程。

通过 Sources 面板添加 Logpoint

这是最常用、最直观的方式，适用于你已能定位到具体脚本文件（如 main.js、bundle.js 或内联

第一步：按 F12 或 Ctrl + Shift + I（Windows/Linux）/Cmd + Option + I（macOS）打开开发者工具。

第二步：点击顶部标签栏的 Sources 面板。

第三步：在左侧文件树中展开并找到目标 JS 文件——注意，压缩代码（如 min.js）也能用，但行号需对应真实执行位置；若找不到，可尝试在右上角搜索框输入文件名快速定位。

第四步：滚动到你想监控的具体代码行（例如 const user = getUser(); 或 if (response.status === 200) {），将鼠标悬停在该行**左侧的行号区域**（不是代码区），右键单击。

第五步：从菜单中选择 Add logpoint。此时该行号旁会立即出现一个可编辑的输入框。

第六步：在输入框中键入要输出的内容。支持纯字符串（"进入支付流程"）、变量（order.id）、对象展开（{amount, currency}）、甚至模板字符串插值（`用户 ${user.name} 状态: ${user.active}`）。【必须按 Enter 确认，否则不会保存】

第七步：看到行号旁出现橙色菱形标记 ✓，表示 Logpoint 已激活。刷新页面或触发对应逻辑，Console 中就会出现带 log 图标的新日志行。

用命令面板快速添加 Logpoint

当你面对动态生成的脚本、eval 代码、或 Source Map 映射混乱导致 Sources 文件树无法直接展开时，命令面板是更可靠的入口。

方法一：快捷唤出命令面板 → 输入 logpoint → 选择 Add logpoint → 点击目标行号 → 输入表达式 → 回车。

方法二：先聚焦任意面板（比如 Console 或 Elements），再按 Ctrl + Shift + P（Windows/Linux）或 Cmd + Shift + P（macOS）。

方法三：在命令面板输入框中键入 logpoint，从下拉列表中选中 Add logpoint，此时界面会高亮提示 “Select line to add logpoint”。【务必用鼠标点击目标行号区域完成绑定，键盘方向键无效】

验证与排查 Logpoint 是否生效

Logpoint 不是“设了就一定有输出”，它的触发完全依赖代码是否真实执行到那一行。

确保页面逻辑能走到该行：比如目标代码在 if 分支里，就手动触发使条件为 true 的操作；若在异步回调中，需等待请求返回后再观察 Console。

切换到 Console 面板，查找带灰色“log”图标、背景略浅的输出行——这不是 console.log()，而是 Logpoint 专属样式。

如果没看到输出，先检查橙色菱形是否仍存在；若已消失，说明被误删或脚本重载后未重建；若仍在，但无日志，大概率是该行根本没执行。

右键某条 Logpoint 输出 → 选择 Reveal in Sources panel，可直接跳回原始位置，方便二次校验表达式或调整行号。