• 注册
  • F12开发者调试工具 F12开发者调试工具 关注:10 内容:11

    F12开发者工具详细介绍

  • 查看作者
  • 打赏作者
  • 当前位置: F12开发者 > F12开发者调试工具 > 正文
    • 4
    • F12开发者调试工具
    • Lv.9
      超凡入圣
      官方

      学习使用浏览器自带的 F12 网页开发者工具,可以帮助前端以及测试人员来快速定位调试分析问题、解决问题。

      一、如何调出开发者工具

      在浏览器页面上

      • F12键 (笔记本电脑 Fn + F12)

      • 右键选择 检查(N)

      • 快捷键 Ctrl + Shift + i

      二、开发者工具初步介绍

      开发者工具最常用的四个功能模块:

      元素(ELements)、控制台(Console)、源代码(Sources),网络(Network)。

      1 1、元素(Elements)

      查看网页页面的所有元素,修改元素的代码与属性。用于查看修改元素的属性、CSS属性、监听事件以及断点等等。

      #### 查看元素的代码

      点击左上角的箭头图标(或按快捷键Ctrl+Shift+C)进入选择元素模式,从页面中选择需要查看的元素,可以在开发者工具元素(Elements)一栏中定位到该元素源代码的具体位置。

      查看元素的属性:定位到元素的源代码之后,可以从源代码中读出改元素的属性。

      F12开发者工具详细介绍

      修改元素的代码与属性

      点击元素,然查看右键菜单,可以看到chrome提供的可对元素进行的操作:包括编辑元素代码(Edit as HTML)、修改属性(Add attribute、Edit attribute)等。选择Edit as HTML选项时,元素进入编辑模式,可以对元素的代码进行任意的修改。

      注意:

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

      F12开发者工具详细介绍

      给元素添加断点

      在元素的右键菜单中选择断点选项(Break on…),选中之后,当元素被修改(通常是被JS代码修改)时,页面加载会暂停,然后可以查看该元素的属性。元素断点添加之后,可以在右侧栏的DOM Breakpoints页面中看到,这个页面可以看到当前网页的所有元素断点。

      F12开发者工具详细介绍

      查看元素的监听事件

      元素的右边栏的Event Listener页面,可以查看到该元素的所有监听事件。在开发中,尤其是维护其他人的代码时,会出现不了解元素对应的监听事件,这个时候,可以在这个页面中找到。这个页面不仅能看到对应的事件函数,还可以定位该函数所在的JS文件以及在该文件中的具体位置(行数)。

      F12开发者工具详细介绍

      22、Console(控制台)

      #### 查看JS对象的及其属性

      F12开发者工具详细介绍

      #### 执行JS语句

      F12开发者工具详细介绍

      查看控制台日志

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

      在测试界面时,如果出现Bug问题,一般情况下会在这栏展示,查看调试日志信息或者异常错误信息,然后前端开发工程师根据具体问题来调试,进行解决问题。

      3、Sources(源代码)

      #### 查看源文件

      在源代码(Source)页面可以查看到当前网页的所有源文件 包括:样式、css、图片、js文件等。在左侧栏中可以看到源文件以树结构进行展示。

      F12开发者工具详细介绍

      #### 添加断点

      在源代码左边有行号,点击对应行的行号,就好给改行添加上一个断点(再次点击可删除断点)。右键点击断点,在弹出的菜单中选择Edit breakpoint可以给该断的添加中断条件。

      F12开发者工具详细介绍

      中断调试

      添加断点后,当JS代码运行到断点时会中断(对于添加了中断条件的断点在符合条件时中断),此时可以将光标放在变量上查看变量的

      也可以在右边的侧栏上查看:

      F12开发者工具详细介绍

      在右侧变量上方,有继续运行、单步跳过等按钮,可以在当前断点后,逐行运行代码,或者直接让其继续运行。

      F12开发者工具详细介绍

      4、Network(网络)

      F12开发者工具详细介绍

      三、F12的妙用

      1、复制不可复制的文字

      有些文章设置了不可复制,那么如果想复制文字时,

      按下F12,或者右击鼠标选择【审查元素】,点一下下边弹出框左上角鼠标,然后去点击页面你想要的文字,下面框代码中亮的部分,看不到文字就点击箭头展开,看到文字,双击或者右键copy

      F12开发者工具详细介绍

      2、下载不能保存的图片

      例子(比如说某库网需要vip才能下载的图片)

      首先我们打开不能直接下载图片的网站,然后使用快捷键F12,或者右击鼠标选择【审查元素】-> 看到对应的img 选择src右键点击open in new web

      或者选择【 network】,再选择【 Img】,刷新页面就看得到下面有图片资源了,大部分网页是这样结构,有些图片会在【 sources】那里打开左侧栏(请求回来的图片资源),总之能找到图片的资源所在位置就可以了。

      F12开发者工具详细介绍

      3、截取整个网页

      使用浏览器自带的截屏功能截取超过一个屏幕的网页

      F12 或 Ctrl+ Shift+ I 打开开发者工具,在任意 tab上按 Ctrl+ Shift+ P,在弹出的输入框里输入 Capture full size screenshot(其实不需要输入完整,可以自动补全),然后按回车即可

      F12开发者工具详细介绍

      F12开发者工具详细介绍

      Waiting patiently for you to come home and fuck me! 链接
      回复
      Waiting patiently for you to come home and fuck me! 链接
      回复
      Waiting patiently for you to come home and fuck me! 链接
      回复
      Waiting patiently for you to come home and fuck me! 链接
      回复

      请登录之后再进行评论

      登录
    • 发表内容
    • 实时动态
    • 偏好设置
    • 帖子间隔 侧栏位置: