调试 Chrome 扩展侧边栏面板

Question

我正在开发一个 Chrome 扩展程序，它添加了一个SidebarPanel。我将它添加到 devtools.js 中：

chrome.devtools.panels.elements.createSidebarPane(
    "Guardian",
    function (sidebar) {
        sidebar.setPage('extension/sidebar.html')
    });

sidebar.html 包含所需的 JS - sidebar.js。

<html>
<head>
    <script src="sidebar.js"></script>
</head>
...
<body style="min-height: 200px">
...
</html>

问题： 在 Devtools 调试视图中，我在任何地方都看不到 sidebar.js 文件 - 因此我无法调试它。按照此处列出的技术，我可以调出 background.js 和 devtools.js - 虽然没有 sidebar.js。

Answer 1

要调试 Chrome 扩展程序中的 sidebar.js 文件，请按照以下步骤操作：

转到地址栏中的 chrome://extensions/。
在列表中找到您的扩展程序，然后单击其下方的“检查视图”链接。
将打开一个新窗口，显示您的扩展的独立开发工具。
在独立的 DevTools 中，您可以访问与常规 Chrome DevTools 类似的不同面板，例如 Console、Elements、Sources 和 Network。这将使您能够有效地调试您的扩展。

这是显示在哪里可以找到链接的屏幕截图：