What must I do to get the debugger working?

Add-ons Development
#1

When I try and run the debugger on a sample extension (beastify), it doesn’t work.

It says “page has no sources”. None of the tabs provide any information about the extension. What must I do to get it to work?

I followed instructions given in the Extensions Workshop.

#2

Which console did you opened?
There is:

  • browser console Ctrl + Shift + J, not very useful for development, but some content script errors are logged only here (it’s a bug)
  • web-console Ctrl + Shift + K, useful for debugging addon page or content scrip injected into current page
  • background console (I guess?? :smiley:), it’s opened from about:debugging page when you click the “Inspect” button. This one is very useful as it prints all messages from all parts of your extension (except content scripts I think). It also allows you to change what context it is debugging (like pop-up), but it doesn’t always work well, so use to debug background scripts only. When you need to debug popup, it’s often easier to open it in a normal tab instead

In general debugging in Firefox is not perfect and sometimes you just need to restart your Firefox to make things work again.

#3

Thanks for the pointers again, Juraj.

I used the debugger accessed via about:debugging > this Firefox > [extension] > inspect

The extension, which is known to work, is shown in about:debugging to be loaded. But the debugger says ‘no sources found’, and appears not to be able to see the extension.

My aim is to get the debugger working, for the sake of extensions development.

It seems that simply using Firefox Developer edition is necessary?

#4

Debugging should work the same every version. But sometimes it’s just buggy. Did you tried to restart Firefox? That often helps.
And maybe use “web-ext run” to run the extension - it opens new Firefox window with empty profile so things usually works there as expected :slight_smile:.

#5

Yes, I was running the debugger in a separate profile, though I have not used web-ext. It is necessary to use web-ext for the debugger to work with extensions?

#6

No, but it makes thing easier. It has many features - by default it will auto-reload your extension when the source code changes.
But it can do much more and it’s really easy to use. Just open console in your source code directory and run web-ext run and that’s it. Really highly recommended :slight_smile:.

So did you managed to see the source files in the debug window? If not, could you post a screenshot of your debug window?

#7

But the debugger says ‘no sources found’, and appears not to be able to see the extension.

The Beastify extension doesn’t have a background page.
That’s why the Sources window is initially empty.

However, Beastify has a popup and a content script.

If you open the popup, Beastify will appear in the Sources window.

Information on debugging popups and content scripts:


2 Likes