-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathbavWOHZM6zE.en.vtt
170 lines (124 loc) · 3.13 KB
/
bavWOHZM6zE.en.vtt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
WEBVTT
Kind: subtitles
Language: en
00:00:00.000 --> 00:00:01.570
MINKO GECHEV: Hello, everyone.
00:00:01.570 --> 00:00:02.820
My name is Minko Gechev.
00:00:02.820 --> 00:00:05.440
I'm working on
Angular at Google.
00:00:05.440 --> 00:00:07.800
Today, in this video,
I'll want to show you
00:00:07.800 --> 00:00:10.170
how you can use Angular
DevTools to preview
00:00:10.170 --> 00:00:11.850
the structure of
your application
00:00:11.850 --> 00:00:15.180
and profile its performance.
00:00:15.180 --> 00:00:17.760
Angular DevTools is a
Chrome DevTools extension
00:00:17.760 --> 00:00:21.060
that you can download
from the Chrome Web Store.
00:00:21.060 --> 00:00:24.090
You can find a link in
the description below.
00:00:24.090 --> 00:00:26.220
When you install
Angular DevTools,
00:00:26.220 --> 00:00:29.250
you can go to
Extensions and pin it.
00:00:29.250 --> 00:00:31.950
The next step is to open
an application running
00:00:31.950 --> 00:00:33.840
in development mode.
00:00:33.840 --> 00:00:37.890
See how the color of the icon
changed to red, indicating
00:00:37.890 --> 00:00:40.570
we can debug the application.
00:00:40.570 --> 00:00:45.120
Now let us open Chrome DevTools
and find the Angular tab.
00:00:45.120 --> 00:00:47.160
Here we can preview
the component tree
00:00:47.160 --> 00:00:48.990
of the application.
00:00:48.990 --> 00:00:51.150
Once we select the
component, we can
00:00:51.150 --> 00:00:54.600
find its metadata,
properties, inputs,
00:00:54.600 --> 00:00:56.910
and outputs in the right panel.
00:00:56.910 --> 00:01:01.140
And we can modify them
directly from the UI.
00:01:01.140 --> 00:01:03.450
Now let us navigate
to the Profiler tab
00:01:03.450 --> 00:01:06.450
and start recording
change detection events.
00:01:06.450 --> 00:01:08.250
We can preview change
detection cycles
00:01:08.250 --> 00:01:10.800
as they occur in real-time.
00:01:10.800 --> 00:01:12.960
Each bar in the
timeline corresponds
00:01:12.960 --> 00:01:16.450
to a separate change
detection cycle.
00:01:16.450 --> 00:01:19.400
We can find how much time
we spent in change detection
00:01:19.400 --> 00:01:23.290
and whether the current
cycle caused any frame drops.
00:01:23.290 --> 00:01:26.350
We can also preview the
estimated frame rate and what
00:01:26.350 --> 00:01:29.460
triggered change detection.
00:01:29.460 --> 00:01:31.620
At the bottom, we can
preview the components
00:01:31.620 --> 00:01:34.110
we spent the most time in.
00:01:34.110 --> 00:01:37.620
When we select the bar,
we can see further details
00:01:37.620 --> 00:01:40.080
for the particular component.
00:01:40.080 --> 00:01:42.930
To better understand the
application's execution,
00:01:42.930 --> 00:01:45.810
we can switch between the
default bar chart view
00:01:45.810 --> 00:01:47.850
or the two alternative views--
00:01:47.850 --> 00:01:51.450
flame graph and tree map.
00:01:51.450 --> 00:01:53.310
That is all I have
for you today.
00:01:53.310 --> 00:01:57.630
Head to angular.io/devtools
to find more advanced Angular
00:01:57.630 --> 00:01:59.500
DevTools features.
00:01:59.500 --> 00:02:02.720
Thank you very much for
watching and happy coding.