Remote Debugging 远程调试 那些事儿
大本营在此:https://developers.google.com/chrome-developer-tools/docs/remote-debugging、
关键信息1:谷歌把remote debugging做成协议提交到webkit了,所以基于webkit的浏览器都可以用了,而且用法基本一样。
关键信息2:Google Dev Tools都是HTML,JS和CSS写的,也可以用来做remote debugging,这说明,Inspector里面所有的功能都可以基于remote debugging的协议来完成,我们看到的精巧的Inspector,其实不是本地代码写的,而是一个web页面,神奇吧。
Remote Debugging的协议内容大致如下:
1, Console – 定义了和JavaScript的console交互的方法和事件。 (defines methods and events for interaction with the JavaScript console.)
2, CSS – 暴露了CSS底层的读写操作。(exposes low level CSS read / write operations.)
3, Debugger – 暴露了JavaScript调试函数;允许设置和移除断点,单步执行,查看栈轨迹。(exposes JavaScript debugging functions; allows setting and removing breakpoints, stepping through execution, exploring stack traces, etc.)
4, DOM – 这部分暴露了DOM的读写操作。(This domain exposes DOM read/write operations.)
5, DOM Debugger –允许在特殊的DOM操作和事件上设置断点。JavaScript执行到这些操作时会停止,就像已经设置了一个常规的断点。 (allows setting breakpoints on particular DOM operations and events. JavaScript execution will stop on these operations as if there was a regular breakpoint set.)
6, Network – 允许监测页面的活动;暴露HTTP和WebSocket请求及回应的信息,信息头,信息体,原始时间等。 (allows tracking network activities of the page; exposes information about HTTP and WebSocket requests and responses, their headers, bodies, raw timing, etc.)
7, Page – 和正在查看的页面相关的动作和事件。 (actions and events related to the inspected page.)
8, Runtime – 通过远程估值和镜像对象来暴露JavaScript的运行时。 (exposes JavaScript runtime by means of remote evaluation and mirror objects.)
9, Timeline – 在页面运行过程中,产生并提供给客户端仪表化的记录。 (provides its clients with instrumentation records that are generated during the page runtime.)
哇哦,如此丰富的功能可供我们使用!可是,这么好的东西,怎么才能用起来呢?Chrome里有两种方案:
1,先要这样去启动Chrome:chrome.exe --remote-debugging-port=9222
然后就简单了,按照remote debugging协议定义的,向这个地址“http://localhost:9222”发送基于HTTP协议的,JSON格式的信息即可完成调用。至于想要把界面弄成什么样子,这就看自己的设计了。文章中特别说明,协议定义的命令用HTTP发就可以了,不用实现websocket,那做界面的方案选择的余地就很大了。用一个IE页面去做也是可以的。
不过,仔细对比webkit (http://www.webkit.org/blog/1620/webkit-remote-debugging/) 的信息会发现,WebSocket借助于页面加载事件建立了,此后的JSON收发都是在WebSocket协议之上。这个方案可能是webkit官方的做法。好处是响应迅速,通信量少,不好之处就是还需要客户端实现WebSocket,而很多本地程序很难支持,导致这个方案的适用性降低了一个数量级。实际上remote debugging多是局域网内的连接调试,WebSocket那些优势都体现不出来,反倒不如全程基于HTTP协议更易用一些。
2,这是为那些喜欢为Chrome创造extension,也就是浏览器插件的人准备的:chrome.debugger,API在这里:http://developer.chrome.com/trunk/extensions/debugger.html
在extension里面,发送命令就很简单了,使用API:chrome.debugger.sendCommand即可完成。