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进行保存。