首页 > 其他分享 >转 浏览器中 F12 功能的简单介绍

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

时间:2023-01-10 14:00:37浏览次数:65  
标签:浏览器 请求 查看 元素 修改 简单 F12 源代码 页面

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

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

 原创                   学而不思则罔,思而不学则殆     网址https://blog.51cto.com/u_15766933/5625186

片片枫叶?情2022-08-26 17:24:46©著作权

文章标签F12开发者工具基础知识javascript服务器右键文章分类其它前端开发

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

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

 

 

    • 元素(Elements):用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。
    • 控制台(Console):控制台一般用于执行一次性代码,查看JavaScript对象,查看调试日志信息或异常信息。
    • 源代码(Sources):该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码,此外最重要的是可以调试JavaScript源代码,可以给JS代码添加断点等。
    • 网络(Network):网络页面主要用于查看header等与网络连接相关的信息。
    • 1、元素(Elements)
    • 浏览器中 F12 功能的简单介绍_F12开发者工具基础知识_02

      利用鼠标点击箭头(或用者用快捷键Ctrl+Shift+C)进入选择元素模式,然后从页面中选择需要查看的元素,然后可以在开发者工具元素(Elements)一栏中定位到该元素源代码的具体位置 。
      查看元素属性:可从被定位的源码中查看部分,如class、src,也可在右边的侧栏中查看全部的属性,如上图位置查看修改元素的代码与属性:可直接双击想要修改的部分,然后就进行修改,或者选中要修改部分后点击右键进行修改,如下图:
      修改元素的代码与属性:可直接双击想要修改的部分,然后就进行修改,或者选中要修改部分后点击右键进行修改,如下图
      点击需要修改的元素:右击鼠标进行编辑:

浏览器中 F12 功能的简单介绍_F12开发者工具基础知识_03



    • 注意:这个修改也仅对当前的页面渲染生效,不会修改服务器的源代码,故而这个功能也是作为调试页面效果而使用。
      右边的侧栏个功能的介绍:如下图所示

浏览器中 F12 功能的简单介绍_服务器_04


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

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

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



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

浏览器中 F12 功能的简单介绍_右键_06


  • 请求文件具体说明
  • 浏览器中 F12 功能的简单介绍_服务器_07


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

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

     

     

    浏览器中 F12 功能的简单介绍_右键_08

     

  2.  

    查看Network基本信息,请求了哪些地址及每个URL的网络相关请求信息都可以看的到

    URL,响应状态码,响应数据类型,响应数据大小,响应时间

     

    浏览器中 F12 功能的简单介绍_服务器_09

  3.  

    请求URL可进行筛选和分类

    选择不同分类,查看请求URL,方便查找

     

    浏览器中 F12 功能的简单介绍_F12开发者工具基础知识_10

  4.  

    也可以直接Filter搜索查询相关URL

    可以输入关键字或者正则表达式进行查询

     

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

  5.  

    Waterfall能分割重要的请求耗时,查看具体请求耗时在哪个地方

    鼠标指到相关区域可以看到具体耗时

     

    浏览器中 F12 功能的简单介绍_服务器_12

  6.  

    我们具体分析下里面每个各代表什么意思,分别耗时多少,通过这个来分析服务器到底是哪个环节出了问题

    Queueing 是排队的意思

    Stalled 是阻塞  请求访问该URL的主机是有并发和连接数限制的,必须要等之前的执行才能执行之后的,这段时间的耗时

    DNS Lookup 是指域名解析所耗时间

    Initial connection 初始化连接时间,这里一般是TCP 3次连接握手时间

    SSL https特有,是一种协议

    Request sent 发送请求所消耗的时间

    Waiting 等待响应时间,这里一般是最耗时的

    Content Download 下载内容所需要消耗的时间

     

学而不思则罔,思而不学则殆

   

标签:浏览器,请求,查看,元素,修改,简单,F12,源代码,页面
From: https://www.cnblogs.com/effortandluck/p/17040117.html

相关文章

  • python实现简单的snake game!
    实验环境:python3.8,pycharm需要的库:pygame,random需要下载64位对应python37版本的pygame网址https://pypi.org/project/Pygame/1.9.4/#files这里贴个安装方法。对代码的解......
  • dremio ctas 内部原理简单说明
    ctas从使用上就是一个sql操作,dremio会基于sql生成逻辑计划,然后到物理计划,之后到执行计划,然后会转变为对于支持写入操作数据源的操作(目前包括了parquet格式以及icebe......
  • #110警察节# 110,三个简单的数字,组成了一串安全密码
    ​​#110警察节#​​110,三个简单的数字,组成了一串安全密码:它是联结警民之情的爱心桥,是守护人民安全的生命线,更是新征程下传承公安事业的接力棒。在第三个“中国人民警察节......
  • 「最短路」最简单的最短路问题
    本题为1月10日22寒假集训每日一题题解题目来源:(未知)题面题目描述给出一个图,起始点是1,结束点是N,边是双向的。求点1到点N的最短距离。哈哈,这就是标准的最短路径问题......
  • dremio FormatMatcher 简单说明
    FormatMatcher核心是对于文件系统进行进行格式匹配,方便查询以及执行引擎了解具体支持的数据格式,进行实际数据的处理每个FormatPlugin都需要包含一个格式化匹配器参考......
  • 面向对象程序设计 第二章 C++简单的程序设计
    目录C++语言的特点1.兼容C语言·它保持了C的简洁、高效和接近汇编语言等特点。·对C的类型系统进行了改革和扩充。·C++也支持面向过程的程序设计,不是一个纯正的面......
  • 浏览器访问 JSP 文件时无法进入 JavaScript 代码
    问题描述浏览器访问<head>中有JavaScript代码的JSP文件:<%@pagecontentType="text/html;charset=UTF-8"language="java"%><html><head><title>$Title......
  • 网站和浏览器
    01.网站和网页网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,网站就是由网页组成的,如果只有域名和虚拟主机而没有制作任何网页的话,客户仍旧无法访问网站......
  • VUE 防抖简单实现
    防抖代码实现:exportclassDebounce{staticcurrent:Debounce=newDebounce();staticasyncInvoke<T>(func:()=>Promise<T>,timeout:number=300)......
  • 客服系统前端开发:navigator对象能获取到的访客浏览器信息【唯一客服】网站在线客服系
    浏览器navigator能获取到一些有用的访客信息可以使用JavaScript的navigator对象来获取当前浏览器的信息。下面是navigator对象可以获取到的一些有用的信息:naviga......