Top 7 Ways to Debug Angular 4 Apps

Key Takeaways

debugging is easily one of the most annoying and frustrating aspects of a programmer's life in this episode I'm going to cover seven different techniques that you can use to debug angular 4 applications hopefully this will save you some time and frustration as you build your app the great thing about angular is that it uses typescript by default which prevents many of the bugs that plague JavaScript applications it does this by allowing you to write JavaScript code with static typing as opposed to Dynamic typing this just means you define the data types and properties of object before they're actually used in the code so why is this beneficial well the number one reason is it allows your text editor to give you instant feedback whenever you're about to introduce a bug into your code take a look at this code here it's more or less just plain JavaScript and it opts out of all of typescript strong typing features an animal should always be an animal object but what if we Define it as a string will we get an error in this case we don't because an animal variable can be assigned to any data type so if we've introduced a bug in this code we wouldn't actually see it fail until runtime the same thing goes for function arguments say this function should always have a number and a string we could pass it other data types but it still won't fail until it reaches runtime now let's see how we can use typescript to prevent these bugs in the first place so we create an animal class that has these properties strong typed as a number and a string then when we declare the animal variable we can set it to this animal data type ensuring that it's always a JavaScript object with these exact properties when we Define the function we can set data types on the arguments to ensure that we can't accidentally pass the wrong data type to it and we can also Force this function to always return an instance of the animal class so we can't accidentally return the wrong value from a function so now let's try to use this code and see the difference in the feedback we get from the text editor if we call the function with the correct data types everything is all good there's no error but if we try to turn the number into a string we'll get instant feedback that this is the wrong data type so instead of waiting for this code to fail at runtime we know we've introduced a bug and know exactly how to fix it here another cool thing is we'll get feedback about the properties that exist on an object so if we try to call a certain function or property we know exactly what's there based on the feedback we get from typescript if we try to call a property that doesn't exist we'll get an error from typescript and our code won't compile in my opinion typescript is the single most important tool you have for debugging angular applications the next debugging tool look at is the debug statement from JavaScript a debugger statement will stop the execution of JavaScript which essentially allows you to pause your application at any point to inspect it in this example we have a component and we're going to add a debugger to the Constructor and also inside of an rxjs subscription now let's go to the app and see what happens when it hits that Constructor it pauses the app right here and brings up the file that we're trying to debug then we can hit the play button and it'll once again pause the application when it hits that subscription this can be very useful when you're not not sure exactly which component or service is causing the bug the next debugging tool we look at is the Json pipe this is something you can use to inspect data directly in the HTML it's especially useful when you're not sure exactly what an object looks like after retrieving it from a database or a third party API if we go into the app we can see that we're now seeing all the properties in this item listed in Json format now let's look at some of angular's built-in debugging tools to enable them we'll need to make some adjustments to the main.ts file after we bootstrap the app we'll have to enable debug tools on the app component itself check out the link in the description to just copy and paste this code the first thing we'll do is use NG probe which allows us to extract information from a component in the Dom so we do that by clicking on the component itself first in the HTML then we can use ng. probe dollar sign Z and that'll give us this debug element back which has a bunch of information about the component itself the other cool thing we can do is run a change detection profile which should happen very fast in this case it only takes 05 milliseconds per change detection cycle now let's take a look at the augury plugin for Chrome if you don't already have this installed go to the Chrome web store and get it installed today it's free and very powerful it gives you a visual picture of the app's components and services so you can easily debug things like sharing data between child and parent components as well as dependency injection with Services it also gives you a visual breakdown of your router so you can can see exactly which components are being imperatively loaded and lastly it gives you a breakdown of your NG modules this is a lot more efficient than looking up each file individually another strategy for debugging is to create your own custom logger this allows you to prioritize and customize the errors that you see in your app install it by running npm install angular 2- logger import it into the app module and it's a service so we'll add it to the providers list in that module then we can inject it into a component just like other service and start logging messages with various priorities in this case we'll do an error and a warn message then if we go into the console we can see we get these two different messages with different priorities and last but not least let's talk about debugging rxjs observables RX has a do operator that allows you to execute code within the observable chain without creating any side effects or impacting the underlying observable in this example we're retrieving an object observable from Firebase and then first we're going to just console L it then we're going to map it down to a string and then we'll console log it once again using the do operator so the do operator basically allows you to throw in any kind of debugging code you want within your observable as you're mapping or filtering it when we subscribe it will trigger the code inside these do operators in the app we can see we first get a console logged object and then we get that mapped down to an uppercase string afterwards that's it for angular debugging if this video helped you please like And subscribe and if you want to support the channel consider becoming a pro member at angular firebase.com you'll get a free copy of my book as well as one-on-one project Consulting designed to help you get your app shipped into production thanks for watching and I'll see you soon [Music]