Отладка WebSocket в Google Chrome

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

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

Обработать:

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

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

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

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

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

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

В моей недавно опубликованной книге «Окончательное руководство по HTML5 WebSocket» также есть специальное приложение, охватывающее различные инструменты проверки, в том числе инструменты Chrome Dev, чистые внутренние элементы Chrome и Wire Shark.

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

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

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

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

введите описание изображения здесь

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

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

 chrome://net-internals/#sockets 

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

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

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

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

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

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

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

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

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

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

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

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

введите описание изображения здесь

  • Обновления в реальном времени из базы данных с использованием JSF / Java EE
  • События WebSockets или Server-Sent / EventSource
  • Различия между socket.io и websockets
  • WebSocket с Sockjs & Spring 4, но без Stomp
  • Различия между ZeroMQ и WebSockets
  • Вызывает усталость HTTP / 2?
  • Различия между сокетами TCP и веб-сокетами, еще раз
  • Есть ли клиент WebSocket для .NET?
  • Как (де) создавать кадры данных в WebSockets hybi 08+?
  • Аутентификация и авторизация Websocket весной
  • Отключение HAProxy + WebSocket
  • Давайте будем гением компьютера.