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

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

2023-02-18 429
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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工具
浏览器工具
google浏览器
浏览器vue-devtools
浏览器google
凯小默
目录
相关文章
kouver
|
Web App开发
在 HTML 中禁用 Chrome 浏览器的 Google 翻译功能
在 html 标签中添加 translate=“no” 属性，浏览器将不会翻译整个页面。
kouver
1282 0
深语人工智能DeepNLP
|
10月前
|
数据采集 人工智能 定位技术
分享一个开源的MCP工具使用的AI Agent 支持常用的AI搜索/地图/金融/浏览器等工具
介绍一个开源可用的 MCP Tool Use 通用工具使用的 AI Agent (GitHub: https://github.com/AI-Agent-Hub/mcp-marketplace ，Web App https://agent.deepnlp.org/agent/mcp_tool_use，支持大模型从Open MCP Marketplace (http://deepnlp.org/store/ai-agent/mcp-server) 的1w+ 的 MCP Server的描述和 Tool Schema 里面，根据用户问题 query 和 工具 Tool描述的 相关性，选择出来可以满足
深语人工智能DeepNLP
1049 9
TsingtaoAI
|
存储 人工智能 前端开发
Google揭秘Agent架构三大核心：工具、模型与编排层实战指南
本文为Google发布的Agent白皮书全文翻译。本文揭示了智能体如何突破传统AI边界，通过模型、工具与编排层的三位一体架构，实现自主推理与现实交互。它不仅详解了ReAct、思维树等认知框架的运作逻辑，更通过航班预订、旅行规划等案例，展示了智能体如何调用Extensions、Functions和Data Stores，将抽象指令转化为真实世界操作。文中提出的“智能体链式组合”概念，预示了未来多智能体协作解决复杂问题的革命性潜力——这不仅是技术升级，更是AI赋能产业的范式颠覆。
TsingtaoAI
3258 1
蚝油菜花
|
人工智能 前端开发 API
Gemini Coder：基于 Google Gemini API 的开源 Web 应用生成工具，支持实时编辑和预览
Gemini Coder 是一款基于 Google Gemini API 的 AI 应用生成工具，支持通过文本描述快速生成代码，并提供实时代码编辑和预览功能，简化开发流程。
蚝油菜花
1288 38
Gemini Coder：基于 Google Gemini API 的开源 Web 应用生成工具，支持实时编辑和预览
蚝油菜花
|
存储 人工智能 数据库
Codel：AI代理工具，支持在终端、浏览器、编辑器执行复杂任务和项目
Codel是一款全自主AI代理工具，支持在终端、浏览器和编辑器中执行复杂任务和项目。它运行在沙盒化的Docker环境中，具备自主操作能力，内置浏览器和文本编辑器，所有操作记录存储于PostgreSQL数据库。Codel能够自动完成复杂任务，如创建项目结构、进行网络搜索等，适用于自动化编程、研究与开发、教育与培训以及数据科学与分析等多个领域。
蚝油菜花
557 11
Codel：AI代理工具，支持在终端、浏览器、编辑器执行复杂任务和项目
蚝油菜花
|
Web App开发 机器学习/深度学习 人工智能
Magic Copy：开源的 AI 抠图工具，在浏览器中自动识别图像进行抠图
Magic Copy 是一款开源的 AI 抠图工具，支持 Chrome 浏览器扩展。它基于 Meta 的 Segment Anything Model 技术，能够自动识别图像中的前景对象并提取出来，简化用户从图片中提取特定元素的过程，提高工作效率。
蚝油菜花
1061 7
Magic Copy：开源的 AI 抠图工具，在浏览器中自动识别图像进行抠图
修己xj
|
人工智能 前端开发 计算机视觉
Inpaint-Web：纯浏览器端实现的开源图像处理工具
在刷短视频时，常看到情侣在景区拍照被路人“抢镜”，男朋友用手机将路人“P”掉，既贴心又有趣。最近我发现了一个纯前端实现的开源项目——inpaint-web，可在浏览器端删除照片中的部分内容，非常酷。该项目基于 WebGPU 和 WASM 技术，支持图像修复与放大，已在 GitHub 上获得 5.1k Star。项目地址：[GitHub](https://github.com/lxfater/inpaint-web)。
修己xj
1197 3
Inpaint-Web：纯浏览器端实现的开源图像处理工具
mao29955
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具，可以较为准确地检测 JavaScript 中的内存泄漏问题，并帮助我们找出潜在的泄漏点，以便采取相应的解决措施。
mao29955
1897 9
技能实验室
|
Web App开发 Java
使用java操作浏览器的工具selenium-java和webdriver下载地址
【10月更文挑战第12天】Selenium-java依赖包用于自动化Web测试，版本为3.141.59。ChromeDriver和EdgeDriver分别用于控制Chrome和Edge浏览器，需确保版本与浏览器匹配。示例代码展示了如何使用Selenium-java模拟登录CSDN，包括设置驱动路径、添加Cookies和获取页面源码。
技能实验室
1128 6
bibilili
|
Web App开发 定位技术 iOS开发
Playwright 是一个强大的工具，用于在各种浏览器上测试应用，并模拟真实设备如手机和平板。通过配置 `playwright.devices`，可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外，Playwright 还支持模拟地理位置、区域设置、时区、权限（如通知）和配色方案，使测试更加全面和真实。例如，可以在配置文件中设置全局的区域设置和时区，然后在特定测试中进行覆盖。同时，还可以动态更改地理位置和媒体类型，以适应不同的测试需求。
Playwright 是一个强大的工具，用于在各种浏览器上测试应用，并模拟真实设备如手机和平板。通过配置 `playwright.devices`，可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外，Playwright 还支持模拟地理位置、区域设置、时区、权限（如通知）和配色方案，使测试更加全面和真实。例如，可以在配置文件中设置全局的区域设置和时区，然后在特定测试中进行覆盖。同时，还可以动态更改地理位置和媒体类型，以适应不同的测试需求。
bibilili
1441 1

热门文章

最新文章

  • 1
    linux 本地终端 SSH 连接 gcp (Google Cloud Platform ) 配置教程
  • 2
    java.lang.ClassCastException: com.google.gson.internal.LinkedTreeMap cannot be cast to xxxxxx
  • 3
    Google Earth Engine——全球地表温度日间产品的基础数据集是MODIS陆地表面温度数据（MOD11A2）
  • 4
    Google提出的网页性能评价指标
  • 5
    Google Java编程风格指南
  • 6
    Google MapReduce架构设计
  • 7
    Google Earth Engine（GEE）——影像导出到assets中出现问题
  • 8
    Google Earth Engine（GEE）——Landsat8 SR数据除云
  • 9
    Google Earth Engine ——MCD43A3 V6反照率模型数据集是一个每天16天的产品。它提供了MODIS表面反射波段（波段1到波段7）以及3个宽光谱波段（可见光、近红外和短波）
  • 10
    Google Chrome Resize Plugin
  • 1
    PHP 程序员如何为 AI 浏览器（如 ChatGPT Atlas）优化网站
    452
  • 2
    入门指南：使用 Playwright MCP Server 为你的 AI Agent 赋予浏览器自动化能力
    1190
  • 3
    Playwright MCP 浏览器自动化框架全面解析
    1511
  • 4
    Apple Safari 26.0.1 发布 - macOS 专属浏览器 (独立安装包下载)
    571
  • 5
    Playwright MCP浏览器自动化全攻略
    1841
  • 6
    Apple Safari 26 正式版发布 - macOS 专属浏览器 (独立安装包下载)
    808
  • 7
    Playwright MCP浏览器自动化指南
    1597
  • 8
    “所见即所爬”：使用Pyppeteer无头浏览器抓取动态壁纸
    588
  • 9
    Browser Use：打造你的浏览器自动化助手
    1005
  • 10
    Browser Use 浏览器自动化 Agent：让浏览器自动为你工作
    2086

    • 相关电子书

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

    • 推荐镜像

    更多
  • google-chrome
    • 下一篇
    小红书笔记详情API深度解析与实战指南（2025年最新版）