vue浏览器插件安装-各种问题

方法1: vue.js devtolls插件下载

https://blog.csdn.net/qq_55640378/article/details/131553642

下载地址: Tags · vuejs/devtools · GitHub

npm install 或是 cnpm install 遇到的报错

设置淘宝镜像源(推荐使用nrm,这一步是为了保证其他依赖不报错

npm install -g nrm nrm use taobao

文件下载到移动硬盘中cnpm intall 报错

cnpm install 安装依赖的时候出现错误_余人于RenYu的博客-CSDN博客

查看 盘符属性(移动硬盘)为FAT

查看F盘属性 为NTFS:文件拷贝到F盘

执行 cnpm install ,未见报错

执行 npm run build .报错

扩展Chrome插件
打开Chrome浏览器-->选择更多工具-->扩展程序-->打开开发者模式,点击"加载已解压的扩展程序",选择F:\javaproject\vue_prj\vue浏览器插件\devtools-6.5.0\packages\shell-chrome放入。如果看不到"加载已解压的扩展程序..."按钮,先勾选"开发者模式" 出现报错

无法为内容脚本加载 JavaScript"build/hook.js"。 无法加载清单。

2021-11-05 -mac安装vue-devtools_张裕解百纳的博客-CSDN博客

问题解决:

修改\devtools-6.5.0\packages\shell-chrome、manifest.json 其中 build 替换为src

复制代码
 "48": "icons/48-gray.png",
      "128": "icons/128-gray.png"
    },
    "default_title": "Vue Devtools",
    "default_popup": "popups/not-found.html"
  },
  "web_accessible_resources": [
    "devtools.html",
    "devtools-background.html",
    "build/backend.js"
  ],
  "devtools_page": "devtools-background.html",
  "background": {
    "scripts": [
      "build/background.js"
    ],
    "persistent": true
  },
  "permissions": [
    "<all_urls>",
    "storage"
  ],
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "build/hook.js"
      ],
      "run_at": "document_start"
    },
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "build/detector.js"
      ],
      "run_at": "document_idle"
    }
  ],
  "content_security_policy": "script-src 'self'; object-src 'self'"
}

替换后:

复制代码
{
  "name": "Vue.js devtools",
  "version": "6.5.0",
  "version_name": "6.5.0",
  "description": "Browser DevTools extension for debugging Vue.js applications.",
  "manifest_version": 2,
  "icons": {
    "16": "icons/16.png",
    "48": "icons/48.png",
    "128": "icons/128.png"
  },
  "browser_action": {
    "default_icon": {
      "16": "icons/16-gray.png",
      "48": "icons/48-gray.png",
      "128": "icons/128-gray.png"
    },
    "default_title": "Vue Devtools",
    "default_popup": "popups/not-found.html"
  },
  "web_accessible_resources": [
    "devtools.html",
    "devtools-background.html",
    "srcbackend.js"
  ],
  "devtools_page": "devtools-background.html",
  "background": {
    "scripts": [
      "src/background.js"
    ],
    "persistent": true
  },
  "permissions": [
    "<all_urls>",
    "storage"
  ],
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "src/hook.js"
      ],
      "run_at": "document_start"
    },
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "src/detector.js"
      ],
      "run_at": "document_idle"
    }
  ],
  "content_security_policy": "script-src 'self'; object-src 'self'"
}

浏览器拓展程序再次导入成功

方法2: beta 版本安装

https://blog.csdn.net/visibleforest/article/details/121097964?utm_medium=distribute.pc_relevant.none-task-blog-2\~default\~baidujs_baidulandingword\~default-0-121097964-blog-112477966.235\^v38\^pc_relevant_default_base3\&spm=1001.2101.3001.4242.1\&utm_relevant_index=3

下载地址: Releases · vuejs/devtools · GitHub

选择 release 版本找到 beta的

1、在官网https://github.com/vuejs/vue-devtools,下载vuejs_devtools_beta-6.0.0.7-an+fx.xpi文件, 安装谷歌版的

(1)进入官网,找到右侧圈起来的地方,点击Releases,查看所有版本

下载 xpi ,修改 后置为rar 解压,浏览器调整程序导入:

选择页面显示vue 插件

F12 显示vue:

问题: vue 不显示调试和数据

参考: 安装了VueDevtools插件但在控制台不显示Vue的解决方案 - 灰信网(软件开发博客聚合)

解决方法: F:\javaproject\vue_prj\vue-demo2\src\main.js 添加: Vue.config.devtools = true;

复制代码
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.config.devtools = true;// 添加这一行
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

再次试试:

相关推荐
江城开朗的豌豆3 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er8 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0611 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444014 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆14 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子17 分钟前
Web开发中的文件下载
前端·javascript·面试
peakmain925 分钟前
Gradle 8.11.1的升级之旅
前端
一拳不是超人35 分钟前
PWA渐进式Web应用技术深度解析
前端·pwa
KaneLogger37 分钟前
视频转文字,别再反复拖进度条了
前端·javascript·人工智能
前端风云志1 小时前
JavaScript中如何遍历对象?
javascript