【MAC 上学习 Vue】Day 3. 使用 Chrome 浏览器测试 Vue.js 的双向绑定

安装 Chrome

Chrome 下载地址为：
https://www.google.cn/chrome/

安装 vue-devtools 调试工具

1. 使用 Chrome 浏览器打开 Day 1 创建的 test1.html，并右键选择“检查”
   
   1.png
2. 打开 Console 选项卡给出的下载 GitHub 地址：
   https://github.com/vuejs/vue-devtools
   
   2.png
3. 进入 GitHub 后，先点击 Clone or download，再点击 Download ZIP 进行下载
   
   3.png
4. 解压 vue-devtools-dev.zip 文件，并使用 CMD 工具进入该解压目录下后，执行如下命令：

cnpm install

cnpm run build

5. 修改 shells/chrome 文件夹下的 manifest.json 文件， 把 persistent 改为 true
6. 使用 Chrome 浏览器打开如下地址，需要勾选“开发者模式”
   chrome://extensions/
   
   4.png
7. 单击“加载已解压的扩展程序”选项，选择 shells/chrome 文件夹，再通过右键“检查”选项进入如下页面，可见到 Vue 选项，就说明 vue-devtools 调试工具已经安装成功
   
   5.png

使用 Chrome 浏览器测试 Vue.js 的双向绑定

1. 可查看 msg 的值：
   
   6.png
2. 可改变 msg 的值：
   
   7.png