查看哪个文件/函数处理WebSocket？

Question

有没有办法，可能使用Chrome DevTools，请参阅处理WebSocket的javascript文件或函数？

例如，我能够在Frames选项卡中看到数据的帧，但我无法找到它们的处理位置。这甚至只能使用Chrome的DevTools吗？

Answer 1

我认为对“onmessage”进行全文搜索页面源是最简单的方法。

除此之外，更准确的方法是覆盖本机WebSocket对象并输入调试器语句：

var nativeWebSocket = window.WebSocket
window.WebSocket = function(){
   debugger
}

在创建WebSocket之前将其粘贴到控制台中。您可以在事件侦听器断点中使用“脚本优先语句”在页面开始加载时暂停。

Chrome会在创建WebSocket对象时暂停，您可以通过调用堆栈查找负责的源代码。

这可能与onmessage处理程序的定义非常不同。但是，您可以在包含new WebSocket的行上放置一个手动断点，重新加载页面，并在遇到断点时将此代码放在控制台中：

Object.defineProperty(e, "onmessage", {
    set: function(){
        debugger
    }
})

现在调试器将在onmessage对象上设置WebSocket属性时暂停。