Как просмотреть содержимое запроса WS/WSS Websocket с помощью Firebug или другого?

Есть ли способ просмотра трафика Websocket?

В начальном рукопожатии видны только заголовки Websocket.

После ответа все исчезает:

Connection  Upgrade
Sec-WebSocket-Accept    EQqklpK6bzlgAAOL2EFX/nx8bEI=
Upgrade WebSocket

Я пробовал Firebug, Live Headers и Fiddler2 для отслеживания обмена, и все они останавливаются там.

Ответ 1

Попробуйте инструменты разработчика Chrome,

  • перейдите на вкладку "Сеть".
  • используйте фильтры внизу, чтобы показывать только соединения WebSocket),
  • выберите желаемое соединение с веб-сервером,
  • обратите внимание, что есть заголовки, заголовки "Предварительный просмотр", "Ответ" и т.д. справа,
  • После того, как начнется поток данных, появится подзаборка "WebSocket Frames". Все данные, идущие в любом направлении, регистрируются. Очень информативно.

Ответ 2

По состоянию на 3 сентября 2014 года кажется, что отладка WebSocket в FireBug находится в затруднительном положении: https://getfirebug.com/wiki/index.php/Firebug_2.0_Roadmap#Feature_Overview. Но дата выхода не упоминается.


Обновление 2019-09-19

Посмотрите эту интересную статью Mozilla Hacks.


Обновление 2017-11-24 Система плагинов в Firefox изменена. Websocket Monitor в данный момент недоступен :(


Обновление 2016-04-06

Отладка WebSocket в Firefox наконец возможна с помощью аддона Websocket Monitor для Firefox Dev Tools! Он разработан командой разработчиков Firebug, и его источники можно найти здесь.


Обновление 2015-10-28

Джефф Гриффитс, менеджер по продуктам для разработчиков Firefox:

поддержка платформ сегодня вечером & над прототипом работает надстройка: https://github.com/firebug/websocket-monitor

https://twitter.com/canuckistani/status/659399140590284800

Соответствующий запрос на функцию Firefox Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1203802


Дополнение от 2015-04-08

Fiddler 4.5 теперь может самостоятельно проверять трафик WebSocket.


Обновление 2014-09-11

Относительно этого комментария на трекере Firebug:

Это в настоящее время вне радара, так как команда Firebug работает над интеграция Firebug с DevTools на данный момент. Это значит сможет повторно использовать функции, предоставляемые встроенным DevTools. Поэтому вы можете следовать https://bugzil.la/885508.

Ответ 3

Текущая версия Fiddler отлично работает с трафиком WebSocket. См. http://blogs.msdn.com/b/fiddler/archive/2011/11/22/fiddler-and-websockets.aspx

См. http://blogs.telerik.com/fiddler/posts/13-06-04/what-s-new-in-fiddler-2-4-4-5 для размещения данных на вкладке Log.

Чтобы отобразить данные на вкладке WebSockets,

WebSockets tab

вам нужно расширение (это планируется для версии 2.5). Пока вы можете захватить текущие биты. Просто извлеките ZIP и поместите два файла в папку \Fiddler2\Scripts и перезапустите Fiddler. Если вы дважды щелкните по сеансу WebSocket в списке Fiddlers WebSessions, появится вкладка WebSockets

Ответ 4

Существует WebSocket Monitor - расширение для инструментов разработчика Firefox, которое можно использовать для мониторинга соединений WebSocket

После того, как расширение установлено, откройте Firefox Developer Tools и перейдите на панель "Web Sockets". Он отображает трафик фрейма WS для текущей страницы. Существует дополнительная поддержка для следующих протоколов:

  • Socket IO
  • SockJS
  • WAMP
  • Обычный JSON

Панель WebSockets в Firefox DevTools

Ответ 5

Не так удобно, как другие варианты, упомянутые здесь, но универсальный инструмент, который может помочь вам в различных ситуациях: используйте wireshark. С некоторыми знаниями о TCP вы можете отлаживать проблемы, которые другие упомянутые инструменты не могут решить (неожиданные отключения,...), потому что они работают на слишком высоком уровне. Вы также можете (как и в Firebug и т.д.) Читать фактические сообщения в веб-рассылке.

Недостатком wirehark является то, что он довольно громоздкий для работы с зашифрованными соединениями.

Дайте ему попробовать, я все время использую его для отладки приложения Rails, которое взаимодействует с брандмауэром Python websocket.

Ответ 7

Использовать инструменты разработчика Chrome

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

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

Вы увидите изменения данных на вкладке "Фреймы".

Ответ 8

В firefox вы можете открыть панель инструментов разработчика (Shift + F2) и увидеть веб-узлы на вкладке "Сеть". Вы можете использовать фильтрацию в нижней части вкладки (выберите "Другое" для веб-сайтов).