在瀏覽器中調試HTML5服務器發送的事件

在Chrome（或者Firefox）中有沒有任何查看/調試Server-Sent Events的方法？我希望他們出現在Chrome開發人員工具的「網絡」標籤中。我所知道的最接近的方式是下降到Wireshark，但相比之下這相當麻煩。例如，http://www.emojitracker.com/。您將看到頁面實時更新來自服務器的數據，但網絡選項卡中沒有任何活動。（它訂閱/application.js行97上的服務器事件。）在瀏覽器中調試HTML5服務器發送的事件

來源

2014-09-21 Mike Chamberlain

訪問chrome://cache並單擊服務器發送事件的URL。然後，你將被重定向到像chrome://view-http-cache/http://emojitrack-gostreamer.herokuapp.com/subscribe/eps一個網頁，其中包含以下內容：

http://emojitrack-gostreamer.herokuapp.com/subscribe/eps 
HTTP/1.1 200 OK 
Access-Control-Allow-Origin: * 
Cache-Control: no-cache 
Content-Type: text/event-stream; charset=utf-8 
Server: emojitrack-gostreamer 
Date: Sun, 21 Sep 2014 11:17:48 GMT 
Via: 1.1 vegur 
00000000: fc 00 00 00 03 00 04 00 fd 79 7d c4 27 62 2e 00 .........y}.'b.. 
00000010: 0c 87 7f c4 27 62 2e 00 c8 00 00 00 48 54 54 50 ....'b......HTTP 
00000020: 2f 31 2e 31 20 32 30 30 20 4f 4b 00 41 63 63 65 /1.1 200 OK.Acce 
00000030: 73 73 2d 43 6f 6e 74 72 6f 6c 2d 41 6c 6c 6f 77 ss-Control-Allow 
00000040: 2d 4f 72 69 67 69 6e 3a 20 2a 00 43 61 63 68 65 -Origin: *.Cache 
00000050: 2d 43 6f 6e 74 72 6f 6c 3a 20 6e 6f 2d 63 61 63 -Control: no-cac 
00000060: 68 65 00 43 6f 6e 74 65 6e 74 2d 54 79 70 65 3a he.Content-Type: 
00000070: 20 74 65 78 74 2f 65 76 65 6e 74 2d 73 74 72 65 text/event-stre 
00000080: 61 6d 3b 20 63 68 61 72 73 65 74 3d 75 74 66 2d am; charset=utf- 
00000090: 38 00 53 65 72 76 65 72 3a 20 65 6d 6f 6a 69 74 8.Server: emojit 
000000a0: 72 61 63 6b 2d 67 6f 73 74 72 65 61 6d 65 72 00 rack-gostreamer. 
000000b0: 44 61 74 65 3a 20 53 75 6e 2c 20 32 31 20 53 65 Date: Sun, 21 Se 
000000c0: 70 20 32 30 31 34 20 31 31 3a 31 37 3a 34 38 20 p 2014 11:17:48 
000000d0: 47 4d 54 00 56 69 61 3a 20 31 2e 31 20 76 65 67 GMT.Via: 1.1 veg 
000000e0: 75 72 00 00 0d 00 00 00 35 30 2e 31 37 2e 32 34 ur......50.17.24 
000000f0: 35 2e 32 31 33 00 00 00 50 00 00 00 01 00 00 00 5.213...P....... 

00000000: 64 61 74 61 3a 7b 22 31 46 34 34 45 22 3a 31 2c data:{"1F44E":1, 
00000010: 22 31 46 34 36 44 22 3a 31 7d 0a 0a 64 61 74 61 "1F46D":1}..data 
00000020: 3a 7b 22 31 46 34 41 39 22 3a 31 2c 22 31 46 36 :{"1F4A9":1,"1F6 
00000030: 31 32 22 3a 31 7d 0a 0a 64 61 74 61 3a 7b 22 31 12":1}..data:{"1 
00000040: 46 34 39 36 22 3a 31 7d 0a 0a 64 61 74 61 3a 7b F496":1}..data:{ 
00000050: 22 31 46 36 31 44 22 3a 31 7d 0a 0a 64 61 74 61 "1F61D":1}..data 
00000060: 3a 7b 22 31 46 33 35 35 22 3a 31 2c 22 31 46 36 :{"1F355":1,"1F6 
00000070: 31 44 22 3a 31 2c 22 31 46 36 33 34 22 3a 31 7d 1D":1,"1F634":1} 
00000080: 0a 0a 64 61 74 61 3a 7b 22 31 46 33 33 39 22 3a ..data:{"1F339":

按F5刷新視圖。（如果請求選項卡關閉，則該項目將從緩存中刪除，您將看到「no matching cache entry for: http://emojitrack-gostreamer.herokuapp.com/subscribe/eps」）。

來源

2014-09-21 11:21:47

這些事件現在出現在「網絡」選項卡中。點擊SSE流的URL，你將有一個「EventStream」選項卡：

來源

2017-09-06 12:31:29 Thierry

右鍵點擊「複製響應」獲得剪貼板中的反應（即EventStream選項卡不顯示，如果一切這是一個大JSON） – grasevski 2018-02-12 04:22:36

在瀏覽器中調試HTML5服務器發送的事件

回答

相關問題