如何定位Chrome DevTools中WebSocket消息的发送代码？

方法一：重写WebSocket.send方法触发断点 #

• 打开Chrome DevTools的Sources面板
• 切换到**代码片段(Snippets)**标签，新建空白片段并粘贴以下代码：

const originalSend = WebSocket.prototype.send;
WebSocket.prototype.send = function(data) {
  debugger;
  return originalSend.call(this, data);
};

• 点击片段上方的运行按钮执行代码，之后页面每次调用WebSocket.send()时，DevTools会自动断在调用位置，查看右侧**调用栈(Call Stack)**即可定位触发消息发送的代码。

方法二：全局搜索+条件断点精准定位 #

• 在Sources面板顶部搜索框输入send(，查找所有调用WebSocket发送方法的代码位置
• 对找到的代码行添加条件断点：右键代码行选择「添加条件断点」，输入过滤规则（比如data.includes('目标消息关键词')），只有发送匹配消息时才触发断点，快速锁定目标代码。

方法三：Performance面板录制分析调用链路 #

• 打开Performance面板，点击录制按钮（圆形红点）
• 触发页面发送WebSocket消息的操作，完成后点击停止录制
• 在录制结果的调用栈中，找到WebSocket.send相关调用条目，展开即可查看触发消息发送的完整代码链路。

注意事项 #

• 若代码经过压缩混淆，点击Sources面板中的美化代码按钮{}，格式化后更易定位。
• 重写send方法的代码需在WebSocket实例初始化前执行，若WebSocket是页面加载后创建的，执行片段后刷新页面即可生效。

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