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

时间：2015-05-22 13:29:43 阅读：184 评论：0 收藏：0 [点我收藏+]

最近在用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 按钮，
浏览添加本地文件夹或文件。选择后，浏览器会有一个提示，请进行确认。
可以设置一个或多个文件夹。
技术分享