Network-Viewer：重塑HAR文件查看体验

Network-Viewer：重塑HAR文件查看体验

network-viewer React.js component for viewing HAR files. 项目地址: https://gitcode.com/gh_mirrors/ne/network-viewer

项目介绍

Network-Viewer 是一款基于 React 构建的HAR文件查看器，旨在为用户提供一个更加人性化的网络请求视图。无论您是前端开发者、测试工程师还是网络性能分析专家，Network-Viewer 都能帮助您轻松查看和分析HAR文件中的网络请求数据。

项目技术分析

Network-Viewer 的核心技术栈包括：

• React：作为前端框架，React 提供了高效的组件化开发模式，使得项目结构清晰且易于维护。
• Axios：用于处理HTTP请求，支持CORS配置，方便用户从远程服务器获取HAR文件。
• Webpack：作为模块打包工具，Webpack 确保了项目的构建效率和代码的优化。

此外，Network-Viewer 还集成了多种现代前端技术，如CSS-in-JS、React Hooks等，确保了项目的可扩展性和性能优化。

项目及技术应用场景

Network-Viewer 适用于多种应用场景：

• 前端开发：开发者可以使用 Network-Viewer 分析页面加载时的网络请求，优化资源加载顺序和性能。
• 自动化测试：测试工程师可以通过 Network-Viewer 查看和分析自动化测试生成的HAR文件，快速定位网络请求问题。
• 性能监控：性能监控工具可以集成 Network-Viewer，为用户提供直观的网络请求分析界面，帮助识别和解决性能瓶颈。

项目特点

Network-Viewer 具有以下显著特点：

• 人性化界面：通过直观的界面设计，用户可以轻松导入、查看和分析HAR文件。
• 丰富的功能：支持HAR文件的导入、上传、搜索、过滤（如XHR、JS、CSS等）、错误过滤、瀑布图展示等功能。
• 灵活的配置：用户可以通过配置项自定义Network-Viewer的行为，如是否启用CORS、是否显示导入按钮等。
• 开源社区支持：项目完全开源，欢迎开发者贡献代码，共同完善功能和提升用户体验。

如何使用

导入/上传HAR文件

访问 Network-Viewer 在线演示，通过拖拽方式导入您的HAR文件。

获取HAR文件

• 使用 file=HAR_FILE_URL 作为查询字符串传递HAR文件的URL。
• 使用 isCORSEnabled=true 启用CORS支持（默认情况下CORS是禁用的）。

作为React库使用

$ npm install network-viewer

示例代码：

import { NetworkViewer } from 'network-viewer';
<NetworkViewer />

属性配置

| 属性名 | 类型 | 默认值 | 可选值 | 描述 | |:-------------------|:------|:-----------|:------------------------------|:-------------------------------------------------------------------| | autoHighlightChange | Bool | false | true, false | 当请求详情可见时，是否允许在scrollTimeStamp变化时高亮请求 | | containerClassName | String| null | | 自定义类名，用于覆盖Network-Viewer的默认样式 | | data | Object| null | { log: { entries: [], pages: [] } } | HAR文件数据，应包含log.entries和log.pages | | fetchOptions | Object| { withCredentials: true } | | axios请求选项，可在此处设置以获取HAR文件 | | file | String| null | | HAR文件的URL，用于获取请求数据 | | onDataLoaded | Func | null | (data) => {} | 文件加载完成后，此函数将接收加载的数据 | | onDataError | Func | null | (error) => {} | 加载数据失败时调用的函数 | | onRequestSelect | Func | null | (requestDetail) => {} | 请求选中时，此函数将接收请求详情 | | options | Object| {showImportHAR: true, showTimeline: false} | | showImportHar: 显示/隐藏导入按钮和模态框，showTimeline: 显示/隐藏请求的顶部时间线 | | scrollRequestPosition | String| near | before, after, near | 通过时间戳查找并高亮网络请求，near: 查找接近时间戳的请求，before: 查找时间戳之前的请求，after: 查找时间戳之后的请求 | | scrollTimeStamp | Number| null | | 通过时间戳查找并高亮网络请求 |

Network-Viewer 不仅提供了强大的功能，还具备高度的可定制性，能够满足不同用户的需求。无论您是初学者还是资深开发者，Network-Viewer 都能为您的工作带来极大的便利。立即体验，开启您的网络请求分析之旅吧！

network-viewer React.js component for viewing HAR files. 项目地址: https://gitcode.com/gh_mirrors/ne/network-viewer