标签：检索 调试 Chrome 元素 开发者 F12 css 页面

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

 

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

 

标签：检索,调试,Chrome,元素,开发者,F12,css,页面
来源： https://www.cnblogs.com/webSnow/p/16202488.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。