Chrome devtools官网首页：https://developer.chrome.com/devtools/index
打开devtools快捷键：Ctrl+Shift+J或F12
共分8个tab，切换快捷键：ctrl+["或者"ctrl+]“
控制台的官方API文档地址:
控制台使用：
https://developers.google.com/chrome-developer-tools/docs/console
控制台API:
https://developers.google.com/chrome-developer-tools/docs/console-api
控制台命令行api：
https://developers.google.com/chrome-developer-tools/docs/commandline-api
分窗口介绍：
Elements:
1.元素上右键选scroll into view可以把元素显示到窗口
2.对于a链接等hover/active等样式的控制点右侧
然后选择相应状态，就可以快速编辑了
3. 
可以在元素上添加断点。
Network:
1. 红蓝两条垂直线条，对于前端分析非常重要，蓝色线条表示DOMREADY事件，即浏览器已经把整个HTML文档的DOM结构解析完毕。一般我们在这个时候去做DOM查找比较靠谱，在它之前进行DON元素查找可能会出现元素无法找到的现象。红线表示LOAD事件，即整个页面的JS/CSS/图片等都下载完毕，对应着脚本里的window.onload事件。两条线越靠近左侧，即页面的响应速度越快，反之越慢。
2. TTFB（Time To First Byte）查看：
颜色区分：
有关TTFB的介绍：http://www.rackaid.com/blog/time-to-first-byte/
3. initiator列表示初始化请求的处理对象，可能会有四种可能的值：Parser、Redirect、Script、Other。分别表示请求是由页面的HTML解析时发送的；直接的页面请求；由script脚本处理发送的；或者其他诸如页面里的link链接点击发送的
4. size and Content列中的Size是响应头部和响应体结合起来的内容大小。Content是资源解码后的内容的大小。如果资源是从浏览器缓存中而不是服务器端获取的，那么这个字段将显示”from cache”
5. Time and Latency(延迟的意思)列中的Time是从请求开始到接收到最后一个字节的总时长。Latency是加载响应第一个字节的时间
6. Timeline:展示了网络资源从HTTP请求开始到接收到最后一个字节的加载详细信息。对于每一个色条，浅色表示等待时间，发出请求后服务器开始响应时间, 可以认为是 网络延迟 + 服务器处理请求时间。深色表示接收时间，服务器响应到接收完毕数据的时间。
单击timeline会出现排序方式菜单：
含义分别为：
- Timeline:通过每一个网络请求的开始时间进行排序。这也是默认排序。同时也等同于Start Time选项
- Start Time：same as sorting by the Timeline Option
- Response Time:通过每一个请求的响应时间来排序
- End Time:通过每一个请求完成时间来排序
- Duration:通过每一个请求的总时长来排序
- Latency：通过请求开始到响应开始之间的时间来排序(known as the “time to first byte”)
不同颜色表示不同资源类型：
6. 可以在network面板的列表行头部右键选择要展示的列：
7. 有关每种http状态码含义：http://tool.oschina.net/commons?type=5
Sources：
1.快捷键：
在sources窗口下可以使用:ctrl+shift+o 当前文件中查找函数；ctrl+o 在所有文件中查找某个文件，
设置断点：ctrl+B或点击行号
跳到下一个断点：F8
下一步（不进入函数）：F10
下一步（进入函数）：F11
2.该标签下的css,js文件修改后可直接保存生效，但html页面、经pretty print格式化的js不支持修改调试。如果在窗口中对文件进行了大量修改，想回退到某一次修改的结果，可以通过右键选历史修改，在显示的历史记录中回退。
3.
4.条件断点：尤其对大量循环时有用，可设置为只在满足特定条件才触发。
5.右侧可控制断点、查看到当前各种信息、设置断点。
continue:继续执行代码直到遇到另一个断点停止。对应快捷键：F8
Step over:一行一行的执行代码方便查看变量是怎么被操作更新的。如果你的代码调用了一个方法，它会跳过调用方法的调试跟踪，以便焦点始终保持在当前方法里。对应快捷键F10
Step into:像Step over，但是在调用方法时点击Step into会将调试定位到调用的方法的第一行代码的位置.对应快捷键F11
Step out:当Step into进一个方法时。点击Step out会使方法剩下的代码执行完毕，然后调试点再次回到父方法的调试点处。对应快捷键shift+F11
Toggle breakpoints:当开启了调试模式之后，点击此按钮进行使用断点和禁用断点间的切换
设置了断点之后你可以从右边的BreakPoints选项去看到你设置了哪些断点，同时右键点击你设置的蓝色断点部分还可以编辑断点,设置断点的禁用、使用、删除、断点触发条件以及是否从此处开始执行等。
执行到断点时，鼠标悬停到已执行过的变量、方法、参数上会显示当前该内容的值，右侧的call stack会显示当前调用的堆栈情况，scope varibles显示当前作用域链上的变量。
该面板可用的快捷键：
6. Audits：可以进行页面分析，对于优化前端页面、加速网页加载速度很有用。可以根据给的提示对页面进行优化。
7. Timeline:显示js执行、页面元素渲染时间。
8. Profiles:主要做性能优化，包括CPU执行时间、内存占用等.
Profiles和timeline的使用参看：http://www.qingdou.me/3719.html
9. Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。
CSS文件可以直接修改CSS文件，并且修改即时生效。
10.控制台技巧：
1.可以直接使用$("")获取元素，与页面是否加载了jquery无关
2.常用命令console.dir，monitorEvent(),getEventListeners()等。
模拟移动端效果：
有的版本在齿轮设置中，有的在drawer中
待深入。