其他分享
首页 > 其他分享> > Chrome 开发者工具 F12(一)

Chrome 开发者工具 F12(一)

作者:互联网

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