最近在用pomelo开发游戏的服务端，发现每添加一条协议都要重新运行游戏特别麻烦，就自己动手谢了一个网页的客户端，来调试协议，主要用到的工具Google Chrome浏览器的开发者工具。
一 打开方式
F12
Ctrl+Shift+b/i/j
二 主要窗口
1 Console
js代码中使用console.debug/console.log输出的信息，会显示在这里。
2 Resource
可以查看web程序跑起来后所加载的一些资源（Resources），包括图片或者其他“值”，以及Cookie。
3 Sources
可以查看网页的原始文件包括html，js，css等，是最常用的调试窗口。
在这里打开js文件可以添加断点，在可以在Watch Expressions中添加变量名，监视其值变化。
4 NetWork
可以查看发送和接收的网络数据。
5 Elements
html的页面元素
三 刷新
F5
Ctrl+R
四 保存调试代码
1、打开chrome后，按F12或者ctrl+shift+i，打开 Developer Tools 开发者工具，
然后单击右侧的设置图标。切换到 Workspace 点击 Add folder 按钮，
浏览添加本地文件夹或文件。选择后，浏览器会有一个提示，请进行确认。
可以设置一个或多个文件夹。
2、选择Source 选项卡，ctrl+o 或者鼠标选择刚添加相应的文件，打开后即可进行编辑，
编辑后可以按ctrl+s进行保存。
Google Chrome开发者工具基本使用方法
原文：http://blog.csdn.net/xufeng0991/article/details/45915891
