Debugging an Angular App
2 likes492 views
The document is a presentation by Laurent Duveau on debugging Angular applications, highlighting the use of TypeScript, Angular Language Service, and debugging tools like Augury and browser developer tools. It emphasizes the importance of writing less complex code to ease debugging and provides practical demonstrations and tips for effective debugging in Angular. The session also covers the use of JSON pipe and RxJS debugging techniques with code examples.
![USE THE JSON PIPE!
component.template.html
<li [title]="product">
{{ product.name }}
</li>](https://image.slidesharecdn.com/angular-debug-170706175834/85/Debugging-an-Angular-App-13-320.jpg)
![USE THE JSON PIPE!
component.template.html
<li [title]="product | json">
{{ product.name }}
</li>](https://image.slidesharecdn.com/angular-debug-170706175834/85/Debugging-an-Angular-App-14-320.jpg)
Debugging an Angular App
- 1. DEBUGGING AN ANGULAR APP Laurent Duveau July 5th, 2017
- 2. 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!
- 3. AGENDA 3 Use TypeScript! Tip: Json pipe Angular Language Service Debug your code! Augury Master the Console Debug RxJS
- 4. “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
- 8. 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, …
- 9. ERRORS AT COMPILE-TIME! var a = 54 a.trim() TypeError: undefined is not a function var a: string = 54 a.trim() Cannot convert ‘number’ to ‘string’ JavaScript TypeScript runtime… compile-time!
- 10. “TypeScript? It’s like coding JavaScript but without the pain” - Someone on Hacker News
- 11. Demonstration
- 12. Json pipe
- 13. USE THE JSON PIPE! component.template.html <li [title]="product"> {{ product.name }} </li>
- 14. USE THE JSON PIPE! component.template.html <li [title]="product | json"> {{ product.name }} </li>
- 15. Demonstration
- 17. ANGULAR LANGUAGE SERVICE Editor extension to get validation and autocompletion in your html templates.
- 18. Demonstration
- 19. Debug your code!
- 20. DEBUG YOUR CODE! Just F12 / Sources tab in your browser Or Debugger for Chrome extension!
- 21. 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!
- 22. Demonstration
- 23. Augury
- 24. AUGURY A Google Chrome Dev Tools extension for debugging Angular applications. Install the extension from Chrome Web Store 24 http://augury.angular.io/
- 25. Demonstration
- 27. CONSOLE > console.log() > console.error() > console.group() / console.groupCollapsed() > console.groupEnd() > console.table()
- 28. Debug RxJS
- 29. 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); }
- 30. 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); }
- 31. 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); }
- 32. Demonstration
- 33. Thank you!
- 36. submit your evaluation online now to win! WIN FOR EVALUATION!!