vue devtools 安装,调试实践

vue

vue-devtools是一款基于Vue项目的浏览器的扩展插件,用于调试vue项目程序,它可以极大的方便我们的查看和调试组件,提高我们的开发效率。

既然是插件,就需要我们安装它。

1.首先从vue官网打开 vue-devtools 的github项目 (https://github.com/vuejs/vue-devtools)

2.copy github项目的地址

3.在新建的文件夹中 Shift + 鼠标右键 选择Git Bash Here在当前文件夹中打开git命令行界面

4.执行 git clone https://github.com/vuejs/vue-devtools

5.第四步执行完后的目录结构是这样子:

6.执行npm install

7.npm run build

8.打开Chrome 浏览器 输入: chrome://extensions/

.

9.点击已解压的扩展程序

选择shell-chrom文件夹

.

11.重启浏览器,启动vue项目,打开console

调试:点击最后的console 面板中的Vue,然后点击页面dom元素,在console就会看到对应的组件和右侧的数据

这里附上git上的一般安装的步骤和要求:

Manual Installation

This is only necessary when you want to build the extension yourself from source to get not-yet-released features.

Make sure you are using Node 6+ and NPM 3+

  1. Clone this repo
  2. cd vue-devtools the newly created folder

  3. run yarn install

  4. then run yarn run build

  5. Open the Chrome extension page (currently under Menu > More Tools > Extensions)
  6. Check "developer mode" on the top-right corner
  7. Click the "load unpacked" button on the left, and choose the folder: vue-devtools/packages/shell-chrome/

  8. Alternatilvely to step 3, you can also use yarn dev:chrome to build & watch the unpacked extension

以上是 vue devtools 安装,调试实践 的全部内容, 来源链接: utcz.com/z/376153.html

回到顶部