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  intall Error: EISDIR: illegal operation on a directory, symlink

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/>'
})

再次试试: 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/100869.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于GPT-4和LangChain构建云端定制化PDF知识库AI聊天机器人

参考&#xff1a; GitHub - mayooear/gpt4-pdf-chatbot-langchain: GPT4 & LangChain Chatbot for large PDF docs 1.摘要&#xff1a; 使用新的GPT-4 api为多个大型PDF文件构建chatGPT聊天机器人。 使用的技术栈包括LangChain, Pinecone, Typescript, Openai和Next.js…

学习设计模式之适配器模式,但是宝可梦

前言 作者在准备秋招中&#xff0c;学习设计模式&#xff0c;做点小笔记&#xff0c;用宝可梦为场景举例&#xff0c;有错误欢迎指出。 适配器模式 意图&#xff1a;将一个类的接口转换成客户希望的另一个接口 主要解决&#xff1a;把现有对象放到新环境里&#xff0c;而新…

爱校对如何帮助企业和博客主提高在线可见性?

在数字化时代&#xff0c;内容质量已经成为增强在线曝光率的关键因素。企业和博客主经常面临挑战&#xff0c;如何制作高质量、无误的内容以吸引更多的在线用户。此文将详细分析“爱校对”如何帮助用户优化内容&#xff0c;从而提高在线可见性。 1.互联网内容的挑战 搜索引擎…

ClickHouse(二十三):Java Spark读写ClickHouse API

进入正文前&#xff0c;感谢宝子们订阅专题、点赞、评论、收藏&#xff01;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; &#x1f3e1;个人主页&#xff1a;含各种IT体系技术&#xff0c;IT贫道_Apache Doris,大数据OLAP体系技术栈,Kerberos安全认证-CSDN博客 &…

Vue3组合式API详解 - 大型应用的高端写法

目录 01-setup方法与script_setup及ref响应式02-事件方法_计算属性_reactive_toRefs03-生命周期_watch_watchEffect04-跨组件通信方案provide_inject05-复用组件功能之use函数06-利用defineProps与defineEmits进行组件通信 01-setup方法与script_setup及ref响应式 在Vue3.1版本…

玩转单元测试之gtest

引言 程序开发的时候&#xff0c;往往需要编写一些测试样例来完成功能测试&#xff0c;以保证自己的代码在功能上符合预期&#xff0c;能考虑到一些异常边界问题等等。 gtest快速入门 1.引入gtest # 使用的是1.10版本&#xff0c;其他版本可根据需要选择 git clone -b v1.1…

基于图卷积网络的知识嵌入8.21

基于图卷积网络的知识嵌入 摘要介绍 摘要 近年来&#xff0c;围绕图卷积网络&#xff08;GCN&#xff09;这一主题出现了大量的文献。如何有效地利用复杂图中丰富的结构信息&#xff08;例如具有heterogeneous types of entities and relations(异构实体和关系类型) 的知识图谱…

API 接口选择那个?RESTful、GraphQL、gRPC、WebSocket、Webhook

大家好&#xff0c;我是比特桃。目前我们的生活紧紧地被大量互联网服务所包围&#xff0c;互联网上每天都有数百亿次API调用。API 是两个设备相互通讯的一种方式&#xff0c;人们在手机上每次指尖的悦动&#xff0c;背后都是 API 接口的调用。 本文将列举常见的一些 API 接口&…

element-ui中二次封装一个带select的form组件

带select的form组件 样式 代码 <template><el-form-item label"是否有" class"append" prop"tag"><el-form-itemprop"isShare"><el-select v-model"query.tag"><el-option v-for"(item, …

2023国赛数学建模思路 - 案例:感知机原理剖析及实现

文章目录 1 感知机的直观理解2 感知机的数学角度3 代码实现 4 建模资料 # 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 感知机的直观理解 感知机应该属于机器学习算法中最简单的一种算法&#xff0c;其…

4.物联网LWIP之C/S编程,实现服务器大小写转换

LWIP配置 服务器端实现 客户端实现 错误分析 一。LWIP配置&#xff08;FREERTOS配置&#xff0c;ETH配置&#xff0c;LWIP配置&#xff09; 1.FREERTOS配置 为什么要修改定时源为Tim1&#xff1f;不用systick&#xff1f; 原因&#xff1a;HAL库与FREERTOS都需要使用systi…

错题整理——测开2021网易

1. 某些bug不影响使用时&#xff0c;可以选择先上线&#xff0c;在维护过程中修复。 2. df&#xff1a;查看磁盘使用情况 dir不是linux的常用的命令&#xff0c;不过用dir能够罗列出目录内容&#xff1b;dir默认没有颜色的区别&#xff0c;但也可以设置。现在都使用ls来代替。…

微信小程序卡片横向滚动竖图

滚动并不是使用swiper&#xff0c;该方式使用的是scroll-view实现 Swiper局限性太多了&#xff0c;对竖图并不合适 从左往右滚动图片示例 wxml代码&#xff1a; <view class"img-x" style"margin-top: 10px;"><view style"margin: 20rpx;…

三种生成树(STP,RSTP,MSTP)的基本配置(自我理解)

目录 一、为什么要使用生成树&#xff08;STP)&#xff1a; 二、由于设备冗余而导致的问题&#xff1a; 广播风暴&#xff1a; 三、802.1D生成树基本配置 四、802.1D生成树实验 实验拓扑&#xff1a; 实验配置&#xff1a; 配置完成后&#xff0c;在SW8上观察现象&…

RedisDesktopManager 连接redis

redis查看是否启动成功 ps -ef | grep redis以上未启动成功 cd /usr/local/bin/ 切换根目录 sudo -i 开启服务端 ./redis-server /usr/local/redis/redis.conf 开启客户端 ./redis-cli

JUC--阻塞队列

目录 问题引出 一.单端阻塞队列&#xff08;BlockingQueue&#xff09; 二.双端阻塞队列&#xff08;BlockingDeque&#xff09; 三.延迟队列&#xff08;DelayQueue&#xff09; 问题引出 由于实现消费者-生产者模型&#xff0c;每一次实现都比较麻烦&#xff0c;比如sych…

Python批量爬虫下载文件——把Excel中的超链接快速变成网址

本文的背景是&#xff1a;大学关系很好的老师问我能不能把Excel中1000个超链接网址对应的pdf文档下载下来。虽然可以手动一个一个点击下载&#xff0c;但是这样太费人力和时间了。我想起了之前的爬虫经验&#xff0c;给老师分析了一下可行性&#xff0c;就动手实践了。    没…

4.SpringCloud 基本架构

1.SpringCloud概述 Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具&#xff08;例如配置管理&#xff0c;服务发现&#xff0c;断路器&#xff0c;智能路由&#xff0c;微代理&#xff0c;控制总线&#xff0c;一次性令牌&#xff0c;全局锁&#xff0c;…

测试框架pytest教程(2)-用例依赖库-pytest-dependency

对于 pytest 的用例依赖管理&#xff0c;可以使用 pytest-dependency 插件。该插件提供了更多的依赖管理功能&#xff0c;使你能够更灵活地定义和控制测试用例之间的依赖关系。 Using pytest-dependency — pytest-dependency 0.5.1 documentation 安装 pytest-dependency 插…

【源码篇】ThreadLocal源码解析(主打的就是通俗易懂,言简意赅)

文章目录 ThreadLocal学习笔记前言1、TheadLocal基本介绍2、ThreadLocal基本使用3、体验ThreadLocal的优点3.1 ThreadLocal与synchronized的比较3.2、ThreadLoca的应用场景 4、ThreadLocal的内部原理4.1 ThreadLocal内部结构4.2 ThreadLocal常用方法分析4.2.1 set原理分析4.2.2…