vue调试神器vue-devtools安装

最近在玩Vue,欲先攻其事必先利其器,就先来弄弄这个工具(vue-devtools)。


vue-devtools安装

vue-devtools是一款用来调试Vue应用的Chrome插件,可极大提高开发者调试项目效率,接着我们说一下如何下载安装这个插件;

一、 从chrome商店直接下载安装

  • 国内无法访问,你懂得,有条件的可以自己处理 : https://chrome.google.com/webstore/category/extensions
  • 国内的也可以在此处下载 : http://www.cnplugins.com/

二、自己编译安装

  • 第一步 : 克隆项目到本地

    ① 找到github上vue-devtools项目

vue调试神器vue-devtools安装_第1张图片

        ② 使用git讲代码克隆到本地 : git clone https://github.com/vuejs/vue-devtools.git

vue调试神器vue-devtools安装_第2张图片

  • 第二步 :下载相关依赖 : 

vue调试神器vue-devtools安装_第3张图片

  • 第三步 : 项目打包  (yarn build 或 npm run build

vue调试神器vue-devtools安装_第4张图片

  • 第四步:

        ① 打开chrome 更多工具 -> 扩展程序 -> 加载已解压的扩展程序


    vue调试神器vue-devtools安装_第5张图片


         ② 选择打包好的文件

vue调试神器vue-devtools安装_第6张图片

③ 添加搞定

vue调试神器vue-devtools安装_第7张图片


  • 第五步:F12打开控制台点击最右侧vue选项卡

vue调试神器vue-devtools安装_第8张图片



自此搞定O(∩_∩)O哈哈~


你可能感兴趣的:(Vue)