Chrome如何安装vue-devtools

简介: Chrome如何安装vue-devtools

一、GitHub上下载

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

由于github很多时候网速较慢,可以先导入到gitee,软后下载。

git clone https://openharmony.gitee.com/yjtzfywh/vue-devtools.git

二、安装依赖和打包

 

#进入文件
cd vue-devtools
#使用淘宝镜像加速
npm config set registry https://registry.npm.taobao.org
#安装依赖
npm i

 #项目打包
npm run build
 

  • 在vue-devtools文件夹下:shells>chrome>manifest.json,将配置里的persistent的值修改为true;
  • D:\coding\vue-devtools\shells\chrome

三、设置

进入谷歌的扩展程序 -》 开启开发者模式 -》 加载已解压的扩展程序 -》 选择“vue-

devtools>>shells>>chrome” ,将chrome文件夹导入 ,完成即可。


四、重启浏览器打开项目

看到vue标识

打开开发者工具,进行调试

 

相关文章
|
9月前
|
Web App开发 Linux
只需五步,在Linux安装chrome及chromedriver(CentOS)
只需五步,在Linux安装chrome及chromedriver(CentOS)
3627 1
|
Web App开发 Linux 开发工具
Centos7 yum 安装chrome
Centos7 yum 安装chrome配置yum源vim /etc/yum.repos.d/google-chrome.repo写入以下内容[google-chrome]name=google-chromebaseurl=http://dl.google.com/linux/chrome/rpm/stable/$basearchenabled=1gpgcheck=1gpgkey=http...
487 0
|
4月前
|
Web App开发 JSON JavaScript
vue学习:chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
706 0
vue学习:chrome 中 vuetools 开发插件 的下载、安装
|
6月前
|
Web App开发 资源调度 JavaScript
Chrome 安装 Vue Devtools 调试工具
Chrome 安装 Vue Devtools 调试工具
60 0
|
7月前
|
Web App开发 JavaScript 开发者
谷歌浏览器chrome安装vue调试插件Vue-Devtools
谷歌浏览器chrome安装vue调试插件Vue-Devtools
426 0
|
9月前
|
Web App开发 监控 JavaScript
chrome安装vue插件 vue-devtools
chrome安装vue插件 vue-devtools
2533 0
|
9月前
|
Web App开发 内存技术
chrome插件安装方法教程
chrome插件安装方法教程
103 0
|
9月前
|
Web App开发 Windows
Windows【Chrome浏览器 01】首次安装的谷歌Chrome浏览器出现无法打开此页面问题处理(详细图文步骤)
Windows【Chrome浏览器 01】首次安装的谷歌Chrome浏览器出现无法打开此页面问题处理(详细图文步骤)
193 0
|
28天前
|
Web App开发 人工智能 JSON
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
AutoMouser是一款Chrome扩展程序,能够实时跟踪用户交互行为,并基于OpenAI的GPT模型自动生成Selenium测试代码,简化自动化测试流程。
135 17
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
|
5月前
|
Web App开发 数据采集 存储
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
本文探讨了如何利用Chrome DevTools Protocol (CDP) 与 Selenium WebDriver 提升浏览器自动化效率,结合代理IP技术高效采集微博数据。通过CDP,开发者可直接操作浏览器底层功能,如网络拦截、性能分析等,增强控制精度。示例代码展示了如何设置代理IP、cookie及user-agent来模拟真实用户行为,提高数据抓取成功率与稳定性。适用于需要频繁抓取互联网数据的应用场景。
708 3
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率