WebExtensions: Network log for background scripts

Add-ons Development
#1

Hi,

I am calling external API from the extension’s background script, and I can see these requests and response code in the Ctrl-Shift-J console, yet I can’t find how to check their bodies—even though I’ve enabled “Log Request and Response Bodies” in the “Net” drop-down. I clicked, and right-clicked, and double-clicked on the request—but to know avail.

Is there any way to see them from Firefox? I guess it would be nice to have a separate Network tab in the Ctrl-Shift-J tools in the same way as how you can check the background console / network / etc for Chrome extensions.

Best regards,
Anton

#2

Firefox does have a Network panel.

I noticed when debugging a background script using the Debug button in about:addons the toolbox does not have a Network panel.

Opening Tools->Web Developer->Browser Content Toolbox I get a Netowrk panel and can see requests being logged there.

I tested with
https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks

#3

Hmm, this is well-hidden, and I do not see a Network panel when opening Browser Content Toolbox. I have Console / Debugger / Scratchpad instead. The console seems to output only content script’s logging, not the background script’s (which I can see if I open the console by Ctrl-Shift-J).

I also looked at the settings in this Browser Content Toolbox (“cog” icon), and I see “Network” enabled in Default Firefox Developer Tools section, but it only affects the regular Dev Tools (F12), and has no visible effect on what I see in the Browser Content Toolbox.

What is it? Can I read up on it? If you see a network panel, then I may be missing some obscure setting or condition…

#4

What you write is what I see as well. The Browser Console will only “Log network access” when enabled, not give you a full panel with timing diagrams and such, just response codes, URLs.

See

I don’t see the following happening either:

If you click on the message, you’ll be redirected to the Network panel where the request is selected and more request and response details are shown within the side panel at the right side.
even though I have a Browser Toolbox open as well, with a Network panel.

Perhaps someone else will chime in to enlighten us.

Are you doing your XHR from the background script? Does it basically work?

#5

Adrian, yes, I do see the basic response codes to XHR too, but I wanted to see more information for debugging—like we can see in the content script’s Network panel (request/response headers, details, payloads etc).

XHR does work from background scripts (sidestepping CSP, which is nice, and I hope it will continue to work that way), it is just harder to develop when I can’t see details.

Best regards,
Anton