开发者工具对开发人员代码调试有很大的帮助。
页面 CSS、JS 调试，接口调试，性能调优等等。
SO，笔者决定用自己的方式记录一下工作中用到的 F12 工具的种种，方便查阅。
一、怎么打开开发者工具
两种方式打开下图红框中的内容：
1、Ctrl + Shift + I
2、F12 或者 Fn + F12
二、F12 可以做些什么
从左往右、从上到下来看看
1、选中小箭头，可以在左侧页面上选择元素找到对应的 code
2、手机端和 PC 端切换，页面尺寸大小切换
3、Elements 元素，查看页面 code，css 式样
4、Console 控制台，显示一些提示信息
5、Sources 资源，当前页面加载的所有文件
6、Network 网络信息，资源加载和响应
7、Performance 性能优化，CPU 执行时间、内存占用等
8、Memory 存储信息
9、Application 页面数据，cache、session、cookie 等
10、Security 安全相关
11、Audits 页面分析，根据分析结果优化页面
最后，右上角的三个点，里面是 F12 的一些设置。
三、怎么查看页面元素的样式
上图中，左侧页面中任意选择一个元素，会在 F12 的 Elements 中看到很多信息。
12、Style 样式，当前元素的 CSS 代码，可以清楚看到对应的 css 文件
通过 style 下面的检索框，针对性的找到 css 设置
点击【检索框后面的 “:hov”】，可以查看元素的伪类
点击【检索框后面的“:cls”】，可以快速给元素添加 class
点击【检索框后面的“+”】，可以给当前元素重置 css
每一组 css 右下角会有三个点，鼠标滑过可以看到几个图标，分别是 text-shadow、box-shadow、color、background-color，给选择器快速添加相应的样式
13、Computed 查看元素对应的盒子模型
14、Event Listeners 显示元素所有的监听事件
15、DOM Breakpoints 所有调试断点
16、Properities 元素的所有属性
17、Accessibility 辅助
四、怎么快速修改式样
1、写行内 style 式样
在 styles 检索框下面，element.style 里面直接写
2、在现有的选择器中添加
利用上面提到的快捷方式快速添加，或者自定义添加
3、在和模型中修改
直接在盒子模型中修改宽高等属性
在 F12 中调试好后，将代码复制到文件中即可。
以上几点都比较简单，不再赘述。