Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Prying Open The Black Box (EmberConf 2018)

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!

22bb3e56828870ee9a0dd93aeadbe04a?s=128

Godfrey Chan

March 14, 2018
Tweet

Transcript

  1. Godfrey chan

  2. @chancancode

  3. DEBUGGING

  4. failures

  5. 2017

  6. 2017

  7. None
  8. None
  9. 2017

  10. None
  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)
  15. None
  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

  28. 2003

  29. None
  30. None
  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
  33. None
  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

  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. WOW!

  56. APPLICATION ROUTE P ARENT ROUTE CHILD ROUTE APP BOOT DATA

    LOADED MISSING RELATIONSHIPS
  57. Did you know...

  58. BREAKPOINTS

  59. CLICK

  60. None
  61. None
  62. None
  63. CLICK

  64. CLICK

  65. Continuation

  66. I need to go here

  67. None
  68. shut up!

  69. None
  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

  78. None
  79. Click It me

  80. None
  81. None
  82. DEBUGGING

  83. Thank you