Chrome开发者⼯具使⽤指南
前⾔
⼯欲善其事，必先利其器。
在前端⼯作中，我们常常使⽤到Chrome开发者⼯具去做各种各样的事情。
但是您真的了解这些开发者⼯具吗？
官⽅⽂档还是挺详细的：。
但是⽂档中仍然会有⼀些功能没有描述到或者被⼀笔带过。
⽽我的这篇指南，会略过那些⼀⽬了然的功能以及⼀些容易替代的⽅案，写⼀写那些您可能不太了解的功能和⽂档描述不清的功能。阅读本篇⽂章需要有⼀定的前端基础。
媒体查询功能
Chrome开发者⼯具不仅可以调试web应⽤，还可以模拟各种终端设备。
通过激活下图中红框部位开启设备⼯具栏。
⼯具栏可以切换模拟各种型号的设备，也可以通过⾃适应模式（Responsive）来调整视⼝。
这⾥通过更多⼯具中的Show media queries查看媒体查询：
图中蓝⾊区块为最⼤宽度断点，黄⾊区块为最⼩宽度断点。
右键相应区块还可以跳转到具体的css⽂件中的媒体查询代码。
模拟传感器（地理位置，⼿机朝向）
点击更多⼯具中的Sensors（传感器）
在这⾥可以模拟地理位置，⼿机朝向
⽣成页⾯全尺⼨快照图⽚
通过下图操作，可以⽣成⼀张页⾯全尺⼨的快照。
⽽它上⾯那个选项是⽣成当前视⼝⼤⼩的图⽚。
控制台快速获取元素⾯板的元素
在元素⾯板上选中⼀个元素后：
细⼼的朋友会发现后⾯总是会出现⼀个== $0的提⽰。
此时在控制台输⼊$0，实际上就可以获取到该元素。
通过这种⽅式，即使对于那些没有class和id的元素，我们也可以在控制台快速获取并使⽤。
您可能会问：那我要是想在控制台调⽤多个这样的元素呢？
选中元素，右键，选择选项：Store as global variable。
此时会将选中的元素存储在⼀个临时变量中，并⾃动在控制台输出这个变量的名字。
web浏览器在哪里打开页⾯跳转到元素⾯板指定的元素
某些时候页⾯元素出现BUG，不知道跑到哪去了，我们需要页⾯跳转到这个元素所在的位置。如果我们知道它的id或者class，我们可以通过在控制台输⼊js命令去跳转：
document.querySelector('.icon-cool').scrollIntoView()
当然也可以通过我们上⾯说到的$0做到：
$0.scrollIntoView()
但是有个更简单的办法，那就是右键元素⾯板上的指定元素，然后点击Scroll into view的选项。DOM断点
同样右键元素⾯板上的元素，发现有个Break on的选项，这⾥可以打DOM断点。
从上往下依次是⼦节点改变时断下，元素属性改变时断下，节点移除时断下。
打下断点后，在左侧会有断点标识，右侧的DOM Breakpoints也会有相应的显⽰。
点击DOM Breakpoints的相应DOM断点，元素⾯板也会定位到相应元素。
当js去修改指定元素的DOM结构时，就会在修改的位置断下。
这种断点很⽅便查到究竟是哪⾥对页⾯元素进⾏了修改。
元素事件侦听器
在元素⾯板选中元素，右侧的Event Listeners会显⽰该元素上的事件。
如果勾选了Ancestors（祖先），那么会展⽰祖先节点的事件，通常不需要勾选这个。
点击事件右侧的链接可以跳转到附加事件的代码。
通常⼀些js框架或库（⽐如jQeury）会将原⽣DOM事件进⾏封装，⽽这会导致我们通过元素事件侦听器跳转到的代码是这些库⽂件的封装代码。不过如果我们勾选了Framework listeners（框架侦听器），那么就会跳转到我们使⽤库⽂件事件API的地⽅，⽽不是库⽂件⾥。
Framework listeners对于jQuery这样对事件进⾏简单封装的特别好⽤，但是对于React这种的话作⽤有限。
查看当前页⾯对css和js使⽤覆盖率
通过以下⽅式打开Coverage选项卡，这个可以查看当前页⾯对css和js的使⽤覆盖率。
点击左上⾓按钮开始记录：
如上图可以单纯查看css还是js，或者都查看。
选中单个⽂件，还可以查看具体是哪些代码或者css没有使⽤到。
记录期间，我们做各种操作，都会影响到这个使⽤覆盖率的变动。
对于现在常⽤的单页⾯应⽤⽽⾔，尤为有效，因为切换页⾯实际并没有改变html，所以这个记录⼀直有效。
对于以往采⽤jQuery的多页⾯应⽤⽽⾔，当切换了页⾯之后，记录就重新开始了。
不过不管是单页⾯还是多页⾯，通过这种⽅式都是可以查看相应的js和css的使⽤覆盖率的，对于优化css和js，删除⽆⽤的废代码，以及代码⽂件拆分都很有帮助。使⽤本地⽂件调试⽣产环境⽹站代码
我们调试⽣产环境的BUG，经常需要修改样式或者js，但是页⾯⼀刷新这些东西就⼜还原了。
所以这⾥有个神技，可以将⽣产环境的引⽤⽂件进⾏本地化，然后修改本地化后的⽂件进⾏调试。
⾸先我们需要打开在Source⾯板下左侧的Overrides选项卡，选择⼀个本地⽂件夹作为覆盖⽂件夹。
这⾥我选择了⼀个名为test的⽂件夹。
然后我们切换到Source⾯板的Page选项卡，选中某个⽂件，然后右键，选中选项Save for overrides。
此时切回Overrides选项卡，发现test⽂件夹中已存在相关的js⽂件。
修改该⽂件的js内容，再保存，即使刷新之后修改后的内容依然会⽣效，并且页⾯会加载我们修改之后的js⽂件。
Animation动画检查器
通过下图⽅式可以打开Animation检查器：
这个检查器⾃动开始监听页⾯上的动画，但是这个时候动画已经加载完了，监听不到，需要我们重新刷新页⾯才⾏。
选中其中的⼀个动画，会显⽰如下图的效果：
通过它我们可以查看和调整CSS动画和过渡的各种效果。
Rendering选项卡（⾼亮重排重绘合成层，fps和gpu占⽤，滚动优化，媒体查询模拟如打印）Rendering选项卡，顾名思义是做⼀些渲染相关的事。
通过下图⽅式打开Rendering选项卡：
下⾯是选项卡的界⾯：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。