-
Notifications
You must be signed in to change notification settings - Fork 1
/
Introducing Angular DevTools-bavWOHZM6zE.tw.vtt
112 lines (79 loc) · 2.63 KB
/
Introducing Angular DevTools-bavWOHZM6zE.tw.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
WEBVTT
Kind: subtitles
Language: zh-CN
00:00:00.000 --> 00:00:01.570
MINKO GECHEV: 大家好
00:00:01.570 --> 00:00:02.820
我的名字是 Minko Gechev
00:00:02.820 --> 00:00:05.440
我在谷歌从事 Angular 方面的工作
00:00:05.440 --> 00:00:07.410
今天,在这段视频中
00:00:07.410 --> 00:00:15.290
我想向你展示如何使用 Angular DevTools
来预览应用程序的结构并分析其性能
00:00:15.180 --> 00:00:18.648
Angular DevTools 是一个 Chrome DevTools
扩展
00:00:18.648 --> 00:00:21.136
你可以从 Chrome 网上应用店下载它
00:00:21.060 --> 00:00:24.090
你可以在下面的描述中找到一个链接
00:00:24.090 --> 00:00:26.670
当你安装 Angular DevTools 时
00:00:26.670 --> 00:00:29.250
你可以去 Extensions 并固定它
00:00:29.250 --> 00:00:33.952
下一步是打开一个以开发模式运行的应用程序
00:00:33.840 --> 00:00:37.205
注意图标颜色变成了红色
00:00:37.205 --> 00:00:40.570
表示我们可以调试应用程序
00:00:40.570 --> 00:00:45.206
现在让我们打开 Chrome DevTools 并找到 Angular
选项卡
00:00:45.120 --> 00:00:48.990
在这里我们可以预览应用程序的组件树
00:00:48.990 --> 00:00:50.395
选择组件后
00:00:50.395 --> 00:00:57.038
我们可以在右侧面板中找到它的元数据、
属性、输入和输出
00:00:56.910 --> 00:01:01.140
我们可以直接从 UI 修改它们
00:01:01.140 --> 00:01:06.547
现在让我们导航到 Profiler 选项卡并开始
记录变更检测事件
00:01:06.450 --> 00:01:10.800
我们可以实时预览变更检测周期
00:01:10.800 --> 00:01:16.581
时间线中的每个柱子对应一个单独的
变更检测周期
00:01:16.450 --> 00:01:20.517
我们可以找到我们在变更检测上花费了多少
时间
00:01:20.517 --> 00:01:23.382
以及当前周期是否导致任何帧丢失
00:01:23.290 --> 00:01:29.586
我们还可以预览估计的帧率以及触发
变更检测的内容
00:01:29.460 --> 00:01:30.235
在底部
00:01:30.235 --> 00:01:34.110
我们可以预览我们花费最多时间的组件
00:01:34.110 --> 00:01:35.901
当我们选择一个柱子时
00:01:35.901 --> 00:01:40.080
我们可以看到特定组件的更多详细信息
00:01:40.080 --> 00:01:44.072
为了更好地了解应用程序的执行情况
00:01:44.072 --> 00:01:51.571
我们可以在默认柱状图视图或两种备选视图
(火焰图和树图)之间切换
00:01:51.450 --> 00:01:53.310
这就是我今天要给你的全部内容
00:01:53.310 --> 00:01:59.603
前往 angular.io/devtools 查找
更高级的 Angular DevTools 功能
00:01:59.500 --> 00:02:02.720
非常感谢你的观看,编码愉快