Посмотрите, какой файл/функция имеет дело с WebSocket?

Question

Есть ли способ, возможно, используя Chrome DevTools, посмотреть, в каком файле javascript или функции обрабатывается WebSocket?

Например, я могу видеть кадры данных на вкладке «Фреймы», но я не могу найти, где они обрабатываются. Возможно ли это, используя только DevTools от Chrome?

Answer 1

Я думаю, что сделать полнотекстовый поиск источника страницы для «onmessage» - это самый простой способ сделать это.

Кроме этого, более точный метод, чтобы перезаписать родной WebSocket объект и положить в отладчик заявление:

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

Вставьте это в консоли перед созданием WebSocket. Вы можете использовать «Сценарий первого заявления» в контрольных точках прослушивателя событий, чтобы сделать паузу, когда страница начнет загружаться.

Хром приостанавливается при создании объекта WebSocket, и вы можете перейти в стек вызовов, чтобы найти исходный код, который отвечает.

Это может сильно отличаться от того, где определен обработчик onmessage. Тем не менее, вы можете поставить вручную точку останова на строке, содержащей new WebSocket, перезагрузите страницу, и поместить этот код в консоли, когда достигает точки останова:

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

Теперь отладчик остановится, когда onmessage свойство установлен на этом WebSocket объект.