开启辅助访问
帐号登录 |立即注册

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

 
首先介绍edge开发者工具中,调试时使用最多的三个功能页面是:元素(ELements)、控制台(Console)、源代码(Sources),此外还有网络(Network)等。
2026201-20201218100612617-414348910.png
  • 元素(Elements):用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。
  • 控制台(Console):控制台一般用于执行一次性代码,查看JavaScript对象,查看调试日志信息或异常信息。
  • 源代码(Sources):该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码,此外最重要的是可以调试JavaScript源代码,可以给JS代码添加断点等。
  • 网络(Network):网络页面主要用于查看header等与网络连接相关的信息。
  • 1、元素(Elements)
  • 2026201-20201218100737059-725265175.png
    利用鼠标点击箭头(或用者用快捷键Ctrl+Shift+C)进入选择元素模式,然后从页面中选择需要查看的元素,然后可以在开发者工具元素(Elements)一栏中定位到该元素源代码的具体位置 。
    查看元素属性:可从被定位的源码中查看部分,如class、src,也可在右边的侧栏中查看全部的属性,如上图位置查看修改元素的代码与属性:可直接双击想要修改的部分,然后就进行修改,或者选中要修改部分后点击右键进行修改,如下图:
    修改元素的代码与属性:可直接双击想要修改的部分,然后就进行修改,或者选中要修改部分后点击右键进行修改,如下图
    点击需要修改的元素:右击鼠标进行编辑: 2026201-20201218101204483-904470264.png
    注意:这个修改也仅对当前的页面渲染生效,不会修改服务器的源代码,故而这个功能也是作为调试页面效果而使用。
    右边的侧栏个功能的介绍:如下图所示
    70.jpg
    2、控制台(Console)

    • 查看JS对象的及其属性
    • 执行JS语句
    • 查看控制台日志:当网页的JS代码中使用了console.log()函数时,该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用,而当正式上线后,一般会将该函数去掉。
    3、源代码(Sources)其主要功能如下介绍
  • 2026201-20201218101302694-723269987.png
    网络(Network)大体功能如下:
    2026201-20201218101329016-1612132103.png
    请求文件具体说明
  • 2026201-20201218101348110-70256961.png
    一共分为四个模块:

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

      • 打开浏览器,按f12,点击Network,可以查看相关网络请求信息,记得是打开f12之后再刷新页面才会开始记录的

        1017421-20181009110827235-215258733.png

      • 查看Network基本信息,请求了哪些地址及每个URL的网络相关请求信息都可以看的到
        URL,响应状态码,响应数据类型,响应数据大小,响应时间

        1017421-20181009110836301-1232344571.png
      • 请求URL可进行筛选和分类
        选择不同分类,查看请求URL,方便查找

        1017421-20181009110846349-1066479371.png
      • 也可以直接Filter搜索查询相关URL
        可以输入关键字或者正则表达式进行查询

        1017421-20181009110858415-1843040361.png
      • Waterfall能分割重要的请求耗时,查看具体请求耗时在哪个地方
        鼠标指到相关区域可以看到具体耗时

        1017421-20181009110906562-374372873.png
      • 我们具体分析下里面每个各代表什么意思,分别耗时多少,通过这个来分析服务器到底是哪个环节出了问题
        Queueing 是排队的意思
        Stalled 是阻塞  请求访问该URL的主机是有并发和连接数限制的,必须要等之前的执行才能执行之后的,这段时间的耗时
        DNS Lookup 是指域名解析所耗时间
        Initial connection 初始化连接时间,这里一般是TCP 3次连接握手时间
        SSL https特有,是一种协议
        Request sent 发送请求所消耗的时间
        Waiting 等待响应时间,这里一般是最耗时的
        Content Download 下载内容所需要消耗的时间



回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,编程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。