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

help
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.

1 Like
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.

2 Likes
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???!