Отладка WebSocket в Google Chrome

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

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

Обработать:

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

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

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 Developer Tools, в разделе «Имя / путь» щелкните запись echo.websocket.org, представляющую ваше соединение с WebSocket. Это обновит основную панель справа и отобразит вкладку «Рамки WebSocket» с фактическим содержимым сообщения WebSocket.

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

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

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

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

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

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

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

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

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

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

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

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

chrome://net-internals/#sockets

У вас есть 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

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

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

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

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

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

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

Что касается инструмента, который я начал использовать, я предлагаю использовать firecamp как Postman, но он также поддерживает websockets и socket.io.