chrome开发者工具使用技巧

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中

 

待深刻。