VUE调试工具
3. VUE调试工具3.1 调试工具安装到GitHub下载工具安装压缩包,解压到响应的文件夹。到解压的vue-devtools文件目录下安装依赖包。修改manifest.json文件,该文件在vue-devtools文件的 \packages\shell-chrome 下。把 "persistent": false 改为 "persistent": true 。"background": {"sc
3. VUE调试工具
3.1 调试工具安装
- 到GitHub下载工具安装压缩包,解压到响应的文件夹。
- 到解压的vue-devtools文件目录下安装依赖包。
- 修改manifest.json文件,该文件在vue-devtools文件的
\packages\shell-chrome
下。
把"persistent": false
改为"persistent": true
。
"background": {
"scripts": [
"build/background.js"
],
"persistent": false
}
- 编译代码
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-devtools\vue-devtools 下,输入命令 git checkout master
。这个命令让工作环境切换到了master环境下。因为在我们克隆完vue-devtools安装包后,D:\vue-devtools\vue-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,具体如下:
"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了。我也不知道为啥,生活就是这么奇特~
更多推荐
所有评论(0)