阅读 423

vue调试工具vue-devtools安装及使用

安装:

1. 下载dev-tools dev-tools,gitHub地址:github.com/vuejs/devto…

// 由于我使用github上的git下载地址clone失败了
// 下面贴出我成功clone的地址

git clone https://github.com/vuejs/vue-devtools
复制代码

2. 在vue-devtools目录下安装依赖包

// 在项目文件下打开cmd命令行窗口
npm install
// 或者使用yarn
复制代码

3. 修改manifest.json文件

把"persistent":false改成true

image.png 4. 重新打包

注意:由于当时执行npm run build 命令时,报错了,最后用的是yarn run build才打包成功

npm run build
// 失败的话建议安装yarn包,执行如下命令
yarn run build
复制代码

扩展chrome插件

在谷歌浏览器里点击右上角的三点按钮 > 更多工具 > 扩展程序。或者在输入框中输入地址:chrome://extensions/

image.png

  • 打开页面后 打开右上角的开发者模式 > 左上角的加载已解压的扩展程序 > 选择刚刚打包好的packages/shell-chrome文件即可

image.png

  • 安装完成,重新启动浏览器,建议将vue-tools点击刷新

image.png 以上就是vue的devtools的全部内容,下面则是题外的如何安装使用yarn包,不需要的小伙伴可以忽略

5. 安装yarn

更多yarn介绍在这篇文章juejin.cn/post/699248…

  1. 下载node.js,使用npm安装
    npm install -g yarn
    查看版本:yarn --version
  2. Yarn 淘宝源安装,分别复制粘贴以下代码行到黑窗口运行即可
yarn config set registry https://registry.npm.taobao.org -g

yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
复制代码
文章分类
前端
文章标签