Отладка WebSocket в Google Chrome
есть ли способ или расширение, которое позволяет мне смотреть "трафик", проходящий через WebSocket? Для целей отладки я хотел бы видеть запросы/ответы клиента и сервера.
10 ответов
инструменты разработчика Chrome теперь имеют возможность перечислять кадры WebSocket, а также проверять данные, если кадры не являются двоичными.
Сеть.Если ваше соединение WebSocket использует двоичные кадры, вы, вероятно, все равно захотите использовать Wireshark для отладки соединения. Wireshark 1.8.0 добавлена поддержка диссектора и фильтрации для WebSockets. Альтернатива может быть найдена в этом другого ответа.
Chrome Canary и Chromium теперь имеют функцию проверки кадров сообщений WebSocket. Вот шаги, чтобы проверить его быстро:
- перейти к WebSocket Echo demo, размещенный на websocket.org сайт.
- включите инструменты разработчика Chrome.
- клик сеть, и для фильтрации трафика, показанного инструментами Dev, нажмите WebSockets.
- в демо-версии Echo нажмите подключиться. На вкладке заголовки в Google Dev Tool вы можете проверить рукопожатие WebSocket.
- Нажмите кнопку Отправить в демо-версии Echo.
- ЭТОТ ШАГ ВАЖЕН: чтобы просмотреть фреймы WebSocket в инструментах разработчика Chrome, в разделе Имя / Путь щелкните echo.websocket.org запись, представляющая ваше соединение WebSocket. Это обновляет главную панель справа и делает вкладку WebSocket Frames отображаемой с фактическим сообщением WebSocket содержание.
Примечание: каждый раз, когда вы отправляете или получаете новые сообщения, Вы должны обновить главную панель, нажав на echo.websocket.org вход слева.
Я также опубликовал шаги с скриншотами и видео.
моя недавно вышедшая книга, окончательное руководство по HTML5 WebSocket, также имеет преданное приложение покрывая различные инструменты осмотра, включая инструменты Dev Крома, Крома сеть-внутренности, и проволочная акула.
они, похоже, постоянно меняют материал в Chrome, но вот что работает прямо сейчас: -)
сначала вы должны нажать на красную кнопку записи или вы ничего не получите.
Я никогда не замечал
WS
раньше, но он отфильтровывает веб-сокет подключение.выберите его, а затем вы можете увидеть кадры, которые покажут вам сообщения об ошибках и т. д.
другие ответы охватывают наиболее распространенный сценарий: смотрите содержимое фреймов (инструменты разработчика -> вкладка "сеть" - > щелкните правой кнопкой мыши на подключении 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), сравнение пакетов и поиск пакетов и т. д.
пожалуйста, обратитесь к моей недавно написанной статье о CodeProject, в которой показано, как отлаживать/проверять трафик WebSocket с помощью Fiddler (с помощью FiddlerScript). http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler
Chrome developer tools позволяет видеть запрос рукопожатия, который остается в ожидании во время открытого соединения, но вы не можете видеть трафик, насколько я знаю. Однако вы можете обнюхать его например.
короткий ответ для Chrome версии 29 и выше:
- откройте отладчик, перейдите на вкладку "Сеть"
- загрузить страницу с websocket
- нажмите на запрос websocket с ответом на обновление с сервера
- выберите вкладку "кадры", чтобы увидеть кадры websocket
- нажмите на запрос websocket еще раз, чтобы обновить кадры
Я просто публикую это, так как Chrome много меняется,и ни один из ответов не был в курсе.
- открыть dev tools
- обновите страницу (чтобы соединение WS было захвачено вкладкой network)
- нажмите ваш запрос
- нажмите вкладку "кадры"
- вы должны увидеть что-то вроде этого:
Я использовал расширение Chrome под названием простой клиент WebSocket v0.1.3 это опубликовано пользователем hakobera. Он очень прост в использовании, где он позволяет открывать websockets по заданному URL, отправлять сообщения и закрывать соединение сокета. Это очень минималистично.