3. VUE调试工具
3.1 调试工具安装
- 到GitHub下载工具安装压缩包，解压到响应的文件夹。
- 到解压的vue-devtools文件目录下安装依赖包。
- 修改manifest.json文件，该文件在vue-devtools文件的
packagesshell-chrome下。
把 "persistent": false 改为 "persistent": true 。
"background": {
"scripts": [
"build/background.js"
],
"persistent": false
}Jetbrains全家桶1年46，售后保障稳定
- 编译代码
npm run build。结果报错：'webpack' 不是内部或外部命令，也不是可运行的程序 或批处理文件，哭泣泣。
按照网上建议全局安装webpack，npm install webpack -g
重新编译，中间要求安装webpack-cli，选择yes，之后还是出现了报错：
接着我按着报错信息去搜索了Error: Cannot find module ‘webpack-cli/package.json’这个问题，尝试了npm install webpack-cli -g、npm run build，还是报错：
又看到了另一种解释，看到了大佬分析出了原因：
The error was due to you installing webpack globally and trying to install the webpack-cli locally. I face the same problem.，大佬还给出了解决办法：npm rm -g webpack-cli And in the project npm i -D webpack-cli，That did it for me。
按照大佬的提示照做尝试了命令：npm rm -g webpack-cli 、npm i -D webpack-cli 、npm run build ，还是报错：Error: Cannot find module ‘webpack-cli/package.json’
我在想我是不是输错命令了，于是重新尝试了 npm i -g webpack-cli （原来的命令是npm i -D webpack-cli ）、npm run build，接着报错：
看了以下，全局安装webpack-cli，重新编译会报错：[webpack-cli] Unknown argument: –hide-modules，不全局安装而是采用如下命令安装 npm i -D webpack-cli ，重新编译会报错：Error: Cannot find module ‘webpack-cli/package.json’
删除了全局和非全局的，重新试了以下，还是不行。
a week later …
花了几天的时候学了一下git，采用https://www.cnblogs.com/chenhuichao/p/11039427.html链接的方法试了一下，还是不行。于是，我觉得可能是我前面的一些操作导致多下载了一些npm包，于是我把node卸载了，并且还把C盘下的用户目录下的AppData目录下的Roaming目录下的npm文件和npm-cache文件统统删除。之后重新安装了node。
接着我在D盘新建了vue-devtools文件夹，在该文件夹中打开了 git命令行程序，即 Git Bash Here。注意下图的vue-devtools文件夹中的vue-devtools文件夹和.git仓库文件是后来进行 git操作后得到的，一开始D盘下的vue-devtools文件夹中没有任何内容。
打开 git命令行程序后，输入初始化 git仓库 命令 git init，之后就变成如下摸样：
之后到github下载vue-devtools安装包，这里我采用了git 的克隆方式，也就是在git命令行程序中输入如下图命令，然后 enter 键，等待安装包下载完成。
下载完成后，我的文件目录成了这个样子（也就是前面提到的），多了vue-devtools文件夹和.git文件夹。
接着我打开了 powershell，将当前工作目录切换到 D:vue-devtoolsvue-devtools 下，输入命令 git checkout master。这个命令让工作环境切换到了master环境下。因为在我们克隆完vue-devtools安装包后，D:vue-devtoolsvue-devtools 目录下默认进入的是dev环境，（这个我在 git命令行程序 中核实过了，但是当时没有截图，sorry~）而我们后续操作都要master环境下进行，所以要先切换到master环境。
上述操作完成后，接下来在vue-devtools目录下安装依赖包，在power shell 中输入 npm install 命令。
依赖包下载完后执行 npm run build，编译打包成功后会在shells下生成chrome文件夹。（终于没有报错了）此文件夹就是用来放入chrome的扩展程序。
打开Chrome浏览器 >选择更多工具>扩展程序 >打开开发者模式 点击加载已解压的扩展程序, 找到刚才生成的chrome文件夹，选择 vue-devtools > shells > chrome 放入, 安装成功如下图
然后发现插件报错，感觉内心瞬间缩紧。然后查看了一下具体是什么错误。
于是我想到我可能忘记了一个步骤，那就是修改manifest.json文件，把”persistent”: false改成了”persistent”: true，具体如下：
代码语言：javascript复制 "background": {
"scripts": ["build/background.js"],
"persistent": true
},我心存侥幸的按了F12键看看有没有出现VUE，然而并没有出现VUE。我寻思着前面安装的时候也没有出现错误啊，于是在网上搜索了Unchecked runtime.lastError: Cannot find menu item with id vue-inspect-instance这个错误，发现也有很多人遇到这个问题，例如：https://segmentfault.com/q/1010000013530379?utm_source=sf-similar-question
还有这个https://segmentfault.com/q/1010000024436264
于是我先尝试跑一个带vue框架的html文件，然后F12键，然后就出现VUE了。我也不知道为啥，生活就是这么奇特~
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/203663.html原文链接：https://javaforall.cn
