Отладка WebSocket в Google Chrome


213

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

Ответы:


250

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

Обработать:

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

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


1
Знаете ли вы, как использовать Wireshark для этого? Я никогда не использовал его, и он показывает весь сетевой трафик и показывает необработанные пакеты.
mellowsoon

2
Вы можете ограничить захват одним портом, используя фильтры захвата . Кроме того, после получения захвата вы сможете щелкнуть правой кнопкой мыши любой захваченный кадр, являющийся частью сеанса, и выбрать опцию, чтобы показать только этот сеанс.
Канака

1
К сожалению, использование WireShark с использованием localhost в Windows требует прыжков через обручи, чтобы заставить его работать. См. Wiki.wireshark.org/CaptureSetup/Loopback
Грег Вудс

2
Недавно я написал статью о CodeProject, в которой показано, как отлаживать / проверять трафик WebSocket с помощью Fiddler. codeproject.com/Articles/718660/…
engineforce

1
@NiCkNewman да, это 7-битное поле, указывающее длину в байтах полезной нагрузки. Однако, если значение поля составляет 126 или 127, то следующие 16 или 64 бита соответственно являются длиной полезной нагрузки в байтах. Смотрите описание поля длины в спецификации: tools.ietf.org/html/rfc6455#section-5.2 (это довольно легко сделать). Это немного странно, но делает короткие сообщения очень эффективными (всего 2 байта заголовка).
Канака

72

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.


3
Будьте осторожны при публикации копируй и вставляй шаблонные / дословные ответы на несколько вопросов, они, как правило, помечаются сообществом как «спам». Если вы делаете это, то это обычно означает, что вопросы являются дубликатами, поэтому пометьте их как таковые.
Кев

2
Спасибо за шаг 6! Я знал о фильтре WebSockets на вкладке «Сеть», но был разочарован тем, что он, похоже, ловил только мои первые несколько сообщений. Знаете ли вы, есть ли способ сообщить ему о соединении через веб-сокет, которое было открыто до того, как вы открыли вкладку?
Брайан Хэд

Брайан - я не верю, что ты можешь сегодня.
Петр Московиц

@PeterMoskovits Знаете ли вы, как можно проверить содержимое двоичных фреймов в Chrome? В настоящее время я могу видеть только его длину!
Хауи

@ Хауи Вы не можете сделать это с Chrome. Вы можете использовать WireShark для этого. Наша новая книга «Полное руководство по HTML5 WebSocket» также дает вам краткое введение в WireShark. amazon.com/Definitive-Guide-HTML5-WebSocket-Apress/dp/…
Питер Московиц

52

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

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

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

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

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


Мне не нравится, как этот JSON отформатирован там безобразно. Нет форматирования в принципе.
SES

1
@ses это протокол signalR. Возьми это с Microsoft 😜
Simon_Weaver

1
рад, что хотя бы этот ответ по-прежнему хорош через четыре года: р
Стю Томпсон

1
@StuThompson да - мои голоса продолжают накапливаться :-)
Simon_Weaver

41

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

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

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


Спасибо! Кроме того: Открываемая страница должна быть того же источника, что и веб-сокет. Если вы попытаетесь открыть инструменты разработчика Chrome в другом источнике (или даже на новой вкладке), а затем подключитесь к веб-сокету, вы получите ошибку авторизации.
Дэн Эспарза

Есть ли способ это исправить?
not2qubit

37

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

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

chrome://net-internals/#sockets

10

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

Однако вы можете использовать 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


5

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

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

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


4

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

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

1
Кажется, это работает, за исключением того, что это раздражает, что он перестает работать, если вы отключаетесь и повторно подключаетесь к URL-адресу websocket (например, на websocket.org/echo.html ), и в этом случае вы должны обновить страницу! :(
matanster

3

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


2

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


2

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.