bavWOHZM6zE.cn.vtt

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
非常感谢你的观看，编码愉快