增加一个按下Esc状态界面

src/client.js

@@ -180,6 +180,32 @@ export default class ClientList {
         // 也插入自己的信息
         const avatar = localStorage.getItem('avatar')
         this.push({ id: 'self', name: username, avatar }, true)
+
+        // 监听键盘Esc按下, 如果全局没有焦点则显示调试信息, 如果在调试信息显示期间弹起Esc则隐藏调试信息
+        let debug = false
+        let debugElement = Dialog({
+            children: [
+                Button({
+                    textContent: '关闭',
+                    onclick: event => document.body.removeChild(debugElement)
+                }),
+                Span({
+                    textContent: JSON.stringify(this.clientlist, null, 4)
+                })
+            ]
+        })
+        document.addEventListener('keydown', event => {
+            if (document.activeElement === document.body && event.key === 'Escape' && !debug) {
+                document.body.appendChild(debugElement)
+                debug = true
+            }
+        })
+        document.addEventListener('keyup', event => {
+            if (document.activeElement === document.body && event.key === 'Escape' && debug) {
+                document.body.removeChild(debugElement)
+                debug = false
+            }
+        })
     }
     getAvatar(id) { }
     setAvatar(user) {