Chrome开发人员工具使用

在Web开发过程中前端调试不可避免。熟练的使用开发人员工具将起到事半功倍的效果。下面介绍Chrome浏览器内置的开发人员工具使用方法。

使用F12打开工具

工具打开方法及各功能模块简介：http://tools.yesky.com/288/30913788.shtml

具体使用：

（1）Elements

将鼠标放到代码上后会在显示窗口显示该元素影响范围（变色）、该元素的css样式以及宽度及高度。

在代码右侧会显示该元素的所有CSS样式以及该元素的监听事件。此模块会将所有定义过得CSS（包括失效的）样式显示，在此处可以动态修改该元素的样式如下图：

修改：

添加：

敲完属性名后按tab键即可编辑值

编辑完确定后，网页会实时变化。

颜色修改：

查看margin、border、padding、content的范围，将鼠标放到下方相应范围上即可：

（2）Network

此工具在调试网页异步调用时会非常有用。强烈推荐！！！

打开F12后浏览器会自动开始抓包记录网络记录。

包括每一次请求、请求类型、各种资源请求所用时间等

点击左侧记录右侧会出现该记录的详细信息包括请求内容、返回内容、cookies、预览、时间等信息

该窗口下方工具条第5个圆点是保持功能点击后刷新页面抓包内容不会删除，第6个点击后会清空抓包内容。

继续向右是各种请求类型过滤器。

（3）Console

该窗口提供实时JS调试包括执行方法、变量显示、结果输出等。该页面的所有JS变量都可使用且无跨域问题，还会有相应的代码提示。调试JS代码时强烈推荐！！！

在这儿还可以弄出很好玩的东西

输入下面这段代码：

console.log("%c ","font-size:41px;background:url('http://d.pcs.baidu.com/thumbnail/eb76056378d5fe15023c623677acd2f4?fid=1277541369-250528-3469450027&time=1386378301&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-peOFSCvarILw4%2BWgqufLD9zumcM%3D&rt=sh&expires=8h&r=958461036&sharesign=unknown&size=c710_u500&quality=100') no-repeat 0px 0px ; background-size:130px 130px;");console.log('启航科技 \n加入我们，在这里不仅是工作，投入你的时间和热情，滴滴汗水终会汇聚成不平凡的成果。\n期待你的加盟。mail-to: hr@sdauqihang.com');console.log("请在邮件中注明%c来自:console","color:red;font-weight:bold;");

Chrome的开发人员工具还有很多功能慢慢去摸索吧。