Το WebSocket Inspector καταγράφει κάθε WebSocket frame — απεσταλμένο και ληφθέν — σε όλες τις συνδέσεις της σελίδας. Δείχνει τον κύκλο ζωής της σύνδεσης (connecting/open/closed με κωδικούς κλεισίματος), κατεύθυνση ανά frame, μέγεθος, σημαία binary, και προεπισκόπηση, με ωραία μορφοποιημένα payloads JSON. Καλύπτει ένα πραγματικό κενό των DevTools για αποσφαλμάτωση πρωτοκόλλων πραγματικού χρόνου.
Τα WebSockets τροφοδοτούν εφαρμογές chat, live dashboards, GraphQL subscriptions, multiplayer παιχνίδια, και συνεργατικά εργαλεία επεξεργασίας — αλλά η αποσφαλμάτωσή τους είναι επίπονη. Τα Chrome DevTools δείχνουν WebSocket frames, αλλά το UI τους είναι αδέξιο και το φιλτράρισμα περιορισμένο. Το WebSocket Inspector σας δίνει μια καθαρότερη, ειδικά σχεδιασμένη προβολή. Το εργαλείο εγκαθιστά ένα wrapper γύρω από τον εγγενή constructor WebSocket στο περιβάλλον της σελίδας, οπότε κάθε νέο new WebSocket() παρεμποδίζεται. Κάθε σύνδεση εμφανίζεται σε μια λίστα με το URL της, την κατάσταση (connecting → open → closed), τη διάρκεια, και τον κωδικό κλεισίματος όταν αποσυνδέεται. Κάθε frame — απεσταλμένο και ληφθέν — καταγράφεται με χρονική σήμανση, κατεύθυνση, μέγεθος, σημαία binary, και προεπισκόπηση. Κάντε κλικ σε οποιοδήποτε frame για να δείτε το πλήρες payload του, αυτόματα μορφοποιημένο αν είναι JSON. Φιλτράρετε κατά κατεύθυνση (απεσταλμένα / ληφθέντα), μόνο binary, ή κατά συγκεκριμένη σύνδεση. Επειδή ο wrapper εγκαθίσταται όταν ενεργοποιείται το εργαλείο, θα χρειαστεί να επαναφορτώσετε τη σελίδα για να συλλάβετε υπάρχουσες συνδέσεις — νέες συνδέσεις καταγράφονται από τη στιγμή που ανοίγετε το εργαλείο.
Δείχνει κάθε WebSocket με κατάσταση (connecting/open/closed), URL, διάρκεια, κωδικό κλεισίματος, και τυχόν αιτία κλεισίματος.
Εμφανίζονται τόσο τα απεσταλμένα (↑) όσο και τα ληφθέντα (↓) frames με χρονική σήμανση, μέγεθος, σημαία binary, και ενσωματωμένη προεπισκόπηση.
Κάντε κλικ σε ένα frame για να δείτε το πλήρες payload. Τα strings JSON μορφοποιούνται αυτόματα με εσοχή 2 κενών για ευανάγνωστη επιθεώρηση.
Φιλτράρετε τα frames ώστε να δείχνουν μόνο απεσταλμένα, μόνο ληφθέντα, ή μόνο binary — επικεντρωθείτε σε αυτό που αποσφαλματώνετε.
Κάντε κλικ σε μια σύνδεση για να φιλτράρετε τα frames μόνο σε αυτήν — χρήσιμο όταν είναι ενεργά πολλαπλά WebSockets (π.χ. chat + presence).
Κάθε WebSocket που ανοίγει μετά την ενεργοποίηση του εργαλείου καταγράφεται αμέσως. Επαναφορτώστε μόνο για να συλλάβετε τις προϋπάρχουσες.
Δείτε ακριβώς ποια μηνύματα στέλνονται και λαμβάνονται μεταξύ client και server — εντοπίστε πού αποτυγχάνει η παράδοση.
Επιθεωρήστε λειτουργίες subscription και εισερχόμενες αποστολές δεδομένων για να αποσφαλματώσετε αναντιστοιχίες payload ή σφάλματα τερματισμού subscription.
Κατανοήστε πώς λειτουργεί ένα realtime API τρίτου παρατηρώντας τη δομή και τον χρονισμό των μηνυμάτων του.
Επαληθεύστε ότι τα frames keep-alive στέλνονται στο αναμενόμενο διάστημα — ένα χαμένο ping μπορεί να εξηγήσει απροσδόκητες αποσυνδέσεις.
Παρακολουθήστε το συμβάν close (με κωδικό και αιτία) και τις επόμενες προσπάθειες νέας σύνδεσης για να αποσφαλματώσετε σφάλματα retry/reconnect.
Κάντε κλικ στο εικονίδιο WebSocket στο dock του DevSuite Pro. Το εργαλείο ενεργοποιείται και ανοίγει ένα panel που δείχνει συνδέσεις και frames.
Τα WebSockets που ανοίχτηκαν ΠΡΙΝ ενεργοποιηθεί το εργαλείο δεν θα καταγραφούν. Επαναφορτώστε για να τα δημιουργήσετε ξανά και να τα παρεμποδίσετε από την αρχή.
Καθώς η σελίδα ανοίγει WebSockets, εμφανίζονται στη λίστα Connections με ενημερώσεις κατάστασης σε πραγματικό χρόνο.
Κάθε frame καταγράφεται σε πραγματικό χρόνο. Φιλτράρετε κατά κατεύθυνση ή κάντε κλικ σε μια σύνδεση για να περιορίσετε τη λίστα.
Κάντε κλικ σε οποιοδήποτε frame για να δείτε το πλήρες payload του (JSON ωραία μορφοποιημένο αν ισχύει) μαζί με χρονική σήμανση, μέγεθος, και σημαία binary.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 64+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
