Question: See what file/function deals with a WebSocket?

Question

See what file/function deals with a WebSocket?

Answers 1
Added at 2017-01-02 23:01
Tags
Question

Is there a way to, possibly using the Chrome DevTools, see in what javascript file or function a WebSocket is handled with?

For instance, I am able to see the frames of the data in the Frames tab, but I am not able to find where they are handled. Is this even possible using only Chrome's DevTools?

Answers
nr: #1 dodano: 2017-01-03 18:01

I think doing a full-text search of the page source for "onmessage" is the easiest way of doing this.

Other than that, a more accurate method is to overwrite the native WebSocket object and putting in a debugger statement:

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

Paste this in the console before the WebSocket is created. You can use "Script First Statement" in Event Listener Breakpoints to pause when the page starts loading.

Chrome will pause when the WebSocket object is created, and you can go up the call stack to find the source code that's responsible.

This may be very different from where the onmessage handler is defined. However, you can then put a manual breakpoint on the line that contains new WebSocket, reload the page, and put this code in the console when the breakpoint is hit:

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

Now the debugger will pause when the onmessage property is set on that WebSocket object.

Source Show
◀ Wstecz