开发者工具
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.调试面板介绍
跳过此断点
执行该行，不进入语句内部(比如函数)，直接移动到下一行
执行该行，进入语句内部，比如是函数就会进入到函数定义处
跳出当前函数
还真不知道
禁用所有断点
当异常发生时自动暂停代码
总结
由于工作面对着庞大的项目，代码非常之多，目前也在改造成SSR结合Vue的技术架构，所以平时对于工具的应用汇比较多，本来想用gif来展示的，懒(*^__^*)，等过段时间学习了更多的开发者工具知识，再来个高清重置版。