Chrome DevTools扩展调用getHAR无控制台输出问题求助

AI 小北

2026-6-26

解决DevTools面板中getHAR无输出的问题

1. 找错了控制台输出位置

你在panel.js里的console.log不会输出到当前页面的DevTools控制台，而是输出到你的扩展面板自身的调试控制台。要查看这个输出：

右键点击你的DevTools面板（MyPanel）的空白区域，选择「检查」
此时会弹出一个新的DevTools窗口，这里才是panel.js的日志输出位置

2. 调用时机可能过早

panel.js在面板刚加载时就调用getHAR()，但此时可能还没捕获到页面刷新后的网络请求。可以调整调用时机：

方式一：监听面板激活事件

修改panel.js代码：

// 当面板被激活时获取HAR数据
chrome.devtools.panels.panel.onShown.addListener(() => {
  chrome.devtools.network.getHAR((harLog) => {
    console.log('my output');
    console.log(harLog);
  });
});

方式二：添加按钮主动触发

先修改panel.html，增加一个触发按钮：

<html>
    <body>
        <button id="fetchHar">获取网络请求数据</button>
        <script src="panel.js"></script>
    </body>
</html>

再修改panel.js绑定点击事件：

document.getElementById('fetchHar').addEventListener('click', () => {
  chrome.devtools.network.getHAR((harLog) => {
    console.log('my output');
    console.log(harLog);
  });
});