Debug console suddenly clears, and/or console.log not working

I’m writing a WebExtension with no user interface. In its manifest, background.page references a stub .html file which simply has a tag referencing a .js file. That .js file now contains only this test code:

console.log("Hello A") ;

function printHello() {
	console.log("Hello C");
}
document.addEventListener(
	'DOMContentLoaded', function () {
		console.log("Hello B") ;
		let milliseconds = 5;
		setTimeout(printHello, milliseconds);
  }
) ;

Steps to Reproduce:

• Load this into a Firefox Nightly (2017-01-10) using Load Temporary Add-On.
• Click the Debug button.
• Click “OK” to the Incoming Connection security dialog.

Result: Developer Tools window opens, and in the Console tab, Hello A, Hello B, Hello C are printed, as expected.

• Click the Reload button.

Expected Result: Console should clear and the three Hellos A-C should reappear.
Actual Result: Console clears but only Hello C reappears.

If I change the milliseconds delay to 4, Hello C only appears about 80% of the time that I Reload. If I change it to 3, about 20%, and if less than 3, Hello C never appears. In other words, it needs at least 5 milliseconds of delay for even Hello C to work reliably. Otherwise, I get nothing at all in the console.

From watching this in my actual extension, which has more going on, at times I’ve seen the Hello A and Hello B appear momentarily after I click Reload. Also, I see the same behavior with browser.bookmarks.create() instead of setTimeout().

I think the problem is that all three Hellos are printing on each reload, but for some reason the console is cleared a few milliseconds after any function with a callback executes.

One more thing. If I instead load this extension into the current production release, Firefox 51.0.1, nothing ever prints to the console, even if I set milliseconds to 5000.

What is going on here, and how can I stop the clearing, or otherwise make all of my console.log() statements work?

With such a simple HTML file, the inline “Hello A” and the “Hello B” at DOMContentLoaded will be logged very early, and the debugger is running asynchronously in a different process.
You are probably right that the console is simply cleared to late.

Have you tried do enable persistent logs in the devtools settings?

One more thing. If I instead load this extension into the current production release, Firefox 51.0.1, nothing ever prints to the console, even if I set milliseconds to 5000.

Yes, the add-on debugger in Firefox still is frustratingly unreliable. There is a score of cases where the extension is actually doing what it’s supposed to do, but the debugger happens to ignore breakpoints, files or is attached to the wrong browser instance.
As much as I like Firefox, I always get my stuff working in chrome first and afterwards iron the last knits for Firefox. The only Problem I have experienced with the chrome debugger so far is that it sometimes crashes the processes on some breakpoints.

Thank you, NilkasG. Apparently, you have nailed the problems.

In that Developer Tools window, if I click the gear icon in toolbar, I get a tab of Toolbox Options, and in there under Common Preferences is a checkbox labelled Enable persistent logs, and if I switch that on, then all of my console.log() statements print as expected.

Of course, then my console now no longer automatically clears upon reloading my extension. So I may use the other workaround instead – putting a setTimeout() in document.addEventListener() to do the actual work in a callback after a few milliseconds.

It seems like the fact that a simple console.log("Hello World!") does not work in Firefox would cause a lot of head-scratching by newbies. Oh well, in case I’m not the only one, maybe some will find this answer :slight_smile:

1 Like

I decided to go with Enable persistent logs because this is apparently required for errors which occur during loading, such as a syntax errors, to be printed to the console.

Oh, the wonders of asynchronous operations!