精华内容
下载资源
问答
  • 浏览器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看见的是后端路由

     

     

     

     

    展开全文
  • chrome 浏览器F12

    2016-01-10 15:18:02
    chrome 浏览器F12 前端必用
    chrome 浏览器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 等待响应时间,这里一般是最耗时的

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

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

    展开全文
  • 浏览器 F12 开发者工具快速入门

    千次阅读 2017-07-05 15:31:49
    浏览器 F12 开发者工具快速入门
  • WEB浏览器F12调试页面

    千次阅读 2020-10-27 16:06:31
    WEB浏览器F12调试页面 Elements—标签页,可以查看并且编辑页面元素,在左侧可以点选某一个元素,该元素会在页面上高亮,同时在右侧显示该元素的所有样式; Console—Console面板,就是Javascript控制台,Console最...
  • pc端微信内置浏览器F12

    千次阅读 2020-11-27 14:08:10
    pc端微信内置浏览器F12 1、下载devtools_resources.pak  https://files.cnblogs.com/files/wunaozai/devtools_resources.zip 由于版本的区别,需要下载对应版本的devtools_resources.pak)。然后将devtools_...
  • Chrome浏览器F12开发者工具简单使用 :(https://www.cnblogs.com/yaoyaojing/p/9530728.html)
  • 详解浏览器F12调试器和为JavaScript添加断点-Part11.控制台面板介绍2.为JavaScript添加断点 1.控制台面板介绍 按F12 键启动浏览器中的调试器 请注意与右键“检查源代码”的区别: 浏览器调试器(控制台)面板详解...
  • 浏览器F12功能键对测试开发工程师的重要性 F键,功能键,Function键。F12常用于网站界面测试、调试,分析网页所出现的问题,查看html元素、查看响应事件等方面。 打开一个网页,点击F12,弹出一个窗口,其窗口的功能...
  • CSDN卜小娴《Chrome开发者工具使用小技巧》 CSDN csdnligao 《chrome开发者工具的使用》 ...CnBlogs逆天妖精《Chrome浏览器F12开发者工具简单使用》 转载于:https://www.cnblogs.com/hyeTi/p/10337643.html...
  • httpwatch,firebug都是浏览器的插件,需要额外下载,fiddler,charles也需要额外下载安装包另行安装,但是浏览器F12调试器却是所有浏览器内置的调试器,不需要大家额外去安装的,打开它只是一个...
  • 浏览器F12(开发者调试工具) 功能介绍 调试时使用最多的功能页面是:元素(ELements)、控制台(Console)、源代码(Sources)、网络(Network)等。  元素(Elements):用于查看或修改HTML元素的属性、...
  • 浏览器F12功能键对测试工程师的重要性 F键,功能键,Function键。F12常用于网站界面测试、调试,分析网页所出现的问题,查看html元素、查看响应事件等方面。 打开一个网页,点击F12,弹出一个窗口,其窗口的功能...
  • 用JS实现控制浏览器F12与右键功能

    千次阅读 2017-09-12 11:37:58
    用JS实现控制浏览器F12与右键功能,防止恶意窃取代码,或其他直接复制进去就好 //禁用右键 document.oncontextmenu = function () { return false; }; //禁用开发者工具F12 document.onkeydown = function () { ...
  • httpwatch,firebug都是浏览器的插件,需要额外下载,fiddler,charles也需要额外下载安装包另行安装,但是浏览器F12调试器却是所有浏览器内置的调试器,不需要大家额外去安装的,打开它只是一...
  • Chrome浏览器F12讲解

    千次阅读 2019-09-29 22:04:50
    Chrome浏览器相对于其他的浏览器而言,DevTools(开发者工具)非常强大。这节课将为大家介绍怎么利用Chrome浏览器的开发者工具进行HTTP请求分析 Chrome浏览器讲解 Chrome 开发者工具是一套内置于Google Chrome中的...
  • 通过浏览器F12开发工具快速获取别的网站前端代码的方法 说明:直接另存为网页是比较老的做法,会有很多没用的东西下载下来。通过F12开发工具,sources获取到的是比较好的,有目录结构的源文件。 转载于:...
  • vue拉伸div边框加高div 类似于浏览器F12控制台那样的拉高效果 直接上代码了 复制过去即可使用 <template> <div> <div id="app"> <div class="box-bottom" ref="drag_box" :style="'height:'...
  • edge浏览器 F12中文换成英文

    千次阅读 2020-04-15 15:26:46
    一开edge浏览器控制台语言变成中文了怎么改回英文? 按F12 >> 点击右上角 … >> 设置 >>取消匹配浏览器语言 重新打开后又变成英文了 完
  • ** 1.首先F12打开控制台,点击Network,再点击XHR,就可以查看接口名和接口相关信息 **
  • 页面代码也是可以打断点的【Google浏览器F12最好用】 ================
  • 在做前端开发时, chrome 浏览器f12 功能非常好用, 可以调试 html js css 代码 其中 console 标签页表示控制台, 我们可以输入 js 代码, 回车执行 常用的命令有 console.log 打印日志 console.count 计数器, 记录...
  • 目前,常用的浏览器IE、Chrome、Firefox都有相应的脚本调试功能下面我就介绍如何在浏览器/VS中调试我们的JS代码,感兴趣的你可不要走开啊,希望本文对你有所帮助
  • 浏览器F12控制台简述Network

    千次阅读 2019-09-02 14:15:49
    一般情况下我们看Network里面的Preview和Response的结果似乎一模一样。 不管是请求页面,请求页面还是请求js还是请求css,二者的结果都一样。直到今天从服务器端向web前端发送一段json格式的数据,才发现Preview的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 55,539
精华内容 22,215
关键字:

浏览器f12