F12chrome浏览器中 F12 功能的简单介绍

Posted zhuzhubaoya

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了F12chrome浏览器中 F12 功能的简单介绍相关的知识,希望对你有一定的参考价值。

chrome浏览器中 F12 功能的简单介绍

    由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿!

首先介绍Chrome开发者工具中,调试时使用最多的三个功能页面是:元素(ELements)、控制台(Console)、源代码(Sources),此外还有网络(Network)等。

技术分享图片

 

  •  元素(Elements):用于查看或修改html元素的属性、CSS属性、监听事件、断点等。
  • 控制台(Console):控制台一般用于执行一次性代码,查看javascript对象,查看调试日志信息或异常信息。
  • 源代码(Sources):该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码,此外最重要的是可以调试JavaScript源代码,可以给JS代码添加断点等。
  • 网络(Network):网络页面主要用于查看header等与网络连接相关的信息。

1、元素(Elements)

查看元素代码:点击如图技术分享图片箭头(或用者用快捷键Ctrl+Shift+C)进入选择元素模式,然后从页面中选择需要查看的元素,然后可以在开发者工具元素(Elements)一栏中定位到该元素源代码的具体位置 。

查看元素属性:可从被定位的源码中查看部分,如class、src,也可在右边的侧栏中查看全部的属性,如下图位置查看

技术分享图片

 

修改元素的代码与属性:可直接双击想要修改的部分,然后就进行修改,或者选中要修改部分后点击右键进行修改,如下图

技术分享图片

注意:这个修改也仅对当前的页面渲染生效,不会修改服务器的源代码,故而这个功能也是作为调试页面效果而使用。

右边的侧栏个功能的介绍:如下图所示

技术分享图片

 

2、控制台(Console)

  • 查看JS对象的及其属性
  • 执行JS语句
  • 查看控制台日志:当网页的JS代码中使用了console.log()函数时,该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用,而当正式上线后,一般会将该函数去掉。

3、源代码(Sources)其主要功能如下介绍

技术分享图片

 

4、网络(Network)大体功能如下:

技术分享图片

 

请求文件具体说明

技术分享图片

一共分为四个模块:

  • Header:面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等
  • Preview:预览面板,用于资源的预览。
  • Response:响应信息面板包含资源还未进行格式处理的内容
  • Timing:资源请求的详细信息花费时间



以上是关于F12chrome浏览器中 F12 功能的简单介绍的主要内容,如果未能解决你的问题,请参考以下文章

Chrome浏览器F12开发者工具使用教程博客汇总

Chrome 开发者工具中的“暂停动画”功能是不是有键盘快捷键? (F12)

使用chrome的F12开发人员工具进行网页前端性能测试

通过 Selenium 在 Chrome 上打开检查(按 F12)

在Chrome上面按F12修改页面的源代码里面的JS代码为啥无法生效

在Chrome上面按F12修改页面的源代码里面的JS代码为啥无法生效