本文主要讲如何使用 Chrome DevTools,Bilibili 的直播间 WebSocket 协议只是作为一个案例,互联网上有很多现成的博客已经讲了协议内容。
准备工具#
最新版的 Chrome 浏览器
定位代码#
打开直播间,打开 F12 开发者工具,刷新页面。
切换到 Network 选项卡。
打开筛选,筛选类型为 WS(即 WebSocket)的请求。
鼠标悬停在代码位置的上方,可以看到请求的发出位置,以及它的调用栈。
通常类不会是最内层(也就是第一个),往下找几个,估计一个大概的位置。
如果估计不好的话,最麻烦的方法也就是一个一个看了。
下断点反查调用栈#
刚才那个太麻烦了,要用点简单的方法。
我们直接点进第一条,也就是请求真正触发的位置。
点击左下角的 {}
,格式化一下代码。
然后在这行下一个断点。
刷新页面。
当这个断点断下时,右侧有当前的调用栈,也能看到当前层中的局部变量。可以点击某一层,将代码切换到这一层的调用位置,同时把上下文切换到对应的位置,可以看到对应层的局部变量。左侧的代码中也会内联显示对应行内有关的变量的信息,方便调试。
这个在 Source 选项卡中的栈和之前在 Network 选项卡中的栈是一样的,我们只需要依次往下找,看看哪两层栈之间的上下文变化过于剧烈,就可以找到这个模块大概的层次了。
找到具体位置#
因为代码的大致位置都找到了,在附近找一找 send
和 onmessage
或 on('message', ...)
就行了。就是通过 Ctrl + F 查找。
可以通过下断点逆推堆栈了解程序执行过程,也可以直接分析代码。
分析算法#
这个部分其实没什么,就可以就是单步运行就好了。