Отладка WebSocket в Google Chrome

есть ли способ или расширение, которое позволяет мне смотреть "трафик", проходящий через WebSocket? Для целей отладки я хотел бы видеть запросы/ответы клиента и сервера.

10 ответов


инструменты разработчика Chrome теперь имеют возможность перечислять кадры WebSocket, а также проверять данные, если кадры не являются двоичными.

Сеть.
  • выберите подключение WebSocket из списка слева (он будет иметь статус " 101 переключение Протоколы."
  • выберите кадры суб-вкладки. Бинарные кадры будут отображаться с длиной и отметкой времени и указывать, маскируются ли они. Текстовые фреймы будут показывать также содержимое полезной нагрузки.
  • Если ваше соединение WebSocket использует двоичные кадры, вы, вероятно, все равно захотите использовать Wireshark для отладки соединения. Wireshark 1.8.0 добавлена поддержка диссектора и фильтрации для WebSockets. Альтернатива может быть найдена в этом другого ответа.


    Chrome Canary и Chromium теперь имеют функцию проверки кадров сообщений WebSocket. Вот шаги, чтобы проверить его быстро:

    1. перейти к WebSocket Echo demo, размещенный на websocket.org сайт.
    2. включите инструменты разработчика Chrome.
    3. клик сеть, и для фильтрации трафика, показанного инструментами Dev, нажмите WebSockets.
    4. в демо-версии Echo нажмите подключиться. На вкладке заголовки в Google Dev Tool вы можете проверить рукопожатие WebSocket.
    5. Нажмите кнопку Отправить в демо-версии Echo.
    6. ЭТОТ ШАГ ВАЖЕН: чтобы просмотреть фреймы WebSocket в инструментах разработчика Chrome, в разделе Имя / Путь щелкните echo.websocket.org запись, представляющая ваше соединение WebSocket. Это обновляет главную панель справа и делает вкладку WebSocket Frames отображаемой с фактическим сообщением WebSocket содержание.

    Примечание: каждый раз, когда вы отправляете или получаете новые сообщения, Вы должны обновить главную панель, нажав на echo.websocket.org вход слева.

    Я также опубликовал шаги с скриншотами и видео.

    моя недавно вышедшая книга, окончательное руководство по HTML5 WebSocket, также имеет преданное приложение покрывая различные инструменты осмотра, включая инструменты Dev Крома, Крома сеть-внутренности, и проволочная акула.


    они, похоже, постоянно меняют материал в Chrome, но вот что работает прямо сейчас: -)

    • сначала вы должны нажать на красную кнопку записи или вы ничего не получите.

    • Я никогда не замечал WS раньше, но он отфильтровывает веб-сокет подключение.

    • выберите его, а затем вы можете увидеть кадры, которые покажут вам сообщения об ошибках и т. д.

    enter image description here


    другие ответы охватывают наиболее распространенный сценарий: смотрите содержимое фреймов (инструменты разработчика -> вкладка "сеть" - > щелкните правой кнопкой мыши на подключении websocket -> фреймы).

    Если вы хотите узнать больше информации, например, какие сокеты в настоящее время открыты/простаивают или могут их закрыть, вы найдете этот url полезным

    chrome://net-internals/#sockets
    

    Если у вас нет страницы, которая обращается к websocket, вы можете открыть консоль Chrome и ввести JavaScript в:

    var webSocket = new WebSocket('ws://address:port');
    webSocket.onmessage = function(data) { console.log(data); }
    

    Это откроет веб-сокет, чтобы вы могли увидеть его на вкладке Сеть и в консоли.


    У вас есть 3 варианта: Chrome (через инструменты разработчика -> вкладка Network), Wireshark и Fiddler (через вкладку Log), однако все они очень просты. Если у вас очень большой объем трафика или каждый кадр очень большой, становится очень сложно использовать их для отладки.

    однако вы можете использовать Fiddler с FiddlerScript для проверки трафика WebSocket таким же образом, как вы inpect HTTP-трафика. Преимущества данного решения заключаются в том, что вы можете использовать многие другие функции в Fiddler, например, несколько инспекторов (HexView, JSON, SyntaxView), сравнение пакетов и поиск пакетов и т. д. Inspect WebSocket traffic

    пожалуйста, обратитесь к моей недавно написанной статье о CodeProject, в которой показано, как отлаживать/проверять трафик WebSocket с помощью Fiddler (с помощью FiddlerScript). http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler


    Chrome developer tools позволяет видеть запрос рукопожатия, который остается в ожидании во время открытого соединения, но вы не можете видеть трафик, насколько я знаю. Однако вы можете обнюхать его например.


    короткий ответ для Chrome версии 29 и выше:

    1. откройте отладчик, перейдите на вкладку "Сеть"
    2. загрузить страницу с websocket
    3. нажмите на запрос websocket с ответом на обновление с сервера
    4. выберите вкладку "кадры", чтобы увидеть кадры websocket
    5. нажмите на запрос websocket еще раз, чтобы обновить кадры

    Я просто публикую это, так как Chrome много меняется,и ни один из ответов не был в курсе.

    1. открыть dev tools
    2. обновите страницу (чтобы соединение WS было захвачено вкладкой network)
    3. нажмите ваш запрос
    4. нажмите вкладку "кадры"
    5. вы должны увидеть что-то вроде этого:

    enter image description here


    Я использовал расширение Chrome под названием простой клиент WebSocket v0.1.3 это опубликовано пользователем hakobera. Он очень прост в использовании, где он позволяет открывать websockets по заданному URL, отправлять сообщения и закрывать соединение сокета. Это очень минималистично.