Google Chrome开发者工具基本使用方法

最近在用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进行保存。