debugging an angular app
TRANSCRIPT
DEBUGGING AN ANGULAR APP Laurent Duveau
July 5th, 2017
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
When everything fails…
Demonstration
Use TypeScript!
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!
“TypeScript? It’s like
coding JavaScript but
without the pain”- Someone on Hacker News
Demonstration
Json pipe
USE THE JSON PIPE!
component.template.html
<li [title]="product">{{ product.name }}
</li>
USE THE JSON PIPE!
component.template.html
<li [title]="product | json">{{ product.name }}
</li>
Demonstration
Angular Language Service
ANGULAR LANGUAGE SERVICE
Editor extension to get validation and autocompletion in your html templates.
Demonstration
Debug your code!
DEBUG YOUR CODE!
Just F12 / Sources tab in your browser
Or
Debugger for Chrome extension!
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!
Demonstration
Augury
AUGURY
A Google Chrome Dev Tools extension for debugging Angular applications.
Install the extension from Chrome Web Store
24
http://augury.angular.io/
Demonstration
Master the console
CONSOLE
> console.log()
> console.error()
> console.group() / console.groupCollapsed()
> console.groupEnd()
> console.table()
Debug RxJS
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);}
Demonstration
Thank you!
Angular Classroom Training
submit your evaluation online now to win!
WIN FOR EVALUATION!!