When stuff silently fails..what's your methodology? Example


#1

Hi, I ran into an interesting problem while doing the ToDo intro tutorial that got me thinking about debugging. What is your mindset or approach when you have an issue that fails silently?

Example:

I have a template and events as specified in the TODO tutorial, and everything seems OK

 <template name="task">


<button class="delete">&times;</button>

<input type="checkbox" checked="{{checked}}" class="toggle-checked" />

<span class="text">{{text}}</span>

 </template>

 Template.task.events({
   'click .toggle-checked'() {
   console.log("Does this event fire?")
  },
  'click .delete'() {
   console.log("Does this event fire?")
 },
 });

For whatever reason (some typo perhaps), the events do not get “registered” (is this the right terminology?).

So in the Chrome console you can see that the event map is empty:

>Template.task
  B…e.Template {viewName: "Template.task",
   __helpers: HelperMap,
   __eventMaps: Array[0], 

As a newbie, this is something I’m not used to, eg. that things fail silently (my previous framework was dead simple Python Flask - No DDP magic). I would be more inclined to continue my exploration of Meteor if I knew that there is a debugging methodology to deal with these “silent” situations.

Looking forward to your thoughts and suggestions.


#2

Both testing and linting tools help to catch these errors before you even need to run your app.

It’s especially useful to have linting in your editor running as you type.

Otherwise I’ll still use a good ol’ console.log from time to time so I know exactly what’s going on.

I think ‘registered’ is a suitable term :slight_smile:


#3

Doesn’t Meteor having linting built into it’s “compiler”. So how can a third party linting tool help you beyond that? What I really want to is to be able to set breakpoints and step through the javascript code. :slight_smile:


#4

Just use the Chrome/Firefox/Safari development tools


#5

I just loaded up a new meteor project and added your code to the project.

The Template.task object exists
and the events fire.

  • Did you call the template in a parent html file? e.g. {{> task }}
  • where is your code declared? I assume you did not just put this into the HTML file:
 Template.task.events({
   'click .toggle-checked'() {
   console.log("Does this event fire?")
  },
  'click .delete'() {
   console.log("Does this event fire?")
 },
 });

PS: I am working on a fairly large project with Meteor. I have developed a pattern of going back to a simple project to verify I know how to accomplish a new thing before trying to integrate into a larger project. Works fairly well…


#6

My methodology for when things fail silently.


#7

Are you calling me a knob? :stuck_out_tongue:

Another option is to set a break point in the right spot and then just step through the .js I hope meteor was built in such a way that this is doable. If so, where to set the first breakpoint???!