1
00:00:00,180 --> 00:00:05,160
In this lecture, we're going to take a break from pipes to learn about the angular dev tools.

2
00:00:05,460 --> 00:00:10,290
It's an official tool from the angular team for debugging applications in the browser.

3
00:00:10,920 --> 00:00:13,680
It's a relatively new tool from the angular team.

4
00:00:14,040 --> 00:00:18,060
In the resource section of this lecture, I provide a link to this tool.

5
00:00:18,600 --> 00:00:20,640
Let's give the development tool a try.

6
00:00:20,880 --> 00:00:24,570
On this page, there should be a link for installing this extension.

7
00:00:24,930 --> 00:00:29,850
As of this recording of this video, the extension is only available for Google Chrome.

8
00:00:30,420 --> 00:00:34,610
If you're using another browser, you may need to switch on the store page.

9
00:00:34,620 --> 00:00:36,000
Install the extension.

10
00:00:38,640 --> 00:00:43,320
The extension should have created an icon at the top right corner of the browser.

11
00:00:43,620 --> 00:00:46,170
If you don't see the icon, it might be hidden.

12
00:00:46,440 --> 00:00:48,360
Click on the puzzle piece icon.

13
00:00:48,720 --> 00:00:51,990
There should be an extension called angular dev tools.

14
00:00:52,200 --> 00:00:55,020
Click on the pin icon to have it pinned.

15
00:00:55,620 --> 00:00:58,200
By default, the icon will be black.

16
00:00:58,620 --> 00:01:03,900
If we click on the icon, the extension will tell us that hasn't detected the angular app.

17
00:01:04,260 --> 00:01:06,120
Let's switch over to our app.

18
00:01:06,690 --> 00:01:11,010
Almost immediately, the icon will turn red if we click on it.

19
00:01:11,160 --> 00:01:14,720
Angular has been detected by the extension, however.

20
00:01:14,760 --> 00:01:15,870
Where are the tools?

21
00:01:16,170 --> 00:01:19,560
The developer tools must be open for viewing the new tool.

22
00:01:19,980 --> 00:01:22,710
There should be a new panel called Angular.

23
00:01:25,420 --> 00:01:30,250
On this panel, we will find a hierarchy of components for our application.

24
00:01:30,580 --> 00:01:33,640
We can select the components to view its data.

25
00:01:33,970 --> 00:01:40,510
For example, if we click on the post component, we can check out the properties inside the components.

26
00:01:40,990 --> 00:01:47,260
Not only will the tool show us the components properties, but it'll also categorize the properties.

27
00:01:47,500 --> 00:01:50,200
It makes it easier to sort through our data.

28
00:01:50,800 --> 00:01:55,510
The properties are not read only we can freely modify these properties.

29
00:01:55,780 --> 00:01:59,740
Any changes we make to the properties will be reflected in our app.

30
00:02:00,430 --> 00:02:06,820
The main reason I'm showing the angular dev tools is to show how pipes affect our properties, switch

31
00:02:06,820 --> 00:02:08,320
over to the app components.

32
00:02:08,530 --> 00:02:11,620
The value for the main property has not changed.

33
00:02:11,770 --> 00:02:17,110
It remains lowercase even though we've applied a pipe to this property in our template.

34
00:02:17,350 --> 00:02:20,320
The pipe did not change the value in the class.

35
00:02:20,920 --> 00:02:24,760
The developer tools are a great way of verifying this behavior.

36
00:02:25,030 --> 00:02:27,130
Pipes do not change their properties.

37
00:02:27,400 --> 00:02:28,240
They change.

38
00:02:28,240 --> 00:02:35,260
The output in the template will be using the dev tools from time to time to help us debug our application

39
00:02:35,530 --> 00:02:36,700
in the next lecture.

40
00:02:36,730 --> 00:02:38,590
We'll jump back into pipes.