DevTools的chrome扩展程序安装

最新推荐文章于 2022-07-06 11:09:46 发布
最新推荐文章于 2022-07-06 11:09:46 发布
阅读量581 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36981190/article/details/115833896
版权
本文详细介绍了如何编译并安装Vue DevTools的Chrome扩展程序，包括使用yarn安装相关依赖，修改manifest.json文件，以及在Chrome中加载已解压的扩展程序。在安装过程中可能会遇到yarn install卡住的问题，可以尝试更换镜像源或手动安装vue@^2.0.0来解决。
摘要由CSDN通过智能技术生成

这里写目录标题

通过编译并安装解压扩展程序安装DevTools

编译devtools扩展程序

安装webpack-cli:

cnpm install webpack -g
如果出现Error: EPERM: operation not permitted，去掉-g选项

安装yarn

安装：npm install -g yarn
查看版本：yarn -v

下载devtools源码：

git clone https://github.com/vuejs/vue-devtools.git

在vue-devtools目录 敲安装命令

yarn install

yarn run build

安装会比较慢，耐心等待后，找到如下图目录
在这里插入图片描述
打开vue-devtools\packages\shell-chrome\manifest.json并把json文件里的"persistent":false改成true(这一步我没有做貌似也可以，不确定)
在这里插入图片描述<

最低0.47元/天 解锁文章
雨中世界
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Devtools下载添加到谷歌扩展程序
m0_60823776的博客
04-26 464
然后点击tags 进到这个页面往下滑然后一直下一页找到v5.1.1版本 用vscode打开刚刚下载解压好的文件夹，顺便检查一下有没有shells这个文件夹 然后先执行 npm install 上面执行完后，再执行 npm run build 然后打开谷歌扩展程序，再打开 开发者模式，点击加载已解压程序 找到刚刚下载好的 devtools-5.1.1 文件夹，点击进去，再点击进去 shells 文件夹 然后看到 chrome文件夹，然后点击 选择文件夹 ...
react-devtools 的谷歌扩展程序
08-01
首先，让我们了解一下如何将“react-devtools”的谷歌扩展程序安装到浏览器中。步骤非常简单，你只需下载扩展程序的压缩包，然后在谷歌浏览器中打开`chrome://extensions/`页面。这个页面是谷歌浏览器的扩展管理界面...
Vue.js devtools-5.1.0.crx-Chrome扩展程序，开发者工具，插件
06-05
Vue.js devtools 5.1.0 Chrome and Firefox DevTools extension for debugging Vue.js applications. Chrome扩展程序，开发者工具，插件 ---- 安装方法：打开chrome://extensions/，将下载的crx文件拖进去，如果有弹窗，点击允许。可能需要打开此页面的开发者模式
安装 chrome devtools 扩展程序
EchoLiner的博客
08-01 465
1、下载chrome devtools，解压 chrome.zip 到本地 2、点击谷歌浏览器右上角三个点 -> 更多工具 -> 扩展程序，再打开页面????右边的开发者模式 3、选择“加载已解压的扩展程序”，选中刚刚解压的 chrome 文件夹，点击右下角的“选择”按钮 4、完美出现此扩展程序 5、测试一下，右上角出现devtools的图标，???? ...
chrome谷歌浏览器-DevTool开发者工具-详细总结
ddnet2000的博客
06-26 6063
一、概述 　　1.官方文档 　　2.打开方法： 　　3.前言： 二、九个模块： 　　1.设备模式Device Mode 　　2.元素面板Elements 　　3.控制台面板Console 　　4.源代码面板Sources 　　5.网络面板Network 　　6.性能面板Performance以前的版本叫Timeline 　　7.内存面板...
chrome拓展程序devtool
Joy_Huu的博客
11-25 190
chrome拓展程序devtool步骤 git clone https://github.com/vuejs/vue-devtools 用gitbash clone该项目 cd vue-devtools npm i 安装依赖包 npm run build 解压包 找到vue-devtools > shells > chrome 打开Chrome浏览器 > 选择更多工具 > 扩展程序 > 打开开发者模式 把第5步找到的chrome文件拖入到扩展程序界面 启动项目文件，找到Vue
chrome 常用的扩展程序
02-09
以下是对标题和描述中提及的一些常用Chrome扩展程序的详细解释： 1. **前端助手**： 前端助手是一款专为Web开发者设计的Chrome插件，它提供了诸如HTML/CSS/JS格式化、代码片段管理、颜色拾取、页面性能分析等功能...
Chrome 安装Vue插件vue-devtools
06-24
开箱即用 加压包，找到shells下的chrome，再打开谷歌浏览器的扩展程序选中chrome
WebVR-Extension:Chrome DevTools扩展程序可模拟WebVR API
03-06
WebVR API扩展Chrome DevTools扩展程序，使用户和开发人员无需具有受支持的HMD耳机甚至兼容的浏览器/平台即可运行WebVR 1.0内容。 当前，它模拟HTC Vive。 通过执行需要打开和关闭HMD的重复操作，可以更容易地通过...
vue devtools 最新版 4.1.1 chrome扩展离线下载
01-26
文件 MD5: 5605A7D80C5D79C28434C149F7438961 SHA1: B06A555A098073E60856E81A8C00263723D7E1A4 Vue Devtools 4.0 有哪些新内容 ...如何离线安装Chrome插件? https://jingyan.baidu.com/article/e5c39bf5cc39cc39d
Dev Tools-crx插件
04-01
语言:English Web /开发人员的方便工具的集合！ 提升您的网络/开发生产力 为开发人员和用户提供各种免费工具的集合，他们可能会发现它们有用。 - URL编码器/解码器 - HTML编码器/解码器 - JavaScript格式化器 - CSS美化/格式化器 - XML美化/格式化器 - 文本=>图像水印 - 基本⁶⁴img数据网址 有关建议和反馈写入： rathanavel@live.in. 关于我： https://ratsubsharewall.blogspot.com/p/about-rathanavel.html. 隐私： https://ratubsharewall.blogspot.com/p/privacy-policy.html.
vue devtools chrome扩展离线下载
08-24
vue devtools chrome扩展离线下载
Vue devtools工具安装 Chrome安装Vue devtools 教程步骤
热门推荐
HaHa_Sir的博客
10-10 1万+
Vue devtools工具安装 Chrome安装Vue devtools 一、安装步骤 1、下载地址：GitHub - vuejs/devtools at v5.1.1 2、注意： 必须使用 v5.1.1 版本，经测试这个版本正常使用 3、安装步骤： npm install / cnpm install npm run build 4、上述步骤，安装没报错后，可以看到会生成 devtools/shell 目录 ...
每次关闭XAMPP都会出现报错:Error:Cannot create file ‘E:\XAMPP\xampp-control.ini‘
weixin_49832841的博客
11-08 2402
每次关闭XAMPP都会出现报错报错图片解决办法参考 报错图片 解决办法 给xampp-control.exe设置管理员权限。 右键该应用程序，在属性对话框选择"兼容性"–>“以管理员身份运行此程序”。 参考 XAMPP控制面板每次关闭出现EAccessViolation错误 ...
全新Chrome Devtools Performance使用指南
weixin_34210740的博客
10-11 564
运行时性能表现（runtime performance）指的是当你的页面在浏览器运行时的性能表现，而不是在下载页面的时候的表现。这篇指南将会告诉你怎么用Chrome DevTools Performance功能去分析运行时性能表现。在RAIL性能评估模型下，你可以在这篇指南中可以学到怎么去用这个performance功能去分析Respon...
vue devtools使用源码编译生成插件
黄彪博客
09-06 1018
文章目录文章参考问题来源如何根据源码打包vue devtools 文章参考 https://www.cnblogs.com/alice-fee/p/8038367.html 问题来源 今天想教同学如何使用Vue devtools，结果发现大家无法翻墙上网，无法直接从chrome商店下载依赖的插件，被迫在网上找了解决办法——直接根据源码编译，然后使用编译后的文件，加载到chrome中，写个笔记，...
vue-tools---谷歌扩展程序安装
qq_34904695的博客
07-06 1013
安装谷歌扩展工具vue-tools
DevTools开发者工具(chrome谷歌浏览器)
Tongyao
06-17 4425
概述 官方文档 https://developers.google.com/web/tools/chrome-devtools/ （需科学上网） 打开方法： 在Chrome菜单中选择 更多工具 > 开发者工具 在页面元素上右键点击，选择 “检查” 使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac) 前言： chrome的开发者工具可以说是十分强大了，是web开发者的一大利器，作为我个人而言平时用到的几率很大，相信大家也很常见，但是不要仅仅停留在点选元素看看样
Chrome浏览器安装devtools开发者工具
Liberty_yes的博客
10-14 4054
Chrome浏览器安装devtools开发者工具 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示； 全新的 KaTeX数学公式 语法； 增加了支持甘特图的mermaid语法1 功能； 增加了 多屏幕编辑 Ma
如何下载Vue Devtools扩展程序
最新发布
06-01
您可以按照以下步骤下载Vue Devtools扩展程序： 1. 在您使用的浏览器中打开扩展程序商店。 2. 在搜索栏中输入"Vue Devtools"。 3. 从搜索结果中找到Vue Devtools扩展程序，并点击"添加到Chrome"或"添加到Firefox"。 4. 等待扩展程序下载和安装完成。 5. 在浏览器中打开Vue.js应用程序，并启用Vue Devtools扩展程序。 请注意，Vue Devtools扩展程序只能用于Vue.js应用程序的开发和调试。如果您不是Vue.js开发人员，或者不需要进行Vue.js应用程序的开发和调试，您可以忽略这个扩展程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值