我们可以使用vue-devtools很方便检验页面的组件结构，包括组件的列表，嵌套关系，以及每个组件的内部数据成员的值。为此，我们做一个简单的布局结构，界面如下：

其中嵌套了一个header和一个content组件，content组件内还有c1，c2两个组件嵌套其中。嵌套结构为

->ROOT  ->header  ->content     ->c1     ->c2

代码：

可以使用chrome直接打开文件，并记得在插件内配置vue-devtools，允许它访问文件网址。随后打开Chrome devtools，点开vue面板。可以看到

1. 组件的树形结构在左边展示

2. 点击此树形结构的组件项目，可以在右侧看到组件的数据成员值，且在用户界面上，对应的组件会被加亮。

vue-devtools检视组件的能力，查看vue组件内部，从而可以帮助我们调试程序

作者：刘传君

创建过产品，创过业。好读书，求甚解。

出品

bootstrap小书