精华内容
下载资源
问答
  • 浏览器F12功能总结

    千次阅读 2020-08-25 16:35:24
    不同浏览器F12控制面板的中英文显示 360浏览器:英文 IE浏览器:中文 搜狗:英文 谷歌浏览器:英文 火狐浏览器:安装firebug英文;没有按照就默认中文 F12控制台功能 元素(Elements):用于查看或修改HTML元素的...

    不同浏览器F12控制面板的中英文显示

    360浏览器:英文

    IE浏览器:中文

    搜狗:英文

    谷歌浏览器:英文

    火狐浏览器:安装firebug英文;没有按照就默认中文

    F12控制台功能

    元素(Elements):用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。

    image.png

    可以直接点击元素进行CSS、html修改;此修改只会在本地生效;不会上传到服务器端,所以可以用来调试前端代码

    控制台(Console):记录前端javascript对象、log信息、异常信息

    image.png

    源代码(Sources):查看网页的源代码HTML代码,js代码、CSS代码,可以直接修改代码进行前端调试

    可以点击JS代码前面的数字来设置断点 ;断点可以在DOM元素节点发生改变时、XHR生命周期状态改变时、指定的事件执行时被触发

    image.png

    网络(Network):与网络相关的接口请求响应和网络传输等

    记录页面上的网络请求的详情信息,从发起页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间、Request和Response等),可以根据这个进行网络性能优化。

    image.png

    requests Table:

    image.png

    在Timing标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息,可能会涉及到如下过程的时间花费情况:

    1、Queuing

    排队的时间花费,可能由于该请求被渲染引擎认为是优先级比较低的资源(图片)、服务器不可用、超过浏览器的并发请求的最大连接数(Chrome的最大并发连接数为6).

    2、Stalled(阻塞)

    浏览器对同一个主机域名的并发连接数有限制,因此如果当前的连接数已经超过上限,那么其余请求就会被阻塞,等待新的可用连接;此外脚本也会阻塞其他组件的下载;

      优化措施:

      1、将资源合理分布到多台主机上,可以提高并发数,但是增加并行下载数量也会增大开销,这取决于带宽和CPU速度,过多的并行下载会降低性能;

      2、脚本置于页面底部;

    3、Proxy Negotiation

    与代理服务器连接的时间花费。

    4、DNS Lookup

    执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话,则这个时间为0。请求某域名下的资源,浏览器需要先通过DNS解析器得到该域名服务器的IP地址。在DNS查找完成之前,浏览器不能从主机名那里下载到任何东西。

      优化措施:

      1、利用DNS缓存(设置TTL时间);

      2、利用Connection:keep-alive特性建立持久连接,可以在当前连接上进行多个请求,无需再进行域名解析;

    5、Initial Connection:

    建立连接的时间花费,包含了TCP握手及重试时间。

    6、SSL

    http是超文本传输协议,以明文方式发送内容,不提供任何方式的数据加密,如果被不法分子截取浏览器和服务器之间的传输报文,会获取其中的信息。

      https 是安全套接字层超文本传输协议,就是在HTTP的基础上加入了SSL协议,SSL依靠证书来验证服务器的身份,并为浏览器和服务器之间的通信加密。

      因此建立HTTPS连接的时间相当于三次握手的时间+SSL时间。

    7、Request sent (发送请求)

    发送HTTP请求的时间(从第一个bit到最后一个bit)

      优化措施:

      1、减少HTTP请求,可以使用CSS Sprites、内联图片、合并脚本和样式表等;

      2、对不常变化的组件添加长久的Expires头(相当于设置久远的过期时间),在后续的页面浏览中可以避免不必要的HTTP请求;

    8、Waiting (等待响应)

    是最初的网络请求被发起到从服务器接收到第一个字节这段时间,它包含了TCP连接时间,发送HTTP请求时间和获得响应消息第一个字节的时间。

    通常是耗费时间最长的。从发送请求到收到响应之间的空隙,会受到线路、服务器距离等因素的影响。

      优化措施:

      1、使用CDN,将用户的访问指向距离最近的工作正常的缓存服务器上,由缓存服务器直接响应用户请求,提高响应速度;

    9、Content Download (下载)

    获取Response响应数据的时间花费。

    下载HTTP响应的时间(包含头部和响应体)

      优化措施:

      1、通过条件Get请求,对比If-Modified-Since和Last-Modified时间,确定是否使用缓存中的组件,服务器会返回“304 Not Modified”状态码,减小响应的大小;

      2、移除重复脚本,精简和压缩代码,如借助自动化构建工具grunt、gulp等;

      3、压缩响应内容,服务器端启用gzip压缩,可以减少下载时间;

    性能(Performance):监控该网页的性能各种指标信息

    内存(Memory):记录页面跟随时间的内存使用情况

    存储(Application):查看一些本地存储、会话存储、已索引数据库、Cookie、缓存、帧等

    image.png

    安全(Security):调试当前网页的安全和认证等问题

    image.png

    如果网页是安全的,则会显示这样一条消息:This page is secure (valid HTTPS).。

    通过点击View certificate可以查看main origin的服务器证书信息。

    点击左侧可以查看指定源的连接和证书详情。

    如果网页是不安全的,则会显示:This page is not secure.。

    该面板可以区分两种类型的不安全的页面:

    • 如果被请求的页面通过HTTP提供服务,那么这个主源就会被标记为不安全。
    • 如果被请求的页面是通过HTTPS获取的,但这个页面接着通过HTTP继续从其他来源检索内容,那么这个页面仍然被标记为不安全。这就是所谓的混合内容页面,混合内容页面只是部分受到保护,因为HTTP内容(非加密的内容)可以被嗅探者入侵,容易受到中间人攻击。

    审计(Audits):对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议

    image.png

    页面的URL:是前端路由, F12看见的是后端路由

     

     

     

     

    展开全文
  • 浏览器F12功能详细介绍 转载链接:https://www.pianshen.com/article/15161573557/

    浏览器F12功能详细介绍
    转载链接:https://www.pianshen.com/article/15161573557/

    展开全文
  • 浏览器f12是开发调试工具 Network是查看网络请求的

    浏览器f12是开发调试工具、Network是查看网络请求的

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

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

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

    请求URL可进行筛选和分类

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

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

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

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

    Queueing 是排队的意思

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

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

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

    SSL https特有,是一种协议

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

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

    我们了解了上面每个耗时的时间,才能根据对应时间来修改和优化服务器访问的速度

    底层码畜,如有不对还请点出,谢谢~

    展开全文
  • 在做前端开发时, chrome 浏览器f12 功能非常好用, 可以调试 html js css 代码 其中 console 标签页表示控制台, 我们可以输入 js 代码, 回车执行 常用的命令有 console.log 打印日志 console.count 计数器, 记录...

    在做前端开发时, chrome 浏览器的 f12 功能非常好用, 可以调试 html js css 代码
    其中 console 标签页表示控制台, 我们可以输入 js 代码, 回车执行

    常用的命令有

    • console.log 打印日志
    • console.count 计数器, 记录执行的次数
    • console.time 计时, console.timeEnd 停止计时并打印
    • $() 表示使用选择器获取单个元素, $$() 表示使用选择器获取元素数组
     // 打印 log info debug warn error
      let username = '你好鸭'
      // 加上大括号, 变为对象, 这样可以节省 手动打印变量名
      console.log({username})
      
     // 计数器 count
      // 计数, 并打印 label: 1
      console.count('label');
      // 计数, 并打印 label: 2
      console.count('label');
      
     // 计时器 time timeEnd
      console.time('go');
      for (let i = 0; i < 200000; i++) {
        let x = Math.random() * 2000;
      }
      console.timeEnd('go'); // go: 11.7861328125 ms
    
    // 获取单个元素
    $('p')
    // 获取元素数组
    $$('p')
    
    展开全文
  • 详解浏览器F12调试器和为JavaScript添加断点-Part11.控制台面板介绍2.为JavaScript添加断点 1.控制台面板介绍 按F12 键启动浏览器中的调试器 请注意与右键“检查源代码”的区别: 浏览器调试器(控制台)面板详解...
  • Queueing 是排队的意思 Stalled 是阻塞 请求访问该URL的主机是有并发和连接数限制的,必须要等之前的执行才能执行之后的,这段时间的耗时 DNS Lookup 是指域名解析所耗时间 Initial connection 初始化连接时间,这里...
  • 浏览器F12(开发者调试工具) 功能介绍 调试时使用最多的功能页面是:元素(ELements)、控制台(Console)、源代码(Sources)、网络(Network)等。  元素(Elements):用于查看或修改HTML元素的属性、...
  • chrome浏览器F12 功能的简单介绍

    万次阅读 多人点赞 2018-04-10 19:02:29
    由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿!首先介绍Chrome开发者工具中,调试时使用最多的三个功能...
  • httpwatch,firebug都是浏览器的插件,需要额外下载,fiddler,charles也需要额外下载安装包另行安装,但是浏览器F12调试器却是所有浏览器内置的调试器,不需要大家额外去安装的,打开它只是一个...
  • Queueing 是排队的意思 Stalled 是阻塞 请求访问该URL的主机是有并发和连接数限制的,必须要等之前的执行才能执行之后的,这段时间的耗时 DNS Lookup 是指域名解析所耗时间 Initial connection 初始化连接时间,...
  • 白屏// 不兼容performance.timing 的浏览器,如IE8window.pageStartTime = Date.now();// 白屏时间结束点window.firstPaint = Date.now();因此白屏时间则可以这样计算出:可使用 Performance API 时白屏时间 = ...
  • 浏览器打开百度的地址,通过F12调出开发者工具,这里简介下工具栏 元素(Elements):用于查看或修改HTML元素的属性、CSS属性、监听事件、断点 控制台(Console):控制台一般用于执行一次性代码,查看JavaScript对象、...
  • 1、elements 指的当前页面的样式,查看图片以及布局等 2、console js交互 3、source 访问的当前页面涉及到哪些资源 4、network 4.1、request Headers ... 其实这里浏览器还充当了sock...
  • chrome--浏览器调试工具详解

    千次阅读 2019-01-12 23:19:45
    chrome浏览器开发调试工具打开方式:F12键 一,常用面板介绍 1.定位小箭头按钮(左边第一个): 选中Elements面板,并启动该按钮,可以在页面中定位相应元素的源代码位置,或者选择源代码位置可定位到页面相应的元素...
  • 浏览器缓存详解

    2021-01-12 18:28:22
    刷新当前页面时浏览器会根据当前运行环境内存来决定是从 Memory Cache 还是 从Disk Cache中拿(可以看到下图最后几个文件有时候是从 Memory Cache中拿有时候是从Disk Cache中拿) 注意:以上回答全部基于chrome...
  • F12调试调试窗口详解

    千次阅读 2019-08-07 16:01:40
    一、F12调试参数详解 1.Elements: 2.Network: Name: headers: Preview: Response: Timing: 3.console: 4.Sources: 二、操作 1.窗口位置设置 2.怎么清除请求信息 3.停止记录 4.怎么把概述时间轴...
  • 首先将设置打开 中文切换为英文 英文切换为中文 需要注意的地方 如果没有立即生效,重启一下浏览器即可。
  • 谷歌浏览器F12开发者工具,上下布局改成左右 前端-chromeF12 谷歌开发者工具详解 Network篇 如何使用浏览器的F12开发者工具调试...Chrome浏览器F12开发者工具的几个小技巧总结 chrome浏览器中 F12 功能的简单介绍 ...
  • 浏览器端的存储方式: 说到cookie不能不说本地存储了。 本地存储的优点: 避免取回代码前一片空白,若是不需要新的数据可以减少向服务器的请求次数,从而减少用户等待服务器的响应时间。 网路状态不好时...
  • 谷歌Chrome浏览器开发者工具教程—基础功能篇 Chrome(F12开发者工具)是非常实用的开发辅助工具,对于前端开发者简直就是神器,但苦于开发者工具是英文界面,且没有中文,这让很多朋友都不知道怎么用。下载吧小编...
  • 目录前言知识点缓存的类型强缓存ExpiresCache-Control对比协商缓存Last-Modified 和 If-Modified-SinceETag 和 If-None-Match两者对比缓存位置Service WorkerMemory ...“嗯… 那你说说浏览器的缓
  • F12调试窗口

    千次阅读 2019-03-16 16:08:25
    F12调试窗口一、F12调试参数详解1.Elements:2.Network:3.console:4.Sources:二、操作1.窗口位置设置2.怎么清除请求信息3.停止记录4.怎么把概述时间轴去掉,使用hide overview 一、F12调试参数详解 1.Elements:...
  • HP笔记本功能键(f1-f12)与fn键的使用

    万次阅读 2018-08-22 09:21:09
    例如,f12是系统的睡眠键,同时也是浏览器调试的快捷键,有时会发现本来想调试,却关机睡眠了,很是浪费时间,令人头疼。下面是这些功能键的正确使用方法,可避免工作中的混乱状态发生: 1、fn键灯未亮 (1)功能...
  • HTTP请求过程——Chrome浏览器Network详解 当我们使用Python进行爬虫的时候,其实就是一个模拟的资源访问返回过程,使用第三方库用目的url向所在的服务器发出请求,网站的服务器接收到这个请求后进行处理和分析,...
  • 浏览器跨域详解-很多人没有提到的坑

    万次阅读 多人点赞 2018-01-25 17:34:18
    浏览器F12,控制台输出如下: 为了证明浏览器确实发出请求了,并且接收到数据了,用fidller抓包来分析一下,抓包结果如下: 请求报文 响应报文 真相大白,浏览器确实发出请求,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,958
精华内容 1,183
关键字:

浏览器f12功能详解