WebSocket-tarkastaja (WebSocket Inspector) kaappaa jokaisen WebSocket-kehyksen — lähetetyn ja vastaanotetun — kaikissa sivun yhteyksissä. Näyttää yhteyden elinkaaren (yhdistetään/auki/suljettu sulkemiskoodeilla), kehyskohtaisen suunnan, koon, binäärilipun ja esikatselun sekä kauniisti muotoillut JSON-hyötykuormat. Täyttää todellisen DevTools-puutteen reaaliaikaisessa protokollan virheenkorjauksessa.
WebSocketit pyörittävät chat-sovelluksia, live-kojelautoja, GraphQL-tilauksia, moninpelejä ja yhteistyömuokkaimia — mutta niiden virheenkorjaus on tuskallista. Chrome DevTools näyttää WebSocket-kehyksiä, mutta sen käyttöliittymä on kömpelö ja suodatus on rajoitettua. WebSocket-tarkastaja antaa sinulle selkeämmän, tarkoitukseen rakennetun näkymän. Työkalu asentaa kääreen natiivin WebSocket-konstruktorin ympärille sivun kontekstissa, joten jokainen uusi WebSocket() siepataan. Jokainen yhteys näkyy luettelossa URL-osoitteineen, tiloineen (yhdistetään → auki → suljettu), kestoineen ja sulkemiskoodeineen yhteyden katketessa. Jokainen kehys — lähetetty ja vastaanotettu — kaapataan aikaleiman, suunnan, koon, binäärilipun ja esikatselun kera. Napsauta mitä tahansa kehystä nähdäksesi sen koko hyötykuorman, automaattisesti kauniisti muotoiltuna, jos kyseessä on JSON. Suodata suunnan (lähetetty / vastaanotettu), vain binäärin tai tietyn yhteyden mukaan. Koska kääre asentuu, kun työkalu aktivoituu, sinun kannattaa ladata sivu uudelleen olemassa olevien yhteyksien nappaamiseksi — uudet yhteydet kaapataan siitä hetkestä lähtien, kun avaat työkalun.
Näyttää jokaisen WebSocketin tilan (yhdistetään/auki/suljettu), URL-osoitteen, keston, sulkemiskoodin ja mahdollisen sulkemisen syyn.
Sekä lähetetyt (↑) että vastaanotetut (↓) kehykset näytetään aikaleiman, koon, binäärilipun ja upotetun esikatselun kera.
Napsauta kehystä nähdäksesi koko hyötykuorman. JSON-merkkijonot muotoillaan automaattisesti 2 välilyönnin sisennyksellä luettavaa tarkastelua varten.
Suodata kehyksiä näyttämään vain lähetetyt, vain vastaanotetut tai vain binääri — keskity siihen, mitä olet korjaamassa.
Napsauta yhteyttä suodattaaksesi kehykset vain kyseiseen yhteyteen — hyödyllinen, kun useita WebSocketeja on aktiivisena (esim. chat + paikallaolo).
Mikä tahansa työkalun aktivoitumisen jälkeen avattu WebSocket kaapataan välittömästi. Lataa uudelleen vain napataksesi jo olemassa olevat.
Näe tarkalleen, mitä viestejä lähetetään ja vastaanotetaan asiakkaan ja palvelimen välillä — paikanna, missä toimitus epäonnistuu.
Tarkastele tilaustoimintoja ja saapuvia tietopuskuruita virheenkorjataksesi yhteensopimattomia hyötykuormia tai tilauksen purkamisbugeja.
Ymmärrä kuinka kolmannen osapuolen reaaliaikainen API toimii tarkkailemalla sen viestirakennetta ja ajoitusta.
Varmista, että ylläpitokehyksiä (keep-alive) lähetetään odotetuin väliajoin — väliin jäänyt ping voi selittää odottamattomat yhteyden katkeamiset.
Seuraa sulkemistapahtumaa (koodilla ja syyllä) ja sitä seuraavia uusia yhteysyrityksiä virheenkorjataksesi uudelleenyritys-/uudelleenyhdistämisbugeja.
Napsauta WebSocket-kuvaketta DevSuite Pro -telakassa. Työkalu aktivoituu ja paneeli avautuu näyttäen yhteydet ja kehykset.
ENNEN työkalun aktivoitumista avattuja WebSocketeja ei kaapata. Lataa uudelleen luodaksesi ne uudestaan ja siepataksesi ne alusta alkaen.
Kun sivu avaa WebSocketeja, ne näkyvät Yhteydet-luettelossa reaaliaikaisilla tilapäivityksillä.
Jokainen kehys kirjataan reaaliajassa. Suodata suunnan mukaan tai napsauta yhteyttä kaventaaksesi luetteloa.
Napsauta mitä tahansa kehystä nähdäksesi sen koko hyötykuorman (kauniisti muotoiltu JSON, jos sovellettavissa) sekä aikaleiman, koon ja binäärilipun.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 64 kehittäjätyökalua selaimellesi.
