0

I'm trying to update my Chrome extension both to make it compatible with Manifest v.3 and to use a service worker and my own DevTools panel. I declare both the service worker script and my DevTools panel page in manifest.json:

"background": { "service_worker": "myextension.js" },
"devtools_page": "devtools.myextension.html"

The Devtools panel page devtools.myextension.html contains the single line:

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

Script devtools.myextension.js contains the code:

chrome.devtools.panels.create(
    "My Extension",
    "myextension.png",
    "panel.devtools.myextension.html",
    panel => {
        console.log("devtools.myextension.js");
    }
);

Service worker script myextension.js starts with the line:

console.log("myextension.js");

As it was advised here and here I open the DevTools for the service worker in a separate window, then find the tab with my DevTools panel (it is created successfully), and then open another DevTools on the DevTools panel in another separate window. I can see both scripts mentioned above somewhere in the opened panels, I can see their logs in console(s), I can even mark some lines in those scripts as breakpoints.

The problem is those breakpoints never work. Is there a way to debug the code here normally rather than just to wait for error messages after its corrections?

Kostiantyn Ivashchenko
  • 941
  • 1
  • 10
  • 15
  • I guess the "Disable breakpoints" button is pressed? https://puu.sh/J6jef/ff56bfa848.png – wOxxOm Jun 17 '22 at 04:15
  • @wOxxOm, it is not, of course. Moreover, breakpoints in a message listener, added, say, in the service worker, work as they should. I guess the problem arises because each of these scripts initially always runs when its corresponding DevTools window is not opened yet. Maybe it can be considered even just a bug in Chrome, I do not know. – Kostiantyn Ivashchenko Jun 17 '22 at 11:51
  • 1
    I guess you can reload the extension on chrome://extensions page without closing devtools. – wOxxOm Jun 17 '22 at 13:07
  • @wOxxOm, it works for the service worker, thank you. But it seems that it is not possible to debug the panel creation script `devtools.myextension,js` in this way, I could only use `console.debug(...)` to understand what specifically did go on in this script. Any other suggestion? – Kostiantyn Ivashchenko Jun 18 '22 at 20:03
  • You can open a [devtools-on-devtools](https://stackoverflow.com/q/12291138), then press F5 or Ctrl-R in that new window. – wOxxOm Jun 18 '22 at 20:29
  • @wOxxOm, unfortunately your solution doesn't work for me. When I press F5 in the devtools-on-devtools window, the window is reloaded, but I get the message `Error: timed out fetching locale at devtools://devtools/bundled/devtools-frontend/front_end/core/i18n/i18n.js:1:1622` and I do not see my files in source list anymore. – Kostiantyn Ivashchenko Jun 27 '22 at 20:57
  • @wOxxOm, otherwise, if I press F5 on the initial DevTools panel and then go to the secondary one, I get the repeating message `Error: Readers took over 1500ms. Possible deadlock? at devtools://devtools/bundled/devtools-frontend/front_end/ui/components/render_coordinator/render_coordinator.js:1:238` – Kostiantyn Ivashchenko Jun 28 '22 at 11:54

0 Answers0