【问题标题】:Debugging HTML5 Server-Sent Events in-browser在浏览器中调试 HTML5 服务器发送的事件
【发布时间】:2014-11-15 08:47:27
【问题描述】:

有没有办法在 Chrome(或者可能是 Firefox)中查看/调试Server-Sent Events?我希望它们会出现在 Chrome 开发者工具的网络标签中。我知道的最接近的方法是下拉到 Wireshark,但相比之下这相当麻烦。

例如,转到http://www.emojitracker.com/。您将看到页面使用来自服务器的数据实时更新,但网络选项卡中不会出现任何活动。 (它在 /application.js 的第 97 行订阅服务器事件。)

【问题讨论】:

    标签: html google-chrome debugging server-sent-events


    【解决方案1】:

    访问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”)。

    【讨论】:

      【解决方案2】:

      事件现在出现在网络选项卡中。单击 SSE 流的 URL,您将有一个“EventStream”选项卡:

      【讨论】:

      • 右键单击并“复制响应”以在剪贴板中获取响应(如果它是大 json,则 EventStream 选项卡不会显示所有内容)
      • 有没有办法在 FireFox 上看到同样的东西?
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-06-21
      • 1970-01-01
      • 2011-11-20
      • 2014-03-12
      相关资源
      最近更新 更多