WebSocket Inspector прихваща всеки WebSocket фрейм — изпратен и получен — от всички връзки на страницата. Показва жизнения цикъл на връзката (свързване/отворена/затворена с кодове на затваряне), посока на всеки фрейм, размер, флаг за двоични данни и преглед, с форматиран JSON payload. Запълва реална празнина в DevTools за дебъгване на realtime протоколи.
WebSocket-ите захранват чат приложения, live табла, GraphQL subscriptions, мултиплейър игри и приложения за съвместна редакция — но дебъгването им е болезнено. Chrome DevTools показва WebSocket фреймове, но интерфейсът му е тромав, а филтрирането — ограничено. WebSocket Inspector ви дава по-чист, специализиран изглед. Инструментът инсталира обвивка около нативния конструктор WebSocket в контекста на страницата, така че всеки нов WebSocket() се прихваща. Всяка връзка се появява в списък с нейния URL, статус (connecting → open → closed), продължителност и код на затваряне при прекъсване. Всеки фрейм — изпратен и получен — се записва с времеви печат, посока, размер, флаг за двоични данни и преглед. Кликнете върху всеки фрейм, за да видите пълния му payload, автоматично форматиран, ако е JSON. Филтрирайте по посока (изпратени / получени), само двоични, или по конкретна връзка. Тъй като обвивката се инсталира при активиране на инструмента, ще трябва да презаредите страницата, за да прихванете съществуващите връзки — новите връзки се прихващат от момента, в който отворите инструмента.
Показва всеки WebSocket със статус (connecting/open/closed), URL, продължителност, код на затваряне и причина за затваряне, ако има такава.
Както изпратените (↑), така и получените (↓) фреймове се показват с времеви печат, размер, флаг за двоични данни и преглед на място.
Кликнете върху фрейм, за да видите пълния payload. JSON низовете се форматират автоматично с отстъп от 2 интервала за лесно четене.
Филтрирайте фреймовете само до изпратени, само получени или само двоични — фокусирайте се върху това, което дебъгвате.
Кликнете върху връзка, за да филтрирате фреймовете само до нея — полезно, когато има активни няколко WebSocket-а (напр. чат + присъствие).
Всеки WebSocket, отворен след активиране на инструмента, се прихваща веднага. Презареждайте само за да прихванете вече съществуващите.
Вижте точно кои съобщения се изпращат и получават между клиент и сървър — открийте къде се проваля доставката.
Инспектирайте subscription операциите и входящите изпращания на данни, за да дебъгвате несъответстващи payload-и или грешки при прекратяване на subscription.
Разберете как работи realtime API на трета страна, като наблюдавате структурата и времето на съобщенията му.
Потвърдете, че keep-alive фреймовете се изпращат с очаквания интервал — пропуснат ping може да обясни неочаквани прекъсвания на връзката.
Наблюдавайте събитието за затваряне (с код и причина) и последващите опити за нова връзка, за да дебъгвате грешки при retry/reconnect.
Кликнете иконата WebSocket в дока на DevSuite Pro. Инструментът се активира и се отваря панел, показващ връзки и фреймове.
WebSocket-и, отворени ПРЕДИ активирането на инструмента, няма да бъдат прихванати. Презаредете, за да ги пресъздадете и прихванете от началото.
Докато страницата отваря WebSocket-и, те се появяват в списъка Connections с актуализации на статуса в реално време.
Всеки фрейм се записва в реално време. Филтрирайте по посока или кликнете върху връзка, за да стесните списъка.
Кликнете върху всеки фрейм, за да видите пълния му payload (форматиран JSON, ако е приложимо) заедно с времеви печат, размер и флаг за двоични данни.
Инсталирайте DevSuite Pro безплатно и отключете 64+ инструмента за разработчици за вашия браузър.
