Chrome调试网站时，如何定位字符串首次出现的JS代码位置？

用浏览器调试工具的条件断点快速定位 #

• 按F12打开开发者工具，切换到Sources面板，找到目标JS文件
• 在你怀疑生成目标字符串的代码行上点击行号设置断点，右键断点选择Edit condition
• 输入判断条件，比如要追踪"ab"，就写(a+b) === "ab"；如果是直接赋值的字符串场景，用变量名 === "目标字符串"即可
• 刷新页面，代码运行到满足条件的位置会自动暂停，此时就能定位到对应的代码行

用日志+调用栈兜底排查 #

如果不确定字符串生成的大致范围，可以在关键位置插入日志并打印调用栈：

var c = a+b;
if (c === "ab") {
  console.log(new Error().stack);
}

查看控制台日志，输出的调用栈会明确标注字符串生成时的代码行号和文件路径。

针对你的示例代码实操 #

你的示例代码：

var a = "a"
var b = "b"
var c = a+b;

要定位"ab"的出现位置，直接给第三行（var c = a+b;）设置条件断点，条件写c === "ab"，页面运行后会直接停在这一行，精准定位目标代码。

内容的提问来源于stack exchange，提问作者golangboy