Отладка WebSocket в Google Chrome

Question

Есть ли способ или расширение, которое позволяет мне наблюдать за «трафиком», проходящим через WebSocket?В целях отладки я хотел бы видеть запросы и ответы клиента и сервера.

Answer 1

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

Процесс:

1. Запуск инструментов разработчика Chrome
2. Загрузите свою страницу и инициируйте подключения к WebSocket
3. Щелкните вкладку Network .
4. Выберите подключение WebSocket из списка слева(он будет иметь статус «101 протокол переключения».
5. Щелкните по вкладке Frames . Двоичные кадры будут отображаться с меткой длины и времени и указывают, маскированы ли они.Текстовые фреймы также будут отображать содержимое полезной нагрузки.

Если в вашем соединении WebSocket используются бинарные фреймы, вам, вероятно, все равно понадобится Wireshark для отладки соединения. Wireshark 1.8.0 добавлена ​​поддержка диссектора и фильтрации для WebSockets. Альтернатива может быть найдена в этом другом ответе .

Answer 2

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

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

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

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

Моя недавно опубликованная книга, Подробное руководство по HTML5 WebSocket , также содержит специальное приложение, охватывающее различные инструменты проверки, включая Chrome Dev Tools, Chrome net-internals и Wire Shark.

Answer 3

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

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

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

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

Answer 4

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

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

chrome://net-internals/#sockets

Answer 5

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

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

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

Answer 6

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

Однако вы можете использовать Fiddler с FiddlerScript для проверки трафика WebSocket так же, как вы проверяете HTTP-трафик. Некоторые преимущества этого решения заключаются в том, что вы можете использовать многие другие функции в Fiddler, такие как несколько инспекторов (HexView, JSON, SyntaxView), сравнивать пакеты и находить пакеты и т. Д.

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

Answer 7

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

1. Инструменты открытого разработчика
2. ОБНОВИТЬ СВОЮ СТРАНИЦУ (чтобы соединение WS захватывалось вкладкой сети)
3. Нажмите на ваш запрос
4. Нажмите на вкладку «Рамки»
5. Вы должны увидеть что-то вроде этого:

Answer 8

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

1. Откройте отладчик, перейдите на вкладку «Сеть»
2. Загрузите страницу с помощью веб-сокета
3. Нажмите назапрос веб-сокета с ответом на обновление с сервера
4. Выберите вкладку «Кадры», чтобы просмотреть кадры веб-сокета
5. Нажмите на запрос веб-сокета еще раз, чтобы обновить кадры

Answer 9

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

Answer 10

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