AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Google浏览器怎么添加vue-devtools拓展工具

2023-02-18 175
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Google浏览器怎么添加vue-devtools拓展工具

步骤


1、下载github上面的源码

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


如果代码下载不下来，可以下载zip包（我安装的5.1.1的，5.3.3安装依赖会报错）

比如：Error: Cannot find module ‘@vue-devtools/build-tools’



点击下载：

aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS8zYjkzNzU2Y2M4ZDYyMjRhNTRjNDI1MWM3ZDI5YzQ1MS84QTE4QTQyQURGQUU0NTUwQjVDNzQ0MjY0RDQ5MTA2NA.png


2、找到vue-devtools文件夹，在目录下安装依赖包


npm install或者cnpm install


aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS8zYjkzNzU2Y2M4ZDYyMjRhNTRjNDI1MWM3ZDI5YzQ1MS8xNjlGQzBCRUNBMUM0ODNEQTUwRTZBQTBCMjFENUUxQw.png


3、安装完依赖，找到chrome文件复制一份改名vue-devtools_5.1.1


aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS8zYjkzNzU2Y2M4ZDYyMjRhNTRjNDI1MWM3ZDI5YzQ1MS85NkIwRjNDQUQ0RUM0MkMxODAwNzk3QkFFNjFCOUFDQQ.png


4、拖进去扩展程序

chrome://extensions/


aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS8zYjkzNzU2Y2M4ZDYyMjRhNTRjNDI1MWM3ZDI5YzQ1MS81MTY5MkExNDI3NEQ0MzdFQjg3NzgxNTM4NTFFMzBDOA.png


5、重启一下浏览器，按f12，打开调试工具


aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS8zYjkzNzU2Y2M4ZDYyMjRhNTRjNDI1MWM3ZDI5YzQ1MS8xNDc1RUNFNDM3QkI0M0IxQTM1OTQxNjI5M0VBOUM2MQ.png



下载crx

这一种简单暴力

https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd


aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS8zYjkzNzU2Y2M4ZDYyMjRhNTRjNDI1MWM3ZDI5YzQ1MS84NUZEOTlFQzMwQTE0RDU4OTg4NzgxQzcyNTNFRDU0NA.png



下载好以后，拖进拓展工具那边就行

aHR0cHM6Ly9ub3RlLnlvdWRhby5jb20veXdzL3B1YmxpYy9yZXNvdXJjZS8zYjkzNzU2Y2M4ZDYyMjRhNTRjNDI1MWM3ZDI5YzQ1MS8yRUY3NEFGNzRBOTg0ODA0ODdCMEJBRDAxMzYzQThGMA.png









文章标签：
开发工具
git
Web App开发
关键词：
浏览器工具
google浏览器
浏览器vue-devtools
google工具
浏览器google
凯小默
目录
相关文章
kouver
|
6月前
|
Web App开发
在 HTML 中禁用 Chrome 浏览器的 Google 翻译功能
在 html 标签中添加 translate=“no” 属性，浏览器将不会翻译整个页面。
kouver
327 0
修己xj
|
4天前
|
人工智能 前端开发 计算机视觉
Inpaint-Web：纯浏览器端实现的开源图像处理工具
在刷短视频时，常看到情侣在景区拍照被路人“抢镜”，男朋友用手机将路人“P”掉，既贴心又有趣。最近我发现了一个纯前端实现的开源项目——inpaint-web，可在浏览器端删除照片中的部分内容，非常酷。该项目基于 WebGPU 和 WASM 技术，支持图像修复与放大，已在 GitHub 上获得 5.1k Star。项目地址：[GitHub](https://github.com/lxfater/inpaint-web)。
修己xj
42 3
Inpaint-Web：纯浏览器端实现的开源图像处理工具
mao29955
|
18天前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具，可以较为准确地检测 JavaScript 中的内存泄漏问题，并帮助我们找出潜在的泄漏点，以便采取相应的解决措施。
mao29955
127 9
bibilili
|
16天前
|
Web App开发 定位技术 iOS开发
Playwright 是一个强大的工具，用于在各种浏览器上测试应用，并模拟真实设备如手机和平板。通过配置 `playwright.devices`，可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外，Playwright 还支持模拟地理位置、区域设置、时区、权限（如通知）和配色方案，使测试更加全面和真实。例如，可以在配置文件中设置全局的区域设置和时区，然后在特定测试中进行覆盖。同时，还可以动态更改地理位置和媒体类型，以适应不同的测试需求。
Playwright 是一个强大的工具，用于在各种浏览器上测试应用，并模拟真实设备如手机和平板。通过配置 `playwright.devices`，可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外，Playwright 还支持模拟地理位置、区域设置、时区、权限（如通知）和配色方案，使测试更加全面和真实。例如，可以在配置文件中设置全局的区域设置和时区，然后在特定测试中进行覆盖。同时，还可以动态更改地理位置和媒体类型，以适应不同的测试需求。
bibilili
17 1
技能实验室
|
23天前
|
Web App开发 Java
使用java操作浏览器的工具selenium-java和webdriver下载地址
【10月更文挑战第12天】Selenium-java依赖包用于自动化Web测试，版本为3.141.59。ChromeDriver和EdgeDriver分别用于控制Chrome和Edge浏览器，需确保版本与浏览器匹配。示例代码展示了如何使用Selenium-java模拟登录CSDN，包括设置驱动路径、添加Cookies和获取页面源码。
技能实验室
69 6
前端徐徐
|
30天前
|
Web App开发 人工智能 前端开发
Google 浏览器中的 AI 魔法 — window.ai
本文介绍了如何在 Chrome Canary 中启用并使用设备端 AI 功能。通过下载 Chrome Canary 并启用相关 API，你可以在本地运行 AI 模型，无需互联网连接。文章详细讲解了设置步骤、确认 AI 可用性的方法以及如何使用 `window.ai` 进行文本会话。虽然目前的性能和功能还有待提升，但这一技术为未来的前端开发和智能应用提供了无限可能。
前端徐徐
59 0
LKIDTI数据
|
1月前
自动生成IE浏览器的xpath工具IEXPath
自动生成IE浏览器的xpath工具IEXPath
LKIDTI数据
33 0
郑小健
|
5月前
|
数据采集 Web App开发 前端开发
Selenium：自动化Web浏览器操作的强大工具
**Selenium** 是一款用于自动化Web应用测试和模拟用户行为的工具，支持多种浏览器和编程语言。安装包括安装Selenium库和对应浏览器的WebDriver。基本用法包括导入库、启动浏览器、查找与操作页面元素、等待元素加载及关闭浏览器。在实际项目中，Selenium常用于Web测试、爬虫、自动化表单填写等，优点是跨平台、模拟真实用户行为，但性能较低且依赖浏览器。
郑小健
216 9
朝阳39
|
4月前
|
Web App开发 JavaScript 开发者
谷歌浏览器chrome安装vue调试插件Vue-Devtools
谷歌浏览器chrome安装vue调试插件Vue-Devtools
朝阳39
267 0
1808090903196729
|
5月前
|
人工智能 自然语言处理 机器人
[AI Google] 新的生成媒体模型和工具，专为创作者设计和构建
探索谷歌最新的生成媒体模型：用于高分辨率视频生成的 Veo 和用于卓越文本生成图像能力的 Imagen 3。还可以了解使用 Music AI Sandbox 创作的新演示录音。
1808090903196729
105 0
[AI Google] 新的生成媒体模型和工具，专为创作者设计和构建

热门文章

最新文章

  • 1
    使用 Google Talk 登录 MSN Messenger
  • 2
    全网互联：Google为什么收了Revolv？
  • 3
    Google App Engine Web开发之java类到网址的映射——实现用java类处理jsp页面的提交
  • 4
    Google和IMAX放弃VR相机
  • 5
    Google地图官方API- 在地图上绘图（自定义标记）
  • 6
    Grumpy：Google 用 Go 开发的 Python 运行时
  • 7
    纽约检察官想要苹果Google削弱加密
  • 8
    使用Google Page Speed
  • 9
    Google Earth Engine——全球土壤含数量数据：6个标准深度（0、10、30、60、100和200厘米）以250米的分辨率预测的33kPa和1500kPa吸力的土壤含水量（体积百分比）。
  • 10
    博客接入谷歌广告（Google Ads）
  • 1
    `roslibpy`是一个Python库，它允许非ROS（Robot Operating System）环境（如Web浏览器、移动应用等）与ROS环境进行交互。通过使用`roslibpy`，开发者可以编写Python代码来远程控制ROS节点，发布和订阅话题，以及调用服务。
    306
  • 2
    XML DOM 浏览器差异
    17
  • 3
    【vue2】vue2 适配pc端,解决浏览器缩放问题，解决电脑显示设置缩放、分辨率问题
    458
  • 4
    【插件】浏览器广告拦截插件| 浏览器搜索广告横飞怎么办
    48
  • 5
    Linux系统之安装Firefox浏览器
    252
  • 6
    XML DOM 浏览器差异
    32
  • 7
    JavaScript进阶 - 浏览器存储：localStorage, sessionStorage, cookies
    192
  • 8
    XML DOM 浏览器差异
    30
  • 9
    vue3【实战】创建项目、创建并提交代码到远程仓库，安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码，提升开发效率的必要集成
    75
  • 10
    浏览器【详解】Cookie（含Cookie的起源，属性，个数和大小限制，作用，优点，缺点，JS 的操作方法等）
    209

    • 相关课程

    更多
  • Vue.js完全自学手册图文教程
  • Vue.js 入门与实战
  • React 入门教程开发文档
  • jQuery开发教程
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • 前端自动化构建工具 Webpack

    • 相关电子书

    更多
  • WEB浏览器中即将发生的安全变化
  • 基于浏览器的实时构建探索之路
  • 基于浏览器的实时构建探索之路--玄寂

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础1：前端开发环境的安装和配置
  • 搭建Node.js编程环境
    • 下一篇
    阿里云OSS设置跨域访问