巧用Chrome Network面板中的HAR包及自动生成请求代码

若尘的技术之旅
372 阅读2分钟

使用背景

在实际的开发和维护过程中，前端开发人员经常会遇到客户在使用过程中出现的bug或业务异常。这时，前端开发人员需要快速定位和解决问题。Chrome开发者工具（DevTools）中的Network面板是一个非常强大的工具，可以帮助你捕获和分析网络请求，从而快速找到问题的根源。以下是具体的操作步骤和技巧，希望能帮助你在这种情况下高效地进行排查和调试。

1. 打开开发者工具

  • 步骤：按 F12 或 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（Mac）打开开发者工具。

2. 切换到Network面板

  • 步骤：点击顶部的“Network”标签。 image-20240710114454147.png

3. 捕获网络请求

  • 步骤：确保Network面板正在记录网络活动。如果没有，请刷新页面或执行你想要捕获的操作。

4. 导出HAR文件

  • 步骤：
    1. 右键点击Network面板中的任意请求。
    2. 选择“Save all as HAR with content”。
    3. 保存文件到本地。

image-20240710114551507.png

5. 重新发起请求

  • 步骤：
    1. 右键点击请求，在Network面板中找到你感兴趣的请求，右键点击它。
    2. 选择“Copy as cURL”。
    3. 打开终端或命令行工具，粘贴并执行cURL命令。

image-20240710114803497.png

6. 生成Node.js请求代码

  • 步骤：
    1. 右键点击请求，在Network面板中找到你感兴趣的请求，右键点击它。
    2. 选择“Copy as Node.js fetch”。
    3. 将生成的Node.js代码粘贴到你的代码编辑器中。
    4. 安装node-fetch库：npm install node-fetch。
    5. 保存文件并在终端中运行它。

7. 示例代码

const fetch = require('node-fetch');

const url = 'https://example.com/api';
const options = {
  method: 'GET',
  headers: {
    'User-Agent': 'Mozilla/5.0',
    'Accept': 'application/json',
    // 其他头信息
  }
};

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

8. 运行代码

  • 步骤：将上述代码保存到一个文件中，例如request.js，然后在终端中运行： 
    node request.js

9. 使用Postman重新发起请求

  • 步骤：
    1. 打开Postman。
    2. 点击“Import”按钮。
    3. 选择“Raw text”选项。
    4. 粘贴cURL命令并点击“Continue”。
    5. 点击“Send”按钮来发送请求。

10. 使用HAR文件进行分析

  • 步骤：
    1. 打开Network面板。
    2. 点击面板左上角的“Import HAR”按钮。
    3. 选择你之前导出的HAR文件。

总结

通过这些步骤，可以巧妙地利用Chrome开发者工具中的HAR文件和生成的请求代码来重新发起请求，进行调试和分析。当客户在使用过程中出现bug或业务异常时，前端开发人员可以快速捕获和分析网络请求，从而高效地定位和解决问题。每个步骤的截图将帮助你更直观地理解和操作。 Happy coding ~

avatar
文章
阅读
粉丝