Pro

מפקח WebSocket

מפקח WebSocket לוכד כל פריים של WebSocket - נשלח והתקבל - בכל החיבורים בדף. מציג את מחזור החיים של החיבור (connecting/open/closed עם קודי סגירה), כיוון לכל פריים, גודל, דגל בינארי, ותצוגה מקדימה, עם מטעני (payloads) JSON מעוצבים לקריאה. ממלא פער אמיתי בכלי המפתחים (DevTools) לניפוי שגיאות של פרוטוקולי זמן אמת.

הוסף ל-Chrome הוסף ל-Edge הוסף ל-FireFox

WebSockets מפעילים אפליקציות צ'אט, לוחות בקרה חיים, מנויים (subscriptions) של GraphQL, משחקי מרובי משתתפים ועורכים שיתופיים - אבל ניפוי השגיאות שלהם הוא מתסכל. כלי המפתחים של Chrome מציג פריימים של WebSocket, אבל ממשק המשתמש שלו מגושם והסינון מוגבל. מפקח ה-WebSocket מספק לכם תצוגה נקייה וממוקדת מטרה. הכלי מתקין מעטפת סביב בנאי (constructor) ה-WebSocket המובנה בהקשר של הדף, כך שכל WebSocket() חדש מיורט. כל חיבור מופיע ברשימה עם כתובת ה-URL שלו, הסטטוס (connecting → open → closed), משך הזמן וקוד הסגירה בעת ניתוק. כל פריים - נשלח או התקבל - נלכד עם חותמת זמן, כיוון, גודל, דגל בינארי ותצוגה מקדימה. לחצו על כל פריים כדי לראות את המטען (payload) המלא שלו, שמעוצב אוטומטית לקריאה אם הוא JSON. סננו לפי כיוון (נשלח / התקבל), בינארי בלבד, או לפי חיבור ספציפי. מכיוון שהמעטפת מותקנת כאשר הכלי מופעל, תרצו לרענן את הדף כדי ללכוד חיבורים קיימים - חיבורים חדשים נלכדים מהרגע שאתם פותחים את הכלי.

תצוגה מקדימה חיה

example.com

בודק WebSocket ● 2 חיבורים פעילים

חיבורים

wss://realtime.example.com/chat פתוח · 2m

wss://graphql.example.com/subscriptions פתוח · 8m

הכל ↑ שלח ↓ קלט ↑ 12 · ↓ 47 · 8.4 KB

                        ↓
                        14:32:05
                        
                        {"type":"connection_ack"}
                        28 B
                    

                        ↑
                        14:32:05
                        
                        {"type":"subscribe","id":"1","payload":...}
                        98 B
                    

                        ↓
                        14:32:06
                        
                        {"id":"1","type":"next","payload":{"data":...}
                        412 B
                    

                        ↓
                        14:32:07
                        
                        {"id":"1","type":"next","payload":{"data":...}
                        398 B
                    

                        ↓
                        14:32:14
                        BIN
                        [ArrayBuffer 1024 bytes]
                        1.0 KB
                    

                        ↓
                        14:32:15
                        
                        {"id":"1","type":"next","payload":{"data":...}
                        389 B
                    

תכונות מפתח

מחזור חיים לכל חיבור

מציג כל WebSocket עם סטטוס (connecting/open/closed), URL, משך זמן, קוד סגירה, וכל סיבת סגירה.

כל פריים נלכד

פריימים שנשלחו (↑) ושהתקבלו (↓) מוצגים עם חותמת זמן, גודל, דגל בינארי ותצוגה מקדימה בשורה (inline).

עיצוב JSON קריא (Pretty-Printing)

לחצו על פריים כדי לראות את המטען המלא. מחרוזות JSON מעוצבות אוטומטית עם הזחה של 2 רווחים לבדיקה קריאה.

סינון לפי כיוון / בינארי

סננו פריימים רק לאלו שנשלחו, התקבלו או שהם בינאריים בלבד - התמקדו במה שאתם מנפים.

סינון לכל חיבור

לחצו על חיבור כדי לסנן פריימים רק עבורו - שימושי כאשר ישנם מספר WebSockets פעילים (למשל צ'אט + נוכחות).

אין צורך ברענון עבור חיבורים חדשים

כל WebSocket שנפתח לאחר הפעלת הכלי נלכד באופן מיידי. רעננו רק כדי לתפוס חיבורים קיימים.

מקרי שימוש נפוצים

ניפוי שגיאות באפליקציות צ'אט

ראו בדיוק אילו הודעות נשלחות ומתקבלות בין הלקוח והשרת - אתרו היכן מסירה נכשלת.

ניפוי שגיאות של מנויי (Subscriptions) GraphQL

בדקו פעולות מנוי (subscription) ודחיפות נתונים נכנסים (data pushes) כדי לנפות מטענים (payloads) לא תואמים או באגים בפירוק מנויים.

הנדסה לאחור של פרוטוקול

הבינו כיצד פועל API בזמן אמת של צד שלישי על ידי התבוננות במבנה ההודעות והתזמון שלו.

מעקב אחר Heartbeat / Ping-Pong

וודאו שפריימי keep-alive נשלחים במרווח הזמן הצפוי - ping שהוחמץ יכול להסביר ניתוקים בלתי צפויים.

ניפוי שגיאות של לוגיקת התחברות מחדש

צפו באירוע הסגירה (עם קוד וסיבה) ובניסיונות החיבור החדשים שבאים אחריו כדי לנפות באגים של ניסיון חוזר/התחברות מחדש.

איך להשתמש

פתח את מפקח ה-WebSocket

לחצו על סמל ה-WebSocket ב-DevSuite Pro. הכלי מופעל וחלונית נפתחת המציגה חיבורים ופריימים.

רענן את הדף (במידת הצורך)

WebSockets שנפתחו לפני הפעלת הכלי לא יילכדו. רעננו כדי ליצור אותם מחדש וליירט מההתחלה.

צפה בחיבורים מופיעים

כאשר הדף פותח WebSockets, הם מופיעים ברשימת החיבורים עם עדכוני סטטוס בזמן אמת.

עיין בפריימים

כל פריים מתועד בזמן אמת. סננו לפי כיוון או לחצו על חיבור כדי לצמצם את הרשימה.

לחץ על פריימים לפרטים

לחצו על כל פריים כדי לראות את המטען המלא שלו (JSON קריא במידת הצורך) יחד עם חותמת זמן, גודל ודגל בינארי.