重构后的Firefox收集看管对象,里边加了甚么黑科技? | 申博官网
登录
  • 欢迎进入Sunbet!
  • 如果您觉得Sunbet对你有帮助,那么赶紧使用Ctrl+D 收藏Sunbet并分享出去吧
  • 您好,这里是Sunbet!

重构后的Firefox收集看管对象,里边加了甚么黑科技?

重构后的Firefox收集看管对象,里边加了甚么黑科技? 重构后的Firefox收集看管对象,里边加了甚么黑科技?

Firefox开辟工具的晚期版本曾经在Firefox中供应了网络监视器工具,任何体贴页面加载机能和网页运转速率的用户都异常喜好这个工具。不外该工具近来被进行了普遍的重构(项目代号为Netmonitor.html),这篇文章旨在向人人诠释怎样设想新架构和你怎样运用重构以后的新手艺。

以下就是Firefox Developer Toolbox中运转的网络监视器用户界面。

重构后的Firefox收集看管对象,里边加了甚么黑科技? 重构后的Firefox收集看管对象,里边加了甚么黑科技?

目的

重构的主要目的之一是在规范Web手艺之上重修全部工具,开辟人员删除一切特定于Firefox的旧版代码,如XUL(XML用户界面言语),另有运用特定于Firefox的API的代码。这是一个很大的提高,由于运用网络规范能够许可你在两个分歧的状况中运转全部工具的代码库:

1.开辟工具

2.任何网页

任何熟习Firefox开辟工具的人都晓得第一种状况,开辟者工具箱能够在浏览器窗口的底部轻松翻开,并附带种种工具(包孕网络监视器)。

第二个工具是新的,如今能够像任何其他规范Web应用程序一样在浏览器选项卡中加载该工具,以下就是其界面表面。

重构后的Firefox收集看管对象,里边加了甚么黑科技? 重构后的Firefox收集看管对象,里边加了甚么黑科技?

请注意,该页面是从localhost:8000加载的,这是开辟效劳器正在运转的地位。

工具作为网络应用程序运转的才能是一件很主要的打破,如今你能够运用一切的浏览器工具来开辟工作流。固然能够运用DevTools来调试DevTools,但运用浏览器中的工具会让调试如今变得越发简朴和轻易。固然,你也能够在其他浏览器中加载该工具。开辟也更简朴,

由于我们没必要构建Firefox。总而言之,一个简朴的标签革新就足以让网络监视器从新加载并测试代码变动。

架构

我们曾经在以下手艺的基本上构建了新的网络监视器前端:

React
Redux
Immutable
Mocha
Enzyme
Webpack
Yarn

Firefox Developer Tools须要庞杂的UI属性,以是开辟人员会运用受欢迎的React和Redux组合来为一切的工具竖立一个简约而同等的代码库,网络监视器也不破例。现在开辟人员曾经完成了一组React组件,它们卖力衬着UI,起到存储的感化,经由过程HTTP阻拦网络一切数据,最初是一组用户可能要实行的操纵。

开辟人员也改变了之前编写测试的体式格局,不再运用Firefox特定的测试工具,而是逐步转向对照普遍运用的库,如Mocha 和 Enzyme。这样一来,就更轻易明白新的代码库。

开辟人员正在运用Webpack在网页中运转时构建绑缚包,绑缚包会经由过程localhost:8000效劳。

一样平常架构基于React和Redux观点中引入的流程。

重构后的Firefox收集看管对象,里边加了甚么黑科技? 重构后的Firefox收集看管对象,里边加了甚么黑科技?

1.透露表现NetMonitorApp的根组件能够在Developer Toolbox或Web页面中显现。

2.操纵卖力过滤,消灭要求列表,排序和翻开具有详细信息的侧面板。

———————————————-

申博|网络安全巴士站【www.bus123.net】

申博|网络安全巴士站是一个专注于网络安全、系统安全、互联网安全、信息安全,全新视界的互联网安全新媒体。。

———————————————-

3.我们的一切数据都存储在存储工具中,包孕有关HTTP流量的一切网络的数据。

新功能

我们一向主要存眷代码重构,然则另有一些新功能或 UI方面的革新。我们来看看个中的一些。

Column Picker

有一些列包罗有关一般要求的附加信息,用户能够运用上下文菜单来挑选那些以为主要的信息。

重构后的Firefox收集看管对象,里边加了甚么黑科技? 重构后的Firefox收集看管对象,里边加了甚么黑科技?

合计数据(Summary Data)

研究人员曾经为列表中以后显现的要求完成了更好的合计,它如今位于面板的底部。

重构后的Firefox收集看管对象,里边加了甚么黑科技? 重构后的Firefox收集看管对象,里边加了甚么黑科技?

列表中的要求数

一切要求的巨细或传送巨细

加载一切要求所需的总时候

发作DomContentLoaded事宜的时候

加载事宜发作的时候

过滤机能(Filtering By Properties)

过滤器UI如今更壮大了,能够依据种种属性过滤要求列表。比方,你能够在过滤器输入框中键入:greater-than:50,只检察大于50个字节的要求。

重构后的Firefox收集看管对象,里边加了甚么黑科技? 重构后的Firefox收集看管对象,里边加了甚么黑科技?

相识更多MDN

指向MDN的UI中有许多地方有更多信息的链接。比方,您能够疾速相识种种HTTP标头的运用体式格局。点击这里,相识更多的MDN

重构后的Firefox收集看管对象,里边加了甚么黑科技? 重构后的Firefox收集看管对象,里边加了甚么黑科技?

总结

我们置信,依据Web规范构建新一代Firefox Developer Tools是准确的体式格局,由于这意味着工具能够在分歧状况中运转,而且能够更有效地与其他项目(比方IDE)集成。 以网络规范为基本的工具会使许多事情成为可能,如今你还能够斟酌将该工具作为能够从互联网平台中受害的在线Web效劳。 你能够在网络上分享网络的数据和调试上下文,翻开一个真正的交际调试天下的大门。

本文翻译自https://hacks.mozilla.org/2017/06/network-monitor-reloaded/,如若转载,请说明原文地点: http://www.4hou.com/tools/5764.html


Sunbet|网络安全巴士站声明:该文看法仅代表作者自己,与本平台无关。版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明重构后的Firefox收集看管对象,里边加了甚么黑科技?
喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址