Prying Open The Black Box (EmberConf 2018)

When your code doesn't work the way you expect, it could be a frustrating exercise to figure out what exactly went wrong. In this session, we will walk through the process of debugging an Ember app. Along the way, we will learn about some of the tools and techniques that could help shed light on the behavior of our code.

Upon completing this orientation, you will be well-equipped to pry open the mysterious black box the next time your app misbehaves!

Transcript

1. Godfrey chan
2. @chancancode
3. DEBUGGING
4. failures
11. ! TV Station Operator " TV Station Manager # Hawaii-EMA Staff 1 $ Hawaii-EMA Staff 2 % Hawaii-EMA Supervisor Drill FUUUUU
12. ⛔ TypeError: Cannot read property 'get' of undefined (application.js:100) at Class.model (endpoints.js:41) at Class.deserialize (vendor.js:54008) at applyHook (vendor.js:71256) at UnresolvedHandlerInfoByParam.runSharedModelHook (vendor.js:71709) at UnresolvedHandlerInfoByParam.getModel (vendor.js:71943) at tryCatcher (vendor.js:73328) at invokeCallback (vendor.js:73506) at publish (vendor.js:73492) at vendor.js:64571 at invoke (vendor.js:32075)
13. ⛔ Alert: Incoming missile detected (tv-station.js:3) at Class.model (endpoints.js:41) at Class.deserialize (vendor.js:54008) at applyHook (vendor.js:71256) at UnresolvedHandlerInfoByParam.runSharedModelHook (vendor.js:71709) at UnresolvedHandlerInfoByParam.getModel (vendor.js:71943) at tryCatcher (vendor.js:73328) at invokeCallback (vendor.js:73506) at publish (vendor.js:73492) at vendor.js:64571 at invoke (vendor.js:32075)
14. ⛔ Alert: Incoming missile detected (tv-station.js:3) at ! StationOperator.broadcastMissileAlert (tv-station.js:3) at " StationManager.didReceiveMissileAlert (tv-station.js:15) at # EMAStaff.sendMissileAlert (ema.js:23) at $ EMAStaff.notify (ema.js:27) at % EMASupervisor.runDrill (ema.js:7)
16. Look, no more error!
17. isExercise isExercise
18. p ause on exceptions isExercise isExercise
19. p ause on exceptions
20. It me
21. It me
22. It me isExercise isExercise isExercise
23. w at isExercise isExercise isExercise isExercise
24. OOPSIE isExercise isExercise isExercise isExercise
25. Nailed it isExercise isExercise
26. Y tho isExercise isExercise isExercise
27. naice OHHHH isExercise isExercise isExercise
31. ⛔ Alert: Incoming missile detected (tv-station.js:3) at ! StationOperator.broadcastMissileAlert (tv-station.js:3) at " StationManager.didReceiveMissileAlert (tv-station.js:15) at # EMAStaff.sendMissileAlert (ema.js:23) at $ EMAStaff.notify (ema.js:27) at % EMASupervisor.runDrill (ema.js:7) FUUUUU Drill
32. launch orbit re-entry FlightControl.reEntry commitDeorbitBurn roll ⛔ Emergency: loss of vehicle (mission-control.js:3) at Orbiter.onDestroy (orbiter.js:37) at Orbiter.executeRoll (orbiter.js:15) at Orbiter.commitDeorbitBurnSequence (orbiter.js:23) at FlightControl.reEntry (mission-control.js:27) at Mission.run (sts-107.html:7) planning Mission.run NO HOLE ' ' ' ' Hole on left wing
34. STEP OVER!
35. STEP OVER!
36. STEP OVER!
37. STEP OVER!
38. STEP OVER!
39. STEP OVER!
40. STEP INTO
41. STEP INTO
42. STEP INTO
43. STEP OUT!
44. STEP OUT!
45. STEP OUT!
46. Resume
55. WOW!
56. APPLICATION ROUTE P ARENT ROUTE CHILD ROUTE APP BOOT DATA LOADED MISSING RELATIONSHIPS
57. Did you know...
58. BREAKPOINTS
59. CLICK
63. CLICK
64. CLICK
65. Continuation
66. I need to go here
68. shut up!
70. Click
71. Debug functions
72. import Route from '@ember/routing/route'; export default Route.extend({ beforeModel(params) { let collectorUrl = params.queryParams.collectorUrl; if (collectorUrl) { console.log(`Using collectorUrl ${collectorUrl}...`); this.set('config.collectorWsUrl', collectorUrl); } else { console.log(`Missing collectorUrl!`); } }, // ... });
73. import Route from '@ember/routing/route'; import { debug } from '@ember/debug'; export default Route.extend({ beforeModel(params) { let collectorUrl = params.queryParams.collectorUrl; if (collectorUrl) { debug(`Using collectorUrl ${collectorUrl}...`); this.set('config.collectorWsUrl', collectorUrl); } else { debug(`Missing collectorUrl!`); } }, // ... }); Dev only
74. import Route from '@ember/routing/route'; import { assert, debug } from '@ember/debug'; export default Route.extend({ beforeModel(params) { let collectorUrl = params.queryParams.collectorUrl; assert(`Missing collectorUrl!`, collectorUrl); debug(`Using collectorUrl ${collectorUrl}...`); this.set('config.collectorWsUrl', collectorUrl); }, // ... }); Dev only
75. Templates & UI
76. <li>{{#link-to "settings.app" model.app}}People &amp; Settings{{/link- {{#if model.app.oss}} <li class="oss-link"><a href={{ossUrl}} target="_blank">Public Link< {{/if}} </ul> </div> {{/unless}} {{debugger}} {{#if model.error}} {{partial "endpoints/error"}} {{else}} {{#if model.app.isLocked}} {{partial "endpoints/locked"}} {{else}} {{app-overview-graph model=model.app timestamp=model.frozenTimestamp dur <div class="endpoints-list"> {{#unless model.isFullyLoaded}} <div class="loading"> {{loading-spinner}} </div>
77. Click It me
79. Click It me
82. DEBUGGING
83. Thank you