Налагодження 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. Перейдіть до демонстрації Echo WebSocket Echo , розміщеного на веб- сайті websocket.org .
2. Увімкніть Інструменти для розробників Chrome.
3. Клацніть Мережа , і щоб відфільтрувати трафік, показаний інструментами Dev, натисніть WebSockets .
4. У демонстраційній програмі Echo натисніть Підключити . На вкладці Заголовки в інструменті Google Dev ви можете перевірити рукостискання WebSocket.
5. Натисніть кнопку Надіслати в демонстраційній програмі Echo.
6. ЦИЙ КРОК ВАЖЛИВО : Щоб побачити кадри WebSocket в Інструментах для розробників Chrome, в розділі Ім'я / Шлях натисніть запис echo.websocket.org, що представляє ваше з'єднання WebSocket. Це оновлює головну панель праворуч і змушує вкладку WebSocket Frames відображатися з фактичним вмістом повідомлення WebSocket.

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

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

У моїй нещодавно опублікованій книзі " Поточний посібник по HTML5 WebSocket" також є спеціальний додаток, що охоплює різні інструменти огляду, включаючи інструменти для розробників Chrome, сіткові мережі Chrome та 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

У вас є три варіанти: 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.