精华内容
下载资源
问答
  • Vue调试工具
    2021-05-23 16:37:08

    Vue调试工具
    下载地址: https://github.com/vuejs/vue-devtools
    1.下载之后直接将解压后的文件放在根目录下
    2.在终端执行:yarn install——>yarn run build
    3.打开谷歌浏览器的更多工具中的扩展程序,
    4.点击“加载已解压的扩展程序”,选择下载文件中的packages/shell-chrome,成功

    更多相关内容
  • vue调试工具

    2018-10-17 16:16:22
    vue调试工具,自己的笔记而已
  • vue3和vue2都可以用、vue调试工具、适用于谷歌浏览器
  • vue调试工具,vue-devtools.rar
  • VUE调试工具

    千次阅读 2020-12-22 20:40:48
    3. VUE调试工具 3.1 调试工具安装 到GitHub下载工具安装压缩包,解压到响应的文件夹。 到解压的vue-devtools文件目录下安装依赖包。 修改manifest.json文件,该文件在vue-devtools文件的 \packages\shell-chrome...

    3. VUE调试工具

    3.1 调试工具安装

    1. 到GitHub下载工具安装压缩包,解压到响应的文件夹。
      在这里插入图片描述
      在这里插入图片描述
    2. 到解压的vue-devtools文件目录下安装依赖包。
      在这里插入图片描述
    3. 修改manifest.json文件,该文件在vue-devtools文件的 \packages\shell-chrome 下。
      在这里插入图片描述
      "persistent": false 改为 "persistent": true
      "background": {
        "scripts": [
          "build/background.js"
        ],
        "persistent": false
      }
    
    1. 编译代码 npm run build。结果报错:'webpack' 不是内部或外部命令,也不是可运行的程序 或批处理文件,哭泣泣。
      在这里插入图片描述
      按照网上建议全局安装webpack,npm install webpack -g
      在这里插入图片描述
      重新编译,中间要求安装webpack-cli,选择yes,之后还是出现了报错:
      在这里插入图片描述
      接着我按着报错信息去搜索了Error: Cannot find module 'webpack-cli/package.json’这个问题,尝试了npm install webpack-cli -gnpm 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了。我也不知道为啥,生活就是这么奇特~
    在这里插入图片描述

    展开全文
  • 前端开发调试插件,Vue调试插件,Vue.js devtools Chrome插件下载,直接加压按步骤添加即可使用
  • vue浏览器调试工具

    2018-07-03 11:59:28
    一款非常好用的vue浏览器调试工具 开发vue使用的插件 浏览器调试工具
  • 拖动文件到浏览器安装即可
  • 本文主要介绍 vue调试工具 vue-devtools 的安装和使用 工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧 安装: 1.到github下载: git clone https://github.com/vuejs/vue-devtools 2....
  • Vue调试工具的安装

    2021-02-04 18:39:49
    Vue调试工具的安装 第一种方法: 1、chrome浏览器输入地址“chrome://extensions/”进入扩展程序页面 2、点击右上角按钮,勾选开发者模式 3、点击“加载已解压的扩展程序”按钮,选择解压后的chrome文件夹,或直接...

    Vue调试工具的安装

    第一种方法:
    1、chrome浏览器输入地址“chrome://extensions/”进入扩展程序页面

    2、点击右上角按钮,勾选开发者模式
    在这里插入图片描述
    3、点击“加载已解压的扩展程序”按钮,选择解压后的chrome文件夹,或直接将解压文件拖入窗口,即可添加成功。
    在这里插入图片描述
    4、添加完vue-devtools扩展程序之后,浏览器打开vue项目便可调试,
    安装包链接:https://pan.baidu.com/s/1WmYbIKMkXy9fKSQcD2hdsQ
    提取码:poz7

    第二种方法
    1.https://github.com/vuejs/vue-devtools/tree/master下载安装包,下载时要选择master分支
    在这里插入图片描述
    2.找到文件安装路径进入dos环境命令栏窗口 ,输入命令npm install 安装
    在这里插入图片描述
    3.安装完成后,运行命令 npm run build 进行打包 如下图所示
    在这里插入图片描述
    4.打开浏览器,进入设置扩展工具检查是否安装成功,安装完成如下图。
    在这里插入图片描述

    展开全文
  • 浏览器调试vue3工具.zip
  • vue调试工具vue-devtools安装及使用具体步骤: 一、先克隆工具包代码: https://gitcode.net/mirrors/vuejs/vue-devtools.git 二、安装: 1、安装 yarn 和 镜像,为了节约安装时间: 1️⃣ npm install -g yarn 2️...

    vue调试工具vue-devtools安装及使用具体步骤:

    一、先克隆工具包代码:

    https://gitcode.net/mirrors/vuejs/vue-devtools.git
    

    二、安装:

    1、安装 yarn 和 镜像,为了节约安装时间:

    1️⃣   npm install -g yarn
    2️⃣   yarn config set registry https://registry.npm.taobao.org --global
    3️⃣   yarn config set disturl https://npm.taobao.org/dist --global
    4️⃣   yarn config get registry
    

    2、在vue-devtools目录下打开cmd:

    1️⃣  yarn install
    2️⃣  yarn run build
    

    3、全局搜索 persistent 字段,把 "persistent":false 改成 true

    在这里插入图片描述

    4、打开Chrome浏览,打开扩展程序(右上角4个点—>更多工具—>扩展程序—>打开开发者模式开关)。

    (1)第一步:

    在这里插入图片描述

    (2)第二步:

    在这里插入图片描述

    (3)第三步:上传后显示这个弹窗,说明安装成功了,可以正常使用了。

    在这里插入图片描述
    注意:如果没有出现下面这图标,可以关闭浏览器重新打开就有了
    在这里插入图片描述

    展开全文
  • Mac安装Vue调试工具vue-devtools 文章目录Mac安装Vue调试工具vue-devtools通过github下载安装1.github下载2.安装插件3.vue-devtools使用收藏猫插件安装1.下载插件2.安装插件 本文主要介绍在无法翻墙的情况下安装...
  • vue-devtools-dev
  • 谷歌中安装 vue调试工具 vue-devtools

    千次阅读 2022-04-21 14:33:03
    1. 打开谷歌浏览器,在右上角找到“三个点”主菜单按钮并点击,在出现的列表中点击“更多工具”选项,在出现的第二个小列表中选择“扩展程序”并点击进入。 2. 在扩展程序窗口中,将右上角“开发者模式”勾选上。 ...
  • Vue 调试工具vue-devtools

    2021-05-28 13:01:15
    一、调试工具vue-devtools ① 克隆仓库 ② 安装依赖包 ③ 构建 ④ 打开Chrome扩展页面 ⑤ 选中开发者模式 ⑥ 加载已解压的扩展,选择shells/chrome 上述链接有可能失效 到github官网下载 :...
  • vue调试工具:devtools

    2021-08-09 23:21:40
    devtools是一款基于chrome游览器的插件。 可以通过极简插件下载:https://chrome.zzzmh.cn/ 下载后打开谷歌浏览器扩展程序,将下载好的devtools插件拖入到浏览器中,即安装成功。
  • 在谷歌商店里搜索Vue.js devtools 将其添加至Chrome 添加后即可在扩展程序中...最后我们就以在访问自己的文件网址的情况下使用Vue调试工具了 自我激励 古之立大事者,不惟有超世之才,亦必有坚韧不拔之志。 ...
  • 若单击调试工具显示 Devtool inspection is not available because it's in production mode or explicitly disabled by author如图: 这是使用了production版本的vue.min.js 将vue.min.js改成vue.js即可 ...
  • vue调试工具vue-devtools
  • Vue调试工具安装(vue devtools)第一步:下载源码第二步:执行命令 第一步:下载源码 在github下载devtools源码,地址:https://github.com/vuejs/vue-devtools。 第二步:执行命令 下载好后进入vue-devtools-...
  • Vue调试工具vue-devtools安装 它可以让你在一个更友好的界面中审查和调试 Vue 应用 git下载: 可以直接从git上手动下载,或者使用命令git clone https://github.com/vuejs/vue-devtools 在vue-devtools目录下...
  • 因为不能连上googlg Chrome应用商店直接下载,还有在GitHub的vue-devtools官网克隆代码下载依赖npm run build出错,yarn run build也不行,所以我找到了此方法: 1、创建一个空文件夹2、在cmd里进入这个文件夹,运行...
  • 现在进官网下载的 Chrome浏览器vue调试工具是最新版本的 不能用 npm install 安装,要使用 yarn 但是 我全局安装 yarn 成功了,yarn -version 也得到了 yarn的版本 可 yarn install 还是失败了,原因找了很久还是找...
  • vue 调试工具.rar

    2021-10-01 19:02:39
    vue 开发者调试工具
  • vue调试工具vue-devtools安装及使用 本文主要介绍 vue的调试工具 vue-devtools 的安装和使用 工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧 安装: 1.到github下载: git clone ...
  • 1.下载vue浏览器插件 下载地址如下 点击下载 2.打开谷歌浏览器 更多工具->扩展程序-> 然后将下载好的压缩呀解压后为.crx文件 拖动到下面窗口即可 如图所示 最后浏览器重启后是这个样子 安装成功...
  • 完成上述操作后,调试工具不显示。作如下操作 1:打开插件详细信息,将“允许访问文件网址”和“收集各项错误”按钮点亮 2:修改相关配置(这项不是我发现的,是在博客上看到一位博主写的) ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,176
精华内容 10,470
关键字:

vue调试工具

友情链接: marlan.rar