Инспектор WebSocket захватывает каждый кадр WebSocket — отправляемый и получаемый — по всем соединениям на странице. Показывает жизненный цикл соединения (подключение/открыто/закрыто с кодами закрытия), направление для каждого кадра, размер, флаг двоичной, и предпросмотр, с красиво напечатанными полезными нагрузками JSON. Заполняет реальный пробел DevTools для отладки протокола реального времени.
WebSockets используются в приложениях чата, живых панелях мониторинга, подписках GraphQL, многопользовательских играх и совместных редакторах — но их отладка болезненна. Chrome DevTools показывает кадры WebSocket, но его пользовательский интерфейс неуклюж и фильтрация ограничена. Инспектор WebSocket дает вам более чистый вид специализированного назначения. Инструмент устанавливает обертку вокруг встроенного конструктора WebSocket в контексте страницы, поэтому каждый новый WebSocket() перехватывается. Каждое соединение появляется в списке со своим URL, статусом (подключение → открыто → закрыто), продолжительностью и кодом закрытия при отключении. Каждый кадр — отправляемый и получаемый — захватывается с временной меткой, направлением, размером, двоичным флагом и предпросмотром. Щелкните любой кадр, чтобы увидеть его полную полезную нагрузку, автоматически красиво напечатанную, если JSON. Фильтруйте по направлению (отправленные / полученные), только двоичные или по конкретному соединению. Поскольку обертка устанавливается при активировании инструмента, вы должны перезагрузить страницу, чтобы поймать существующие соединения — новые соединения захватываются с момента открытия инструмента.
Показывает каждый WebSocket со статусом (подключение/открыто/закрыто), URL, продолжительностью, кодом закрытия и любой причиной закрытия.
Как отправляемые (↑), так и полученные (↓) кадры показаны с временной меткой, размером, двоичным флагом и встроенным предпросмотром.
Щелкните кадр, чтобы увидеть полную полезную нагрузку. Строки JSON автоматически форматируются с отступом в 2 пробела для удобочитаемой проверки.
Фильтруйте кадры только отправляемым, только полученным или только двоичным — сосредоточьтесь на том, что вы отлаживаете.
Щелкните соединение, чтобы отфильтровать кадры только на то — полезно, когда активны несколько WebSockets (например, чат + наличие).
Любой WebSocket, открытый после активации инструмента, захватывается немедленно. Перезагрузка только для захвата существующих.
Посмотрите ровно какие сообщения отправляются и получаются между клиентом и сервером — определите точкой, где доставка не работает.
Проверьте операции подписки и входящие сообщения данных, чтобы отладить несовпадающие полезные нагрузки или ошибки разрыва подписки.
Поймите, как работает API реального времени третьей стороны, наблюдая его структуру сообщений и сроки.
Убедитесь, что кадры типа keep-alive отправляются в ожидаемом интервале — пропущенный пинг может объяснить неожиданные отключения.
Наблюдайте событие закрытия (с кодом и причиной) и последующие попытки нового подключения для отладки ошибок повторного подключения.
Щелкните значок WebSocket в панели DevSuite Pro. Инструмент активируется и откроется панель, показывающая соединения и кадры.
WebSockets, открытые ДО активации инструмента, не будут захвачены. Перезагрузитесь, чтобы повторно создать их и перехватить с начала.
Когда страница открывает WebSockets, они показываются в списке соединений с живыми обновлениями статуса.
Каждый кадр регистрируется в реальном времени. Фильтруйте по направлению или щелкните соединение, чтобы сузить список.
Щелкните любой кадр, чтобы увидеть его полную полезную нагрузку (красиво напечатанный JSON, если применимо) вместе с временной меткой, размером и двоичным флагом.
Установите DevSuite Pro бесплатно и разблокируйте более 64 инструментов разработчика для вашего браузера.
