Chrome 开发者工具 F12（一）
开发者工具对开发人员代码调试有很大的帮助。
SO，笔者决定用自己的方式记录一下工作中用到的 F12 工具的种种，方便查阅。
一、怎么打开开发者工具
两种方式打开下图红框中的内容：
1、Ctrl + Shift + I
2、F12 或者 Fn + F12
二、F12 可以做些什么
从左往右、从上到下来看看
1、选中小箭头，可以在左侧页面上选择元素找到对应的 code
2、手机端和 PC 端切换，页面尺寸大小切换
3、Elements 元素，查看页面 code，css 式样
6、Network 网络信息，资源加载和响应
7、Performance 性能优化，cpu 执行时间、内存占用等
8、Memory 存储信息
9、Application 页面数据，cache、session、cookie 等
10、Security 安全相关
最后，右上角的三个点，里面是 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、在和模型中修改
以上几点都比较简单，不再赘述。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
