5

I am developing a Chrome extension which adds a SidebarPanel. I add it in devtools.js:

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

sidebar.html includes the required JS - sidebar.js.

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

Problem: In the Devtools debug views I can't see the sidebar.js file anywhere - hence I can't debug it. Following the technique listed here I can bring up the background.js and devtools.js - No sidebar.js though.

Cœur
  • 37,241
  • 25
  • 195
  • 267
bsandhu
  • 507
  • 4
  • 5
  • I think [Remote Debugging](https://developer.chrome.com/devtools/docs/debugger-protocol) should work (it can be used on the same computer and same browser instance). – wOxxOm Dec 15 '15 at 12:49

1 Answers1

-1

To debug the sidebar.js file in your Chrome extension, follow these steps:

  • go to chrome://extensions/ in your address bar.
  • Find your extension in the list and click on the "Inspect views" link under it.
  • A new window will open, displaying the standalone DevTools for your extension.
  • In the standalone DevTools, you can access different panels similar to regular Chrome DevTools, such as Console, Elements, Sources, and Network. This will allow you to debug your extension effectively.

Here's the screenshot to show where to find the links:

陳阿普
  • 1
  • 1