Download as PDF, PPTX
![Inspect Data with the JSON pipe! component.template.html <li [title]="product"> {{ product.name }} </li>](https://image.slidesharecdn.com/angular-debug-190522094852/75/Shit-happens-debugging-an-Angular-app-14-2048.jpg)
![Inspect Data with the JSON pipe! component.template.html <li [title]="product | json"> {{ product.name }} </li>](https://image.slidesharecdn.com/angular-debug-190522094852/75/Shit-happens-debugging-an-Angular-app-15-2048.jpg)
Uploaded byLaurent Duveau
Shit happens… debugging an Angular app.
The document provides guidance on debugging Angular applications, emphasizing the importance of TypeScript for error-free coding and effective debugging tools. It discusses various debugging techniques such as using the JSON pipe, Angular language service, Augury browser extension, and debugging RxJS with the tap operator. The recap includes key takeaways for enhancing debugging efficiency in Angular development.
Shit happens… debugging an Angular app.
- 1. Shit happens… debugging an Angularapp. Laurent Duveau, May 22th 2019
- 3. Who am I? Laurent Duveau • I live in Montreal, Canada • Founder of the Angular Academy • 2-day Angular Classroom Training • 152 classes in the last 3 years! • @LaurentDuveau
- 5. “Debugging is twiceas 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
- 6.
- 7.
- 8.
- 9. Typescript… TypeScript is yourbest friend when working with Angular It is mostly typed JavaScript (fully compatible with Js ecosystem) Is used to generate your Js Easily learnable for Java or C# developers Take advantage of: static types, interfaces, generics, enums, async/await, …
- 10. Get instant feedbackinside your code editor! 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!
- 11.
- 12. “TypeScript? It’s like codingJavaScript but without the pain” - Someone on Hacker News
- 13.
- 14. Inspect Data withthe JSON pipe! component.template.html <li [title]="product"> {{ product.name }} </li>
- 15. Inspect Data withthe JSON pipe! component.template.html <li [title]="product | json"> {{ product.name }} </li>
- 16.
- 17.
- 18. Angular Language Service •Editor extension for validation and autocompletion in your html templates.
- 19.
- 20.
- 21. Debug your code! JustF12 / Sources tab in your browser Or Debugger for Chrome extension!
- 22.
- 23.
- 24. Augury Developer Tool extensionfor debugging and profiling Angular app inside Chrome or Firefox. 24 http://augury.angular.io/
- 25.
- 26.
- 27. Debug RxJS codeby chaining the tap operator to the observable flow, it allows you to run arbitrary code at any point to inspect the results, without affecting the underlying observable getProductById(id: number): Observable<Product> { return this .getProducts() .pipe( flatMap(prod => prod) first(p => p.id == id) catch(this.handleError) ) }
- 28. Debug RxJS codeby chaining the tap operator to the observable flow, it allows you to run arbitrary code at any point to inspect the results, without affecting the underlying observable getProductById(id: number): Observable<Product> { return this .getProducts() .pipe( flatMap(prod => prod) first(p => p.id == id) catch(this.handleError) ) }
- 29. Debug RxJS codeby chaining the tap operator to the observable flow, it allows you to run arbitrary code at any point to inspect the results, without affecting the underlying observable getProductById(id: number): Observable<Product> { return this .getProducts() .pipe( flatMap(prod => prod) tap(console.log) first(p => p.id == id) tap(console.log) catch(this.handleError) ) } list of products product found
- 30.
- 31.
- 32. Console > console.log() > console.error() >console.group() / console.groupCollapsed() > console.groupEnd() > console.table()
- 33.
- 34. Recap • Use TypeScript! •Json pipe • Angular Language Service • Live debug in VS Code • Augury browser extension: Router Tree and Injector Graph • Debug RxJS with tap() operator • Master the console
- 35.