console.Log() shows nothing?

mortenbirkelund

@strawberry-3.141 said in console.Log() shows nothing?:

console.log(“Debug Message”);

Thanks for your reply. The “Log” in the title was a mistake.
the console.log(); doesnth work either.



Module.register("MMM-Slider",{

	// Default module config.
	defaults: {
		//text: "Hello World!"

	},

	// Override dom generator.
	getDom: function() {
		console.log("Test");
		var wrapper = document.createElement("div");
		
		wrapper.appendChild(createButton());
		return wrapper;
	},
	
	start: function() {
		console.log("Debug Message");

	},
	
	createButton: function() {
		//Create the button
		var button = document.createElement("button");
		button.innerHTML ="Click me";

		button.addEventListener("click", function() {
  			console.log("Visiting show URL");
		});

		return button;
	}
	
});

The above code was my simple attempt to create a button. The button is created, but nothing happens when i click it, and nothing is shown when MagicMirror is started.

Starting MagicMirror: v2.1.0
Loading config ...
Loading module helpers ...
No helper found for module: alert.
No helper found for module: MMM-ProfileSwitcher.
Initializing new module helper ...
No helper found for module: clock.
No helper found for module: MMM-Slider.
Initializing new module helper ...
No helper found for module: compliments.
No helper found for module: weatherforecast.
All module helpers loaded.
Starting server op port 8080 ... 
Server started ...
Connecting socket for: updatenotification
Connecting socket for: calendar
Starting node helper for: calendar
Sockets connected & modules started ...
Launching application.
Create new calendar fetcher for url: http://springschedule.au.dk/ical/ical.asp?objectclass=student&id=xxxxxx - Interval: 300000

Shouldn’t the logs be visible in the command line?

strawberry 3.141

@mortenbirkelund the module doesnt log in the terminal only the node_helper does. The module logs into electron or your browser start the mirror wih npm start dev

izanbard

@mortenbirkelund these console.log() statements are not crated in the node application, but in the browser. Open the mirror in a main stream browser (IE or chrome or something) and hit F12 which will bring up the dev tools look in the console there for your message.

yawns

@strawberry-3.141
Just to add, because I found this irritating at first:
If your browser does not open the console in dev mode then press F12 (works in every common browser) and look at the error/warning/log output there

Ah, @izanbard was faster :-)

mortenbirkelund

@strawberry-3.141 said in console.Log() shows nothing?:

npm start dev

Thank you very much, both of you. Now I can see the logs.

izanbard

@mortenbirkelund just a note if you put a console.log() in the node_helper, then it apears on the command line output (or PM2 out.log if you are using PM2)

mortenbirkelund

Thank you once again for your help. Now that I understand where to see the logs, i can see that my button is not working. Anybody who knows why nothing happens when I click the button

Module.register("MMM-Slider",{

	// Default module config.
	defaults: {
		//text: "Hello World!"

	},

	// Override dom generator.
	getDom: function() {
		var wrapper = document.createElement("div");
		
		wrapper.appendChild(this.createButton());
		return wrapper;
	},
	
	createButton: function() {
		var button = document.createElement("span");
		button.innerHTML ="Click me";
		button.id = this.identifier + "_button";
		
		button.addEventListener("click", function () {
			console.log("The button was clicked");
		});

		return button;
	}
	
});

mortenbirkelund

@Snille I have looked at your button module for inspiration. Do you know why nothing happens when I click the button?

mortenbirkelund

Found the error. I needed to add

.region.fullscreen {
z-index: -1;
}

as css and now it is working.

Snille

Hmm… I don’t have any custom css om my develop-version of MM, but the problem is of course that you will not see the pointer when moving over to the “mirror” if you are using a mouse.
You can add a custom.css with only:

body {
  cursor: pointer;
 }

then you will see where you “are” when moving the mouse. :)
But you should not need anything else.