谷歌开发者工具技巧小整理

开发者工具

DOM技巧

1.元素对应的DOM

ctrl + shift + c 然后鼠标移到对应的元素上即可，这种方法可以用来找到一些事件触发才出现的DOM，比如mouseover这种，使用面板上的那个按钮很难操作，使用快捷键就可以很方便的选中了

2.将视图滚动到元素所在位置

3.在Elements面板使用选择器选取DOM

看到工具的tips了吗，可以使用选择器来获取DOM，至于支持哪些选择器，本人没有仔细试过，不过这个功能有很大妙用，一般你需要使用JQ来选择元素，这时候需要刷新运行才知道选择的结果，而且出来的结果还是JQ的对象，需要展开才知道选择了什么，使用这里的选择器，可以很直观看到选择的结果，这个可以用来确认选择的DOM，，更重要的是可以用来辅助我们检查我们的CSS选择器是否与当前的选择器冲突了。

4.快速展开DOM结构

alt + click

CSS技巧

1.编辑

在Elements的styles可以查看css作用的结果，css来源，以及可以随意编辑这些CSS

2.激活伪类

这里勾选对应的伪类，即可激活伪类

3.查看CSS最终计算结果

styles会展示全部的CSS，没有生效的CSS会带有删除线效果，但是不便于查看，而computed可以展示计算后的最终结果，可以在这里筛选自己想看的属性的生效值，比如rem的时候，你就可以看到具体是多少px

事件技巧

1.查看DOM节点上绑定的事件

可以看到DOM节点绑定的所有事件，点击事件名，可以看到事件绑定的代码的文件名，可以跳转进去查看

数据(Network)技巧

1.查找指定资源

这里讲一个特殊的，我们怎么快速确定一个文件被加载了呢，当然是查找加载列表里有没有这个资源

点击network，然后ctrl + p 输入文件名即可查看结果，是不是很快呢

2.阻塞文件加载

当你想验证，是否是这个文件影响了什么，当时是不加载它呢，使用下面的操作即可实现。

代码技巧

1.快速跳转到方法所在文件
如果我们知道方法名字，可以快速跳转到代码所在位置喔

在console中输出方法名称，点击输出结果即可跳转到代码位置

2.格式化压缩代码

压缩的代码格式化，一般线上代码都是经过了压缩，没法看，我们可以格式化一下

调试技巧

1.清空控制台

嘻嘻，我一般是使用这个清除的

一直在找快捷键，诶，没想到人家按钮的hover效果上就告诉你了怎么快捷键 ctrl + l ,再也不用拿出手去用鼠标了

2.使用断点

随着前端项目越来越复杂，使用像后台语言java断点方式调试再也常见不过，也就是这个断点，帮助我面对一个面向几百万人的项目时，可以快速上手，可以在源代码sources面板的对于文件处，点击对应的行，即可插入debugger断点

3.使用条件断点

右键单击该断点，并点击Edit breakpoint(编辑断点)。在文本字段中输入你的条件，并按Enter键，即可在指定条件下运行断点，在循环调试这种非常有用

4.调试面板介绍

1. 跳过此断点

2. 执行该行，不进入语句内部(比如函数)，直接移动到下一行

3. 执行该行，进入语句内部，比如是函数就会进入到函数定义处

4. 跳出当前函数

5. 还真不知道

6. 禁用所有断点

7. 当异常发生时自动暂停代码

总结

由于工作面对着庞大的项目，代码非常之多，目前也在改造成SSR结合Vue的技术架构，所以平时对于工具的应用汇比较多，本来想用gif来展示的，懒(^__)，等过段时间学习了更多的开发者工具知识，再来个高清重置版。