Debugging Ember.js

Ember.js introduces many powerful new concepts, such as bindings, computed properties, and auto-updating templates. Developers love the expressiveness, but if the magic stops working, new users may not know where to begin debugging. In this talk, learn some strategies from a grizzled veteran about how to best troubleshoot your app when it stops working how you'd expect.

Transcript

1. Tips & tricks for bug assassination DEBUGGING EMBER.
3. ▪ Debugging JavaScript ▪ Debugging Ember ▪ Help Us Help You DEBUGGING EMBER.
4. ▪ Web Inspector ▪ JSHint ▪ Demo Tips & tricks for debugging JavaScript on the web. DEBUGGING JAVASCRIPT.
6. THE MOST IMPORTANT TOOL IN YOUR TOOLBOX.
7. ▪ Console ▪ File navigation ▪ Breakpoints ▪ Execution control TOOLS.
8. Console Navigation Breakpoints Execution Control
9. console.log("hello, world!"); CONSOLE.
10. CONSOLE. Console Output
11. ▪ Break on Exception ▪ Breakpoints ▪ debugger; PAUSING EXECUTION.
12. BREAK ON EXCEPTION. Don’t Break (grey)
13. BREAK ON EXCEPTION. Break on Exception (blue)
14. BREAK ON EXCEPTION. Break on Uncaught Exception (purple)
15. BREAKPOINTS. Breakpoint (click to set) All Breakpoints
16. // Why is this kicking // puppies?! if (shouldntBePossible) { this.kickPuppies(); } DEBUGGER STATEMENT. debugger;
17. PAUSED EXECUTION.
18. CALL STACK.
19. STEP INTO STEP OVER STEP OUT
20. EXAM APP STATE.
21. JSHINT.
22. DEMO
23. ▪ Namespaces ▪ Don’t fear the stack trace ▪ Understanding common errors ▪ Logging ▪ Advanced debug-foo Tips & tricks speci c to Ember.js apps. DEBUGGING EMBER.JS
24. >> Core = Ember.Namespace.create(); >> Core.Person = Ember.Person.extend(); >> Core.Person.toString(); => Core.Person >> Core.Person.create().toString(); => <Core.Person:ember157> NAMESPACES.
25. UNDERSTAND STACK TRACES.
27. IDENTIFY FRAMEWORK CODE AND APP CODE.
28. THE ERROR IS OFTEN IN YOUR APP CODE— IF YOU GO UP FAR ENOUGH.
29. LOGGING.
30. Ember.LOG_BINDINGS = true; LOG BINDINGS SYNC.
31. stateManager.LOG_STATE_TRANSITIONS = true; LOG STATE MANAGERS
32. person = Ember.Object.create({ name: "Tom" }); OVERRIDE PROPERTIES.
33. person = Ember.Object.create({ name: function() { // Break whenever name is // get or set. debugger; }.property() }); OVERRIDE PROPERTIES.
34. Ember.View.reopen({ $: function() { debugger; return this._super.apply(this, arguments); } }); MONKEYPATCH CLASSES.
35. WINDOW.BILLY
37. THEY TOLD ME I COULD BE ANYTHING
38. Ember.View.reopen({ $: function() { if (window.billy) { debugger; } return this._super.apply(this, arguments); } }); WINDOW.BILLY
39. ACCESSING VIEWS.
40. ACCESSING VIEWS.
41. DEBUGGING HANDLEBARS.
42. {{DEBUGGER}}
43. {{LOG FOO}}
44. DEMO
45. ▪ Creating reduced test cases with jsFiddle ▪ Running and writing unit tests ▪ Better asserts Making Ember.js easier for you and others. HELP US HELP YOU
46. DEMO
47. QUESTIONS? @TOMDALE EMBERJS.COM