如何在Chrome DevTools中对GTM插入的JS代码设置断点调试

以下方法均无需修改现有GTM配置即可使用：

• 方法1：全局函数断点
  你需要断住的代码位于全局函数notifyFacebookAboutAboutChatStarted内，直接在Chrome DevTools的Console面板执行以下代码：

debug(notifyFacebookAboutAboutChatStarted)

后续该函数被调用时，Chrome会自动在函数入口处暂停执行，你步进一行即可到达标注// Breakpoint的目标位置。调试结束后执行undebug(notifyFacebookAboutAboutChatStarted)即可取消该断点。

• 方法2：全局搜索定位源码后加断点

1. 打开DevTools的Sources标签页，按Ctrl + F（Mac系统为Cmd + F）调出全局搜索框
2. 输入代码中的唯一特征字符串，比如how: "chat_started"或函数名notifyFacebookAboutAboutChatStarted，搜索结果会直接定位到GTM注入的对应代码片段
3. 找到目标代码后直接点击左侧行号添加普通断点即可，下次触发对应逻辑时就会自动暂停。

注：GTM注入的内联脚本通常归类在Sources面板Page栏的gtm.js相关目录或(no domain)分类下，找不到时直接用全局搜索效率最高。

• 方法3：事件断点回溯定位
  如果你的代码是由特定事件触发执行的，可以在Sources标签页的「Event Listener Breakpoints」面板勾选对应事件类型，事件触发时代码会自动暂停，再通过调用栈回溯就能找到你的目标代码位置。

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