Debugging Angular Ivy Applications

v8.2.13

v9.0.0 RC.1

What about v9?

  • On by default
  • Existing Apps can be upgraded

V9 has Ivy

# update the CLI tool
ng update @angular/cli

# update the core
ng update @angular/core

# start your app
ng serve

Updating Angular...

  • Chrome console
  • window.ng
  • ngDevMode

Debugging
...

What we will discuss?

debugger / breakpoints

$0

debug()

option + cmd + f

monitor / monitorEvents

// in AngularJS?
// remember this?
window.angular...


angular.element();

angular.element().scope();

angular.element().injector();

angular.element()
  .scope().$apply();

// Angular Ivy
// brings it back via
window.ng...

  • Helper tools for debugging
  • Not available in Prod Mode
  • Plugins can add their own
  • Version 9.0.0+

window.ng

  • Larger Bundle?
  • Slower framework? 
  • What about if the user doesn't want it?

Isn't this extra code???


if (ngDevMode) {
  // Angular adds extra
  // code into the framework
  // so that additional
  // tooling and info can
  // have more info about
  // data-structures...
}
// .debug is appended

someObject.debug

someArray.debug

someDataStructure.debug
  • ngDevMode is stripped in prod mode
  • window.ng is not available
  • Code is compressed

Prod mode clears it

const enum UserIndex {
  FirstNamePosition = 0,
  LastNamePosition = 1,
  AgePosition = 2
}

interface User extends Array<number|string> {
  [UserIndex.FirstNamePosition]: string;
  [UserIndex.LastNamePosition]: string;
  [UserIndex.AgePosition]: number;
}

function getFullName(user: User) {
  return user[UserIndex.FirstNamePosition] +
    user[UserIndex.LastNamePosition];
}

function isOlderThan(user: User, age: number) {
  return user[UserIndex.AgePosition] > age;
}
function g(u) {
  return u[0] + u[1]
}

function i(u, n) {
  return u[2] > n
}

Usecases

  • Extra debugging tools
  • Low-level APIs for chrome extensions
  • Rebuild a test environment
  • Save debugging state
  • And More...

Let's build our own debug tool

Takeaways

  • Add debug tooling to your apps
  • Make scripts to resume state
  • Or make interactive console-level materials

Oh No!!

It's Over!

Debugging Angular Ivy Applications

By Matias Niemelä

Debugging Angular Ivy Applications

  • 340