Vue- vue devtools安装 - 星星眼 - 博客园

使用Vue开发过程中，需Chrome浏览器的调试插件Vue devtools

1、下载

https://github.com/vuejs/vue-devtools

选择下载安装整个ZIP压缩包

2.然后进行解压缩，并在解压后的文件夹里面打开命令提示符，

3.然后在相同的路径里面输入：npm install
再输入：npm run build

注意：npm install的时候会报错： npm ERR! Unexpected end of JSON input while parsing near '...a1a6ec9096c30d3954dd5'

解决方法：npm cache clean --force

 

4.在编译好的文件夹找到manifest.json这个文件，一般所在的路径是：
自己安装的路径\vue-devtools-dev\shells\chrome\manifest.json
然后打开这个manifest.json, 将persistent的值改为true

5.打开chrome浏览器的扩展程序，（chrome://extensions/）

打开开发者模式，并将整个chrome文件夹拖入空白处，即可加载出vue devtools插件

6、验证

 二、火狐安装

安装web-ext

npm install --global web-ext

然后编译运行firefox浏览器

npm run build
npm run run:firefox

上述指令会打开firefox浏览器，你便可在打开的窗口运行调试vue应用了。

三、_如果你希望在所有浏览器中使用vue-devtools，那可以按如下步骤安装_

  1. 安装工具
// 全局安装，也可本地安装
npm install -g @vue/devtools
  1. 运行
vue-devtools // 适用于全局安装

该指令会打开一个窗口，如下所示

  1. 如果你想在电脑浏览器调试，则在vue应用的最顶部加上
<script src="http://localhost:8098"></script>
  1. 如果你想在移动端浏览器调试，则在vue应用的最顶部加上
<script>
  window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost
  window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
</script>
<script src="http://<your-local-ip>:8098"></script>

Original url: Access
Created at: 2020-02-21 02:45:09
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论