debugging an angular app
TRANSCRIPT
WHO AM I ?
Laurent Duveau
I live in Montreal, Canada
Founder of the Angular Academy
2-day Angular Classroom Training
68 classes in the last 18 months
Montreal, Boston, Quebec, Toronto,Vancouver, Ottawa, Calgary, London, Copenhagen…
@LaurentDuveau
2
September!
AGENDA
3
Use TypeScript!
Tip: Json pipe
Angular Language Service
Debug your code!
Augury
Master the Console
Debug RxJS
“Debugging is twice as hard
as writing the code in the
first place. Therefore, if you
write the code as cleverly as
possible, you are, by
definition, not smart enough
to debug it.”- Brian Kernighan
TYPESCRIPT…
Is not really something brand new to learn
It is just typed JavaScript (fully compatible with Js ecosystem)
Is used to generate your Js
Easily learnable for Java or C# developers
Latest ES (classes, modules,…) + types, interfaces, generics, enums, async/await, …
ERRORS AT COMPILE-TIME!
var a = 54a.trim()
TypeError: undefinedis not a function
var a: string = 54a.trim()
Cannot convert‘number’ to ‘string’
JavaScript TypeScript
runtime… compile-time!
ANGULAR LANGUAGE SERVICE
Editor extension to get validation and autocompletion in your html templates.
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"allowJs": true
}
}
TSCONFIG.JSON
Map files for live
debugging!
AUGURY
A Google Chrome Dev Tools extension for debugging Angular applications.
Install the extension from Chrome Web Store
24
http://augury.angular.io/
CONSOLE
> console.log()
> console.error()
> console.group() / console.groupCollapsed()
> console.groupEnd()
> console.table()
DEBUG RXJS
Use the do operator!
getProductById(id: number): Observable<Product> {return this
.getProducts()
.flatMap(product => product)
.filter(p => p.id == id)
.catch(this.handleError);}
DEBUG RXJS
Use the do operator!
getProductById(id: number): Observable<Product> {return this
.getProducts()
.flatMap(product => product)
.filter(p => p.id == id)
.catch(this.handleError);}
DEBUG RXJS
Use the do operator!
getProductById(id: number): Observable<Product> {return this
.getProducts()
.do(console.log)
.flatMap(product => product)
.do(console.log)
.filter(p => p.id == id)
.catch(this.handleError);}