嘿，我来帮你搞定这个需求！要通过JS获取Network面板里的源名称（第一列）和类型（第三列），你可以用Chrome官方提供的两种方式实现，下面给你详细说明：

方式一：用Chrome DevTools Protocol（CDP）（适合Node.js环境） #

这是最通用的方式，能在外部程序里和Chrome DevTools交互，步骤如下：

1. 启动带远程调试的Chrome实例
   先关闭所有Chrome窗口，然后用命令行启动Chrome并开启远程调试端口：

   # Windows示例
   "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222
   
   # Mac示例
   /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
   

2. 用Node.js连接并获取数据
   首先安装CDP的客户端包：

   npm install chrome-remote-interface
   

   然后写代码监听Network请求：

   const CDP = require('chrome-remote-interface');
   
   async function fetchNetworkData() {
     // 连接到开启远程调试的Chrome
     const client = await CDP();
     const { Network, Page } = client;
   
     // 启用Network监控
     await Network.enable();
   
     // 监听请求事件，提取需要的信息
     Network.requestWillBeSent((params) => {
       // 源名称就是请求的URL（对应面板第一列）
       const sourceName = params.request.url;
       // 类型对应面板第三列的Type字段
       const type = params.type;
       console.log(`源名称: ${sourceName}, 类型: ${type}`);
     });
   
     // 导航到你要监控的页面
     await Page.navigate({ url: 'https://example.com' });
   
     // 保持连接30秒，足够捕获请求，之后可以手动关闭
     await new Promise(resolve => setTimeout(resolve, 30000));
     await client.close();
   }
   
   fetchNetworkData().catch(err => console.error('出错了:', err));
   

方式二：用Chrome扩展API（适合在浏览器内实现） #

如果你想做一个Chrome扩展来获取这些数据，可以用chrome.devtools.networkAPI：

1. 创建扩展的manifest文件（manifest.json）：

   {
     "name": "Network数据捕获工具",
     "version": "1.0",
     "devtools_page": "devtools.html",
     "manifest_version": 3
   }
   

2. 创建devtools页面（devtools.html）：

   <script src="devtools.js"></script>
   

3. 编写逻辑代码（devtools.js）：

   // 监听Network面板的请求完成事件
   chrome.devtools.network.onRequestFinished.addListener(request => {
     const sourceName = request.request.url;
     const type = request.request.type;
     console.log(`源名称: ${sourceName}, 类型: ${type}`);
     // 你也可以把这些数据保存下来或者展示在扩展面板里
   });
   

把这些文件打包成扩展，加载到Chrome里，打开DevTools就能看到捕获到的Network数据啦！

内容的提问来源于stack exchange，提问作者fipsi