chrome devtools 常用功能总结

一 Console基本功能
1.Console可以作为调试的log输出
2.作为js代码的执行坏境可以直接在console中写JavaScript代码 如:

3.可以用来直接编辑页面在console中输入

 document.designMode = “on”

二 Element基本功能
1.可以用来查看网页的HTML元素

2.右侧的style可以调试页面的样式属性，是前端布局样式调试的必备之选
Style 中的:hover强制DOM状态有些HTML的DOM是有状态的，有时候，我们的CSS会来定关不同状态的 样式，在分析网页查看网页上DOM的CSS样式时，我们可以点击CSS样式上的 :hov 这个按钮来强制这个DOM的状态。

Style 中eventListener可以监听页面元素的事件如下图

三 Source的基本功能
1.source用来查看网页中的资源文件。
2.代码格式化:有很多css/js的代码都会被 minify 掉，你可以点击代码窗口左下角的那个 {} 标签，chrome会帮你给格式化掉。

3.断点调试功能：有时我们需要查看网页中代码的执行过程，网页中的某些变量值的变化。此时断点调试功能就比不可少。对下图中的几个蹲点调试功能点进行介绍：

Pause script excution （单步执行，在断点处暂停，等待调试–不是直译) ： 暂停后这个按钮改变状态为Resume script excution （继续执行) ， 快捷键 （F8 或者 Ctrl + ) Step over next function call（单步跳过) ： 会跳到下一个断点，快捷键 （F10 或者 Ctrl + `) Step into next function call（单步进入) ： 会进入函数内部调试，快捷键（F11 或者 Ctrl + ;) Step out of current function （单步跳出): 会跳出当前这个断点的函数，快捷键（Shift + F11 或者 Ctrl + Shift + ;)
图中 圆圈画出的部分是个人比较喜欢的功能可以查看当前断点函数调用的过程。
四 network基本功能
1.查看各种的网络请求中间菜单栏部分可以过滤不同种类的请求（xml js css html…..）
2.可以用来限制网页所处的网络环境，在菜单栏中offline(网络不通)，offline右侧可以调节当前的网络加载速度如下图所示：

3.用来复制网络请求，你可以在 network选项卡里，点击 XHR 过滤相关的Ajax请求，然后在相关的请求上点鼠标右键，在菜单中选择： Copy => Copy as cURL，然后就可以到你的命令行下去 执行 curl （window环境需要安装curl）的命令了。这个可以很容易做一些自动化的测试

五 detools的几个小功能
1.左上角的小箭头用来选择页面元素，相当于右键的选择元素
2.箭头旁的方框，做移动端开发的同学一定很清楚，是用来调整页面窗口是页面与手机端
显示的一样。
3.全局搜索功能,当你调试别人写的页面时可以用来查找你所需要的，菜单栏的右上角customize and control tools 下的search all files。