zl程序教程

您现在的位置是:首页 >  云平台

当前栏目

重构后的Firefox网络监视工具,里边加了什么黑科技?

网络工具重构 什么 科技 firefox 监视
2023-09-27 14:26:07 时间
本文讲的是重构后的Firefox网络监视工具,里边加了什么黑科技?,

重构后的Firefox网络监视工具,里边加了什么黑科技?

Firefox开发工具的早期版本已经在Firefox中提供了网络监视器工具,任何关心页面加载性能和网页运行速度的用户都非常喜欢这个工具。不过该工具最近被进行了广泛的重构(项目代号为Netmonitor.html),这篇文章旨在向大家解释如何设计新架构以及你如何使用重构之后的新技术。

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

重构后的Firefox网络监视工具,里边加了什么黑科技?

目标

重构的主要目标之一是在标准Web技术之上重建整个工具,开发人员删除了所有特定于Firefox的旧版代码,如XUL(XML用户界面语言),还有使用特定于Firefox的API的代码。这是一个很大的进步,因为使用网络标准可以允许你在两个不同的环境中运行整个工具的代码库:

1.开发工具箱

2.任何网页

任何熟悉Firefox开发工具的人都知道第一种情况,开发者工具箱可以在浏览器窗口的底部轻松打开,并附带各种工具(包括网络监视器)。

第二个工具是新的,现在可以像任何其他标准Web应用程序一样在浏览器选项卡中加载该工具,以下就是其界面外观。

重构后的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网络监视工具,里边加了什么黑科技?

1.表示NetMonitorApp的根组件可以在Developer Toolbox或Web页面中呈现。

2.操作负责过滤,清除请求列表,排序和打开具有详细信息的侧面板。

3.我们的所有数据都存储在存储对象中,包括有关HTTP流量的所有收集的数据。

新功能

我们一直主要关注代码重构,但是还有一些新功能或 UI方面的改进。我们来看看其中的一些。

Column Picker

有一些列包含有关个别请求的附加信息,用户可以使用上下文菜单来选择那些认为重要的信息。

重构后的Firefox网络监视工具,里边加了什么黑科技?

总计数据(Summary Data)

研究人员已经为列表中当前显示的请求实现了更好的总计,它现在位于面板的底部。

重构后的Firefox网络监视工具,里边加了什么黑科技?

列表中的请求数

所有请求的大小或传送大小

加载所有请求所需的总时间

发生DomContentLoaded事件的时间

加载事件发生的时间

过滤性能(Filtering By Properties)

过滤器UI现在更强大了,可以根据各种属性过滤请求列表。例如,你可以在过滤器输入框中键入:greater-than:50,只查看大于50个字节的请求。

重构后的Firefox网络监视工具,里边加了什么黑科技?

了解更多MDN

指向MDN的UI中有许多地方有更多信息的链接。例如,您可以快速了解各种HTTP标头的使用方式。点击这里,了解更多的MDN

重构后的Firefox网络监视工具,里边加了什么黑科技?

总结

我们相信,根据Web标准构建新一代Firefox Developer Tools是正确的方式,因为这意味着工具可以在不同环境中运行,并且可以更有效地与其他项目(例如IDE)集成。 以网络标准为基础的工具会使许多事情成为可能,现在你还可以考虑将该工具作为可以从互联网平台中受益的在线Web服务。 你可以在网络上分享收集的数据以及调试上下文,打开一个真正的社交调试世界的大门。

原文发布时间为:2017年6月24日 本文作者:xiaohui  本文来自云栖社区合作伙伴嘶吼,了解相关信息可以关注嘶吼网站。 原文链接
基于阿里云云平台快速实现网络入侵检测 (IDS) 及网络安全监视 (NSM) 数据包捕获是一个重要组件,可以实施网络入侵检测系统 (IDS) 并执行网络安全监视 (NSM)。 我们可以借助开源 IDS 工具来处理数据包捕获,并检查潜在网络入侵和恶意活动的签名。 使用网络观察程序提供的数据包捕获,可以分析网络中是否存在任何有害入侵或漏洞,Suricata 就是这样的一种开源工具,它是一个 IDS 引擎,可使用规则集来监视网络流量,每当出现可疑事件时,它会触发警报。 Suricata 提供多线程引擎,意味着它能够以更高的速度和效率执行网络流量分析,在本文中将会介绍到如何在 ECS 中使用Suricata来对网络进行入侵检测,同时并根据Suricata中给定的威胁规则匹配的
5G 网络重构关键技术 | 带你读《5G时代的承载网》之十五 5G 网络架构的重构是以一系列新技术的引入作为先决条件的,例如,基于 SDN 实现控制与转发的分离,基于 NFV 实现软硬件解耦。另外,还需要引入 网络切片、边缘计算、D2D 通信等技术方向,以形成针对所有场景的解决方案。 本节将对几个主要的 5G 使用技术做简单介绍。
如何使用浏览器网络监视工具进行黑客攻击 本文讲的是如何使用浏览器网络监视工具进行黑客攻击,在上一篇《重构后的Firefox网络监视工具,里边加了什么黑科技?》中,除了深入了解重构之后的网络监视器工具,我们还了解到,使用Web标准构建开发工具使我们能够在不同的环境中运行它们比如加载在Firefox Developer Toolbox中,或者作为标准Web应用程序加载到浏览器选项卡中。