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!

Godfrey Chan

March 14, 2018
Tweet

More Decks by Godfrey Chan

Other Decks in Programming

Transcript

  1. Godfrey chan

    View Slide

  2. @chancancode

    View Slide

  3. DEBUGGING

    View Slide

  4. failures

    View Slide

  5. 2017

    View Slide

  6. 2017

    View Slide

  7. View Slide

  8. View Slide

  9. 2017

    View Slide

  10. View Slide

  11. ! TV Station Operator
    " TV Station Manager
    # Hawaii-EMA Staff 1
    $ Hawaii-EMA Staff 2
    % Hawaii-EMA Supervisor
    Drill
    FUUUUU

    View Slide

  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)

    View Slide

  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)

    View Slide

  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)

    View Slide

  15. View Slide

  16. Look, no
    more error!

    View Slide

  17. isExercise
    isExercise

    View Slide

  18. p
    ause on
    exceptions
    isExercise
    isExercise

    View Slide

  19. p
    ause on
    exceptions

    View Slide

  20. It me

    View Slide

  21. It me

    View Slide

  22. It me
    isExercise
    isExercise
    isExercise

    View Slide

  23. w
    at
    isExercise
    isExercise
    isExercise
    isExercise

    View Slide

  24. OOPSIE
    isExercise
    isExercise
    isExercise
    isExercise

    View Slide

  25. Nailed it
    isExercise
    isExercise

    View Slide

  26. Y tho
    isExercise
    isExercise
    isExercise

    View Slide

  27. naice
    OHHHH
    isExercise
    isExercise
    isExercise

    View Slide

  28. 2003

    View Slide

  29. View Slide

  30. View Slide

  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

    View Slide

  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

    View Slide

  33. View Slide

  34. STEP
    OVER!

    View Slide

  35. STEP
    OVER!

    View Slide

  36. STEP
    OVER!

    View Slide

  37. STEP
    OVER!

    View Slide

  38. STEP
    OVER!

    View Slide

  39. STEP
    OVER!

    View Slide

  40. STEP
    INTO

    View Slide

  41. STEP
    INTO

    View Slide

  42. STEP
    INTO

    View Slide

  43. STEP
    OUT!

    View Slide

  44. STEP
    OUT!

    View Slide

  45. STEP
    OUT!

    View Slide

  46. Resume

    View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. WOW!

    View Slide

  56. APPLICATION ROUTE P
    ARENT ROUTE CHILD ROUTE
    APP BOOT
    DATA
    LOADED
    MISSING
    RELATIONSHIPS

    View Slide

  57. Did you know...

    View Slide

  58. BREAKPOINTS

    View Slide

  59. CLICK

    View Slide

  60. View Slide

  61. View Slide

  62. View Slide

  63. CLICK

    View Slide

  64. CLICK

    View Slide

  65. Continuation

    View Slide

  66. I need to
    go here

    View Slide

  67. View Slide

  68. shut up!

    View Slide

  69. View Slide

  70. Click

    View Slide

  71. Debug functions

    View Slide

  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!`);
    }
    },
    // ...
    });

    View Slide

  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

    View Slide

  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

    View Slide

  75. Templates & UI

    View Slide

  76. {{#link-to "settings.app" model.app}}People & Settings{{/link-
    {{#if model.app.oss}}
    Public Link<
    {{/if}}


    {{/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

    {{#unless model.isFullyLoaded}}

    {{loading-spinner}}

    View Slide

  77. Click
    It me

    View Slide

  78. View Slide

  79. Click
    It me

    View Slide

  80. View Slide

  81. View Slide

  82. DEBUGGING

    View Slide

  83. Thank you

    View Slide