Chrome开发者工具入门

[lloyd-lin]

Chrome开发者工具作为前端最优秀的工具之一，可以帮助我们方便的在页面跟踪和调试。由于官方只有英语手册并且由于伟大的GFW很难访问，所以今天就来学习一下工具的基本使用并且记录下来。

基础篇

开启面板

F12 或者ctril+shift+I或者通过右上角菜单的更多工具打开（推荐F12，方便快捷）
开启面板后，我们可以自由的选择面板的附着方式，长按红框中的图标可以选择是已单独标签页方式或是附着在当前窗口两种模式。 附着模式下还有下方和右方两种位置可选。

打开后可以观察到顶部有多个TAB页
首先个人推荐打开drawer来拥有更好的体验。打开后分为2个区块，上边是主要部分，下面则提供一些辅助内容。

常用的标签页和工具

元素选择器

标签栏第一个类似放大镜的标志。按下放大镜并且在页面上滑动鼠标，会发现有区域被点亮（这里会点亮接触的最内层元素） 同时会看到这个元素的一些基本信息（类，宽高）另外元素的box模型的真实内容，padding，margin也会被不同颜色标示。单击后则工具会选中DOM中的该元素。效果如下图：

移动设备模拟

在桌面浏览器模拟移动端的操作，虽然可能样式上会稍有偏差，但可以模拟多种屏幕分辨率以及支持一些触屏的事件，非常实用

Elements标签页

和对网页右键查看源代码有所不同，是经过js代码执行以后真实的html代码，因此直接改动就会在页面生效。同时进入该面板以后还会有额外的一块功能区出现，这里可以查看和修改样式，也可以查看元素绑定的事件等。

网络

查看页面的网络请求（打开开发者工具并且选择开启录制以后以后才会记录）
这里可以开启过滤，通过关键字或者请求的类型来更快的定位想查找的请求，概况里可以查看请求的方式，状态，大小，来源等属性。



单击一个请求就能查看请求具体的信息，如请求的头部，回复等。 这里查看response有个小技巧，如果返回的是json/jsonp数据，可以用Preview标签页方便的查看生成的对象，告别Unicode转码和显示的困扰
查看response



选择preview查看返回内容O(∩_∩)O

资源

可以查看页面的图片，cookie，local storage等信息（但是没法修改cookie只能清除哦，如果需要修改则需要通过js修改，目前只成功在firebug提供图形界面修改过cookie）

控制台

在这里可以自由的撰写js代码，可以使用浏览器提供的内置对象，同时可以自己新定义对象和函数。在控制台输入代码和许多IDE一样提供了自动补全功能。（在不少网站切换到控制台都有惊喜。。前端为了招人打广告也是拼了啊！)

其他标签页

其他还有一些标签页可以用来进行网站性能或者规范的一些测试和检测，笔者也使用较少，大家可以自己深入尝试一下。

实战篇

操作dom和样式

使用元素选择器选中元素，右键可以直接修改该元素的html结构，同时可以对应向该元素的样式内容进行修改，从此再也不用担心布局难以调试一直需要刷新看效果的窘境啦！

调试JavaScript

案例：页面有一个按钮，点击按钮以后做了啥，我该怎么跟踪？
这里只是提供一种调试的思路，可以通过查看页面dom元素，找到可以定位到该元素的类/ID等，尝试用search的辅助功能寻找相关的代码源，之后便在相关的代码行数边单击添加断点，F5刷新，如果页面变灰则成功定位！



这里有几个快捷键
F11 逐行运行，会进入子函数
F10 逐行运行，不进入子函数
F8 直接运行到下一断点
调试面板：

定位之后小伙伴们就能愉快的调试啦！

结束语

由于Chrome开发者工具功能强大，笔者认知有限，外加篇幅的限制，所以可能还有很多细节需要大家自己去研究和尝试，在实践中掌握如何灵活运用Chrome开发者工具，给开发和调试带来更大的便利！