网站菜单

Chrome—F12开发者工具详解

一、认识F12控制台

在浏览器页面使用F12开启控制台。
控制台主要包含以下四个部分:

  • ELements:用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。css可以即时修改,即时显示。大大方便了开发者调试页面
  • Console:控制台一般用于执行一次性代码,查看JavaScript对象,查看调试日志信息或异常信息。还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性,我可以直接在Console中输入"console"并执行
  • Sources:该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码,此外最重要的是可以调试JavaScript源代码,可以给JS代码添加断点等。
  • Network:网络页面主要用于查看header等与网络连接相关的信息。

二、ELements

  • 查看指定元素的代码,使用左上角的小鼠标或快捷键Ctrl+Shift+C可以进入元素选择模式,方便快捷的找到元素所在的位置。
  • 查看元素的属性:定位到元素的源代码之后,可以从源代码中读出改元素的属性。如下图中的class、src、width等属性的值。
  • 修改元素的代码与属性:点击元素,然查看右键菜单,可以看到chrome提供的可对元素进行的操作:包括编辑元素代码(Edit as HTML)、修改属性(Add attribute、Edit attribute)等。选择Edit as HTML选项时,元素进入编辑模式,可以对元素的代码进行任意的修改。当然,这个修改也仅对当前的页面渲染生效,不会修改服务器的源代码,故而这个功能也是作为调试页面效果而使用。
  • 查看元素的css属性:在元素的右边栏styles页面可以查看这个页面的css属性。这个页面表示该元素原始定义的css属性以及从父级元素继承的css属性。
  • style页面的右边Computed属性,已计算,展示的是该元素经过计算之后的所有的CSS属性,即最后浏览器渲染页面时所使用的属性。属性的计算由浏览器进行。
  • 修改元素的CSS属性:在元素的Styles页面:在这里进行CSS属性的修改一般用来调整和完善元素的渲染效果,同样不影响服务器的源代码。
  • 在ELements右键可以实现断点功能。
  • 查看元素的监听事件:元素的右边栏的Event Listener页面,可以查看到该元素的所有监听事件。在开发中,尤其是维护其他人的代码时,会出现不了解元素对应的监听事件,这个时候,可以在这个页面中找到。这个页面不仅能看到对应的事件函数,还可以定位该函数所在的JS文件以及在该文件中的具体位置(行数),大大提高开发维护的效率。

三、控制台Console

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

四、源代码Source

  • 查看文件:在源代码(Source)页面可以查看到当前网页的所有源文件。在左侧栏中可以看到源文件以树结构进行展示。
  • 添加断点:在源代码左边有行号,点击对应行的行号,就好给改行添加上一个断点(再次点击可删除断点)。右键点击断点,在弹出的菜单中选择Edit breakpoint可以给该断的添加中断条件。
  • 中断调试:添加断点后,当JS代码运行到断点时会中断(对于添加了中断条件的断点在符合条件时中断),此时可以将光标放在变量上查看变量的属性。

五、网络Network

  • Name/Pat:资源名称以及URL路径 (main.css)
  • Method:Http请求方法 (GET或者POST)
  • status/Text:Http状态码/文字解释 (200,ok)
  • Type :请求资源的MIME类型,MIME是Multipurpose Internet Mail Extensions (html,css,js等)
  • Initiator:解释请求是怎么发起的,有四种可能的值
    • Parser :请求是由页面的html解析时发送
    • Redirect:请求是由页面重定向发送
    • script :请求是由script脚本处理发送
    • other :请求是由其他过程发送的,比如页面里的Link链接点击
  • size/content:size是响应头部和响应体结合的大小,content是请求解码后的大小

点击某个具体的请求之后,分为四个模块:

  • Headers 标头 标头中包含了资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等。
  • Preview 预览界面,进行资源的预览。
  • Response 响应信息面板包含资源还未进行格式处理的内容。
  • Timing 详细的花费时间的列表。
显示评论 (424)

文章评论

相关推荐

JDK1.8(六) 反射

(一)什么是反射 除了基本类型外,所有的数据类型全部都是class 因此,每加载一个Class,就会创建一个实例对象,而一个Class实例中就记录了这个对象的所有信息。包括接口,所有方法,字段,父类等…

JDK1.8(五) 断言与日志

(一)断言 断言的作用: 断言(Assertion)是一种调试程序的方式。在Java中,使用assert关键字来实现断言。 断言可以用于开发和调试阶段: assert x >= 0 : &quo…