Отладка WebSocket в Google Chrome

Ответ 1

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

процесс:

• Запустите инструменты разработчика Chrome.
• Загрузите свою страницу и запустите соединения WebSocket.
• Щелкните вкладку "Сеть".
• Выберите соединение WebSocket из списка слева (он будет иметь статус "101 Switching Protocols".
• Перейдите на вкладку "Фреймы". Двоичные кадры будут отображаться с указанием длины и отметки времени и указать, маскированы ли они. Текстовые фреймы будут отображаться также в виде содержимого полезной нагрузки.

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

Ответ 2

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

• Перейдите к демонстрации WebSocket Echo, размещенной на 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 также имеет специальное приложение, охватывающее различные инструменты проверки, включая инструменты Chrome Dev Tools, чистые внутренние компоненты Chrome, и проводной акулы.

Ответ 3

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

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

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

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

Ответ 4

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

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

chrome://net-internals/#sockets

Ответ 5

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

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

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

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

• Откройте отладчик, перейдите на вкладку "Сеть"
• Загрузка страницы с помощью websocket
• Нажмите на запрос websocket с ответом на обновление с сервера
• Выберите вкладку "Рамки", чтобы увидеть рамы веб-раскладки.
• Еще раз нажмите на запрос websocket для обновления фреймов