Chrome 开发者工具 F12（一）

开发者工具对开发人员代码调试有很大的帮助。

页面 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 中调试好后，将代码复制到文件中即可。

 

以上几点都比较简单，不再赘述。