Learn seven effective strategies to debug Angular 4.x applications, including RxJS debugging methods.  Checkout the full lesson code: https://angularfirebase.com/lessons/methods-for-debugging-an-angular-application/

Get the Augury plugin: https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd
2024-02-04T08:15:51.427Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
268e664c-d091-4c84-bb7e-8b0b2a1d1391
12954e7c0b374b6f72846142525577f311d29114f8bfde1bb4ae1f5225a149f4
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Debugging is easily one of the most annoying and frustrating aspects of a programmer's life.
In this episode, I'm going to cover 7 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 objects 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's 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 run time.
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 type 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 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 objects.
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 we'll look at is the debugger statement from JavaScript.
A debugger statement will stop the application 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 sure which component or service is causing the bug.
The next debugging tool we'll look at is the JSON pipe.
This is something you can use to inspect data directly in the HTML.
It's 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 dot 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 0, and 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 point 0 5 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 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 dash logger.
Import it into the app module, and it's a service, so we'll add it to the provider's list in that module.
Then we can inject it into a component just like any other service and start logging messages with various priorities.
In this case, we'll do an error and a warn message.
And if we go into the console, we can see we get these 2 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 Skewed 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 log 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 Scribe.
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 upper case string afterwards.
That's it for Angular debugging.
If this video helped you please like and subscribe.
And if you wanna support the channel, consider becoming a pro member at angularfirebase.com.
You'll get a free copy of my book as well as 1 on 1 project consulting designed to help you get your app shipped into production.
Thanks for watching and I'll see you soon.

Speaker 0: Debugging is easily one of the most annoying and frustrating aspects of a programmer's life. In this episode, I'm going to cover 7 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 objects 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's 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 run time. 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 type 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 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 objects. 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 we'll look at is the debugger statement from JavaScript. A debugger statement will stop the application 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 sure which component or service is causing the bug. The next debugging tool we'll look at is the JSON pipe. This is something you can use to inspect data directly in the HTML.

It's 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 dot 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 0, and 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 point 0 5 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 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 dash logger. Import it into the app module, and it's a service, so we'll add it to the provider's list in that module. Then we can inject it into a component just like any other service and start logging messages with various priorities. In this case, we'll do an error and a warn message. And if we go into the console, we can see we get these 2 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 Skewed 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 log 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 Scribe. 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 upper case string afterwards. That's it for Angular debugging. If this video helped you please like and subscribe.

And if you wanna support the channel, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting designed to help you get your app shipped into production. Thanks for watching and I'll see you soon.
Debugging is easily one of the most annoying and frustrating aspects of a programmer's life. In this episode, I'm going to cover 7 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 objects 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's 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 run time.
animals
livestock
programming
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 type 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.
animals
wildlife
livestock
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.
data
So 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 objects. 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.
intellectual property
In my opinion, TypeScript is the single most important tool you have for debugging Angular applications. The next debugging tool we'll look at is the debugger statement from JavaScript. A debugger statement will stop the application 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 sure which component or service is causing the bug. The next debugging tool we'll look at is the JSON pipe. This is something you can use to inspect data directly in the HTML. It's 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 dot 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 0, and 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 point 0 5 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 see exactly which components are being imperatively loaded.
software
infrastructure
technology
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 dash logger. Import it into the app module, and it's a service, so we'll add it to the provider's list in that module. Then we can inject it into a component just like any other service and start logging messages with various priorities. In this case, we'll do an error and a warn message.
And if we go into the console, we can see we get these 2 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 Skewed 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 log 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 Scribe. 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 upper case string afterwards. That's it for Angular debugging. If this video helped you please like and subscribe. And if you wanna support the channel, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting designed to help you get your app shipped into production. Thanks for watching and I'll see you soon.
publishing
youtube
software
programming
books
software development
seasons
microsoft
Debugging is easily one of the most annoying and frustrating aspects of a programmer's life. In this episode, I'm going to cover 7 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 objects 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's 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 run time. 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 type 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 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 objects. 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 we'll look at is the debugger statement from JavaScript. A debugger statement will stop the application 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 sure which component or service is causing the bug. The next debugging tool we'll look at is the JSON pipe. This is something you can use to inspect data directly in the HTML. It's 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 dot 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 0, and 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 point 0 5 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 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 dash logger. Import it into the app module, and it's a service, so we'll add it to the provider's list in that module. Then we can inject it into a component just like any other service and start logging messages with various priorities. In this case, we'll do an error and a warn message. And if we go into the console, we can see we get these 2 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 Skewed 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 log 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 Scribe. 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 upper case string afterwards. That's it for Angular debugging. If this video helped you please like and subscribe. And if you wanna support the channel, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting designed to help you get your app shipped into production. Thanks for watching and I'll see you soon.
Debugging
debugging
is
is
easily
easily
one
one
of
of
the
the
most
most
annoying
annoying
and
and
frustrating
frustrating
aspects
aspects
of
of
a
a
programmer's
programmer's
life.
life
In
in
this
this
episode,
episode
I'm
i'm
going
going
to
to
cover
cover
7
7
different
different
techniques
techniques
that
that
you
you
can
can
use
use
to
to
debug
debug
Angular
angular
4
4
applications.
applications
Hopefully,
hopefully
this
this
will
will
save
save
you
you
some
some
time
time
and
and
frustration
frustration
as
as
you
you
build
build
your
your
app.
app
The
the
great
great
thing
thing
about
about
Angular
angular
is
is
that
that
it
it
uses
uses
TypeScript
typescript
by
by
default,
default
which
which
prevents
prevents
many
many
of
of
the
the
bugs
bugs
that
that
plague
plague
JavaScript
javascript
applications.
applications
It
it
does
does
this
this
by
by
allowing
allowing
you
you
to
to
write
write
JavaScript
javascript
code
code
with
with
static
static
typing
typing
as
as
opposed
opposed
to
to
dynamic
dynamic
typing.
typing
This
this
just
just
means
means
you
you
define
define
the
the
data
data
types
types
and
and
properties
properties
of
of
objects
objects
before
before
they're
they're
actually
actually
used
used
in
in
the
the
code.
code
So
so
why
why
is
is
this
this
beneficial?
beneficial
Well,
well
the
the
number
number
one
one
reason
reason
is
is
it
it
allows
allows
your
your
text
text
editor
editor
to
to
give
give
you
you
instant
instant
feedback
feedback
whenever
whenever
you're
you're
about
about
to
to
introduce
introduce
a
a
bug
bug
into
into
your
your
code.
code
Take
take
a
a
look
look
at
at
this
this
code
code
here.
here
It's
it's
more
more
or
or
less
less
just
just
plain
plain
JavaScript,
javascript
and
and
it
it
opts
opts
out
out
of
of
all
all
of
of
TypeScript's
typescript's
strong
strong
typing
typing
features.
features
An
an
animal
animal
should
should
always
always
be
be
an
an
animal
animal
object,
object
but
but
What
what
if
if
we
we
define
define
it
it
as
as
a
a
string?
string
Will
will
we
we
get
get
an
an
error?
error
In
in
this
this
case,
case
we
we
don't
don't
because
because
an
an
animal
animal
variable
variable
can
can
be
be
assigned
assigned
to
to
any
any
data
data
type.
type
So
so
if
if
we've
we've
introduced
introduced
a
a
bug
bug
in
in
this
this
code,
code
we
we
wouldn't
wouldn't
actually
actually
see
see
it
it
fail
fail
until
until
run
run
time.
time
The
the
same
same
thing
thing
goes
goes
for
for
function
function
arguments.
arguments
Say
say
this
this
function
function
should
should
always
always
have
have
a
a
number
number
and
and
a
a
string.
string
We
we
could
could
pass
pass
it
it
other
other
data
data
types,
types
but
but
it
it
still
still
won't
won't
fail
fail
until
until
it
it
reaches
reaches
runtime.
runtime
Now
now
let's
let's
see
see
how
how
we
we
can
can
use
use
TypeScript
typescript
to
to
prevent
prevent
these
these
bugs
bugs
in
in
the
the
first
first
place.
place
So
so
we
we
create
create
an
an
animal
animal
class
class
that
that
has
has
these
these
properties,
properties
strong
strong
type
type
as
as
a
a
number
number
and
and
a
a
string.
string
Then
then
when
when
we
we
declare
declare
the
the
animal
animal
variable,
variable
We
we
can
can
set
set
it
it
to
to
this
this
animal
animal
data
data
type,
type
ensuring
ensuring
that
that
it's
it's
always
always
a
a
JavaScript
javascript
object
object
with
with
these
these
exact
exact
properties.
properties
When
when
we
we
define
define
the
the
function,
function
we
we
can
can
set
set
data
data
types
types
on
on
the
the
arguments
arguments
to
to
ensure
ensure
that
that
we
we
can't
can't
accidentally
accidentally
pass
pass
the
the
wrong
wrong
data
data
type
type
to
to
it.
it
And
and
we
we
can
can
also
also
force
force
this
this
function
function
to
to
always
always
return
return
an
an
instance
instance
of
of
the
the
animal
animal
class
class
so
so
we
we
can't
can't
accidentally
accidentally
return
return
the
the
wrong
wrong
value
value
from
from
a
a
function.
function
So
so
now
now
let's
let's
try
try
to
to
use
use
this
this
code
code
and
and
see
see
the
the
difference
difference
in
in
the
the
feedback
feedback
we
we
get
get
from
from
the
the
text
text
editor.
editor
If
if
we
we
call
call
the
the
function
function
with
with
the
the
correct
correct
data
data
types,
types
everything
everything
is
is
all
all
good.
good
There's
there's
no
no
error.
error
But
but
if
if
we
we
try
try
to
to
turn
turn
the
the
number
number
into
into
a
a
string,
string
we'll
we'll
get
get
instant
instant
feedback
feedback
that
that
this
this
is
is
the
the
wrong
wrong
data
data
type.
type
So
so
So
so
instead
instead
of
of
waiting
waiting
for
for
this
this
code
code
to
to
fail
fail
at
at
runtime,
runtime
we
we
know
know
we've
we've
introduced
introduced
a
a
bug
bug
and
and
know
know
exactly
exactly
how
how
to
to
fix
fix
it
it
here.
here
Another
another
cool
cool
thing
thing
is
is
we'll
we'll
get
get
feedback
feedback
about
about
the
the
properties
properties
that
that
exist
exist
on
on
an
an
objects.
objects
So
so
if
if
we
we
try
try
to
to
call
call
a
a
certain
certain
function
function
or
or
property,
property
we
we
know
know
exactly
exactly
what's
what's
there
there
based
based
on
on
the
the
feedback
feedback
we
we
get
get
from
from
TypeScript.
typescript
If
if
we
we
try
try
to
to
call
call
a
a
property
property
that
that
doesn't
doesn't
exist,
exist
we'll
we'll
get
get
an
an
error
error
from
from
TypeScript
typescript
and
and
our
our
code
code
won't
won't
compile.
compile
In
in
my
my
opinion,
opinion
TypeScript
typescript
is
is
the
the
single
single
most
most
important
important
tool
tool
you
you
have
have
for
for
debugging
debugging
Angular
angular
applications.
applications
The
the
next
next
debugging
debugging
tool
tool
we'll
we'll
look
look
at
at
is
is
the
the
debugger
debugger
statement
statement
from
from
JavaScript.
javascript
A
a
debugger
debugger
statement
statement
will
will
stop
stop
the
the
application
application
of
of
JavaScript,
javascript
which
which
essentially
essentially
allows
allows
you
you
to
to
pause
pause
your
your
application
application
at
at
any
any
point
point
to
to
inspect
inspect
it.
it
In
in
this
this
example,
example
we
we
have
have
a
a
component,
component
and
and
we're
we're
going
going
to
to
add
add
a
a
debugger
debugger
to
to
the
the
constructor
constructor
and
and
also
also
inside
inside
of
of
an
an
RxJS
rxjs
subscription.
subscription
Now
now
let's
let's
go
go
to
to
the
the
app
app
and
and
see
see
what
what
happens.
happens
When
when
it
it
hits
hits
that
that
constructor,
constructor
it
it
pauses
pauses
the
the
app
app
right
right
here
here
and
and
brings
brings
up
up
the
the
file
file
that
that
we're
we're
trying
trying
to
to
debug.
debug
Then
then
we
we
can
can
hit
hit
the
the
play
play
button,
button
and
and
it'll
it'll
once
once
again
again
pause
pause
the
the
application
application
when
when
it
it
hits
hits
that
that
subscription.
subscription
This
this
can
can
be
be
very
very
useful
useful
when
when
you're
you're
not
not
sure
sure
which
which
component
component
or
or
service
service
is
is
causing
causing
the
the
bug.
bug
The
the
next
next
debugging
debugging
tool
tool
we'll
we'll
look
look
at
at
is
is
the
the
JSON
json
pipe.
pipe
This
this
is
is
something
something
you
you
can
can
use
use
to
to
inspect
inspect
data
data
directly
directly
in
in
the
the
HTML.
html
It's
it's
It's
it's
especially
especially
useful
useful
when
when
you're
you're
not
not
sure
sure
exactly
exactly
what
what
an
an
object
object
looks
looks
like
like
after
after
retrieving
retrieving
it
it
from
from
a
a
database
database
or
or
a
a
third
third
party
party
API.
api
If
if
we
we
go
go
into
into
the
the
app,
app
we
we
can
can
see
see
that
that
we're
we're
now
now
seeing
seeing
all
all
the
the
properties
properties
in
in
this
this
item
item
listed
listed
in
in
JSON
json
format.
format
Now
now
let's
let's
look
look
at
at
some
some
of
of
Angular's
angular's
built
built
in
in
debugging
debugging
tools.
tools
To
to
enable
enable
them,
them
we'll
we'll
need
need
to
to
make
make
some
some
adjustments
adjustments
to
to
the
the
main
main
dot
dot
ts
ts
file.
file
After
after
we
we
bootstrap
bootstrap
the
the
app,
app
we'll
we'll
have
have
to
to
enable
enable
debug
debug
tools
tools
on
on
the
the
app
app
component
component
itself.
itself
Check
check
out
out
the
the
link
link
in
in
the
the
description
description
to
to
just
just
copy
copy
and
and
paste
paste
this
this
code.
code
The
the
first
first
thing
thing
we'll
we'll
do
do
is
is
use
use
ng
ng
probe,
probe
which
which
allows
allows
us
us
to
to
extract
extract
information
information
from
from
a
a
component
component
in
in
the
the
DOM.
dom
So
so
we
we
do
do
that
that
by
by
clicking
clicking
on
on
the
the
component
component
itself
itself
first
first
in
in
the
the
HTML.
html
Then
then
we
we
can
can
use
use
ng.probe
ng.probe
dollar
dollar
sign
sign
0,
0
and
and
And
and
that'll
that'll
give
give
us
us
this
this
debug
debug
element
element
back,
back
which
which
has
has
a
a
bunch
bunch
of
of
information
information
about
about
the
the
component
component
itself.
itself
The
the
other
other
cool
cool
thing
thing
we
we
can
can
do
do
is
is
run
run
a
a
change
change
detection
detection
profile,
profile
which
which
should
should
happen
happen
very
very
fast.
fast
In
in
this
this
case,
case
it
it
only
only
takes
takes
point
point
0
0
5
5
milliseconds
milliseconds
per
per
change
change
detection
detection
cycle.
cycle
Now
now
let's
let's
take
take
a
a
look
look
at
at
the
the
Augury
augury
plugin
plugin
for
for
Chrome.
chrome
If
if
you
you
don't
don't
already
already
have
have
this
this
installed,
installed
go
go
to
to
the
the
Chrome
chrome
Web
web
Store
store
and
and
get
get
it
it
installed
installed
today.
today
It's
it's
free
free
and
and
very
very
powerful.
powerful
It
it
gives
gives
you
you
a
a
visual
visual
picture
picture
of
of
the
the
app's
app's
components
components
and
and
services,
services
So
so
you
you
can
can
easily
easily
debug
debug
things
things
like
like
sharing
sharing
data
data
between
between
child
child
and
and
parent
parent
components
components
as
as
well
well
as
as
dependency
dependency
injection
injection
with
with
services.
services
It
it
also
also
gives
gives
you
you
a
a
visual
visual
breakdown
breakdown
of
of
your
your
router
router
so
so
you
you
can
can
see
see
exactly
exactly
which
which
components
components
are
are
being
being
imperatively
imperatively
loaded.
loaded
And
and
lastly,
lastly
it
it
gives
gives
you
you
a
a
breakdown
breakdown
of
of
your
your
NG
ng
modules.
modules
This
this
is
is
a
a
lot
lot
more
more
efficient
efficient
than
than
looking
looking
up
up
each
each
file
file
individually.
individually
Another
another
strategy
strategy
for
for
debugging
debugging
is
is
to
to
create
create
your
your
own
own
custom
custom
logger.
logger
This
this
allows
allows
you
you
to
to
prioritize
prioritize
and
and
customize
customize
the
the
errors
errors
that
that
you
you
see
see
in
in
your
your
app.
app
Install
install
it
it
by
by
running
running
npm
npm
install
install
angular
angular
2
2
dash
dash
logger.
logger
Import
import
it
it
into
into
the
the
app
app
module,
module
and
and
it's
it's
a
a
service,
service
so
so
we'll
we'll
add
add
it
it
to
to
the
the
provider's
provider's
list
list
in
in
that
that
module.
module
Then
then
we
we
can
can
inject
inject
it
it
into
into
a
a
component
component
just
just
like
like
any
any
other
other
service
service
and
and
start
start
logging
logging
messages
messages
with
with
various
various
priorities.
priorities
In
in
this
this
case,
case
we'll
we'll
do
do
an
an
error
error
and
and
a
a
warn
warn
message.
message
And
and
if
if
we
we
go
go
into
into
the
the
console,
console
we
we
can
can
see
see
we
we
get
get
these
these
2
2
different
different
messages
messages
with
with
different
different
priorities.
priorities
And
and
last
last
but
but
not
not
least,
least
let's
let's
talk
talk
about
about
debugging
debugging
RxJS
rxjs
Observables.
observables
Rx
rx
has
has
a
a
do
do
operator
operator
that
that
allows
allows
you
you
to
to
Skewed
skewed
code
code
within
within
the
the
observable
observable
chain
chain
without
without
creating
creating
any
any
side
side
effects
effects
or
or
impacting
impacting
the
the
underlying
underlying
observable.
observable
In
in
this
this
example,
example
we're
we're
retrieving
retrieving
an
an
object
object
observable
observable
from
from
Firebase.
firebase
And
and
then
then
first,
first
we're
we're
going
going
to
to
just
just
console
console
log
log
it,
it
then
then
we're
we're
going
going
to
to
map
map
it
it
down
down
to
to
a
a
string,
string
and
and
then
then
we'll
we'll
console
console
log
log
it
it
once
once
again
again
using
using
the
the
do
do
operator.
operator
So
so
the
the
Do
do
operator
operator
basically
basically
allows
allows
you
you
to
to
throw
throw
in
in
any
any
kind
kind
of
of
debugging
debugging
code
code
you
you
want
want
within
within
your
your
Observable
observable
as
as
you're
you're
mapping
mapping
or
or
filtering
filtering
it.
it
When
when
we
we
Scribe.
scribe
It
it
will
will
trigger
trigger
the
the
code
code
inside
inside
these
these
do
do
operators.
operators
In
in
the
the
app,
app
we
we
can
can
see
see
we
we
first
first
get
get
a
a
console
console
logged
logged
object
object
and
and
then
then
we
we
get
get
that
that
mapped
mapped
down
down
to
to
an
an
upper
upper
case
case
string
string
afterwards.
afterwards
That's
that's
it
it
for
for
Angular
angular
debugging.
debugging
If
if
this
this
video
video
helped
helped
you
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
support
support
the
the
channel,
channel
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
a
a
free
free
copy
copy
of
of
my
my
book
book
as
as
well
well
as
as
1
1
on
on
1
1
project
project
consulting
consulting
designed
designed
to
to
help
help
you
you
get
get
your
your
app
app
shipped
shipped
into
into
production.
production
Thanks
thanks
for
for
watching
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
In this video, the speaker discusses seven different techniques for debugging Angular applications. These include using TypeScript to prevent bugs in code, fixing properties and functions, using the search function to find properties in objects, and using the performer plugin to discover code in the app. The speaker also provides a link to a free book and a website for support.
Top 7 Ways to Debug Angular 4 Apps
Debugging is easily one of the most annoying and frustrating aspects of a programmer's life. In this episode, I'm going to cover 7 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 objects 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's 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 run time. 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 type 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 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 objects. 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 we'll look at is the debugger statement from JavaScript. A debugger statement will stop the application 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 sure which component or service is causing the bug. The next debugging tool we'll look at is the JSON pipe. This is something you can use to inspect data directly in the HTML. It's 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 dot 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 0, and 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 point 0 5 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 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 dash logger. Import it into the app module, and it's a service, so we'll add it to the provider's list in that module. Then we can inject it into a component just like any other service and start logging messages with various priorities. In this case, we'll do an error and a warn message. And if we go into the console, we can see we get these 2 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 Skewed 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 log 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 Scribe. 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 upper case string afterwards. That's it for Angular debugging. If this video helped you please like and subscribe. And if you wanna support the channel, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting designed to help you get your app shipped into production. Thanks for watching and I'll see you soon.
In this video, the speaker discusses seven different techniques for debugging Angular applications. These include using TypeScript to prevent bugs in code, fixing properties and functions, using the search function to find properties in objects, and using the performer plugin to discover code in the app. The speaker also provides a link to a free book and a website for support.