如何调试 Chrome devtools 扩展中的后台页面？

Question

我正在开发 Chrome DevTools 扩展程序，但找不到如何调试在后台页面中运行的脚本。

我在manifest.json声明了一个DevTools后台页面：

"devtools_page": "devtools-background.html"

该 HTML 页面运行一个脚本：

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

该脚本添加了一个面板：

chrome.devtools.panels.create('My Extension', '', 'index.html')

我可以通过在任何页面上打开 DevTools 来运行我的扩展程序，效果很好，我看到了面板。我可以通过打开 DevTools 页面上的 DevTools 来调试面板的元素和脚本（或通过chrome://extensions开发者模式）。我什至可以将外部调试器从 VS Code 连接到扩展面板。

但是我无法将调试器连接到后台页面的devtools-background.js。我无法使用 console.log 或单步调试来了解后台发生的情况。如果该脚本中发生错误，我唯一拥有的是 chrome://extensions 开发人员模式的错误。但没有控制台或调试器。

Answer 1

当你点击“service worker”时，你可以看到控制台日志的背景。