vue-devtools浏览器调试工具离线安装教程

这篇具有很好参考价值的文章主要介绍了vue-devtools浏览器调试工具离线安装教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue-devtools浏览器调试工具离线安装教程

vue-devtools浏览器调试工具离线安装是下载源码,通过本地编译之后,在放到浏览器上

1.下载源码

[不推荐]在github下载devtools源码,地址:https://github.com/vuejs/vue-devtools
[推荐]在gitee(码云)下载devtools源码,地址:https://gitee.com/mirrors/vue-devtools?_from=gitee_search
我这边选择是标签里的v6.5.0
vue-devtools浏览器调试工具离线安装教程
vue-devtools浏览器调试工具离线安装教程
然后直接选择压缩包下载
vue-devtools浏览器调试工具离线安装教程

2.执行安装插件包命令

下载之后解压文件,在当前文件目录下,执行命令:

> yarn install

安装完成之后,再执行

> yarn run build

编译完成之后,我们找到shell-chrome
vue-devtools浏览器调试工具离线安装教程
修改shells-chrome目录下的mainifest.json 中的persistant为true
(有时候已经是true)
vue-devtools浏览器调试工具离线安装教程

3.安装插件

打开谷歌浏览器,找到拓展程序
vue-devtools浏览器调试工具离线安装教程
打开之后,把shell-chrome拖拽到这里界面就能安装
vue-devtools浏览器调试工具离线安装教程
安装之后成功之后
vue-devtools浏览器调试工具离线安装教程
在开发中模式F12里,会多出一项Vue
vue-devtools浏览器调试工具离线安装教程文章来源地址https://www.toymoban.com/news/detail-492776.html

到了这里,关于vue-devtools浏览器调试工具离线安装教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • chrome插件开发实例07- Vue调试插件vue-devtools

    目录 一、为什么使用vue-devtools插件 二、如何安装 三、使用源码方式,安装Vue-devtools插件

    2024年02月13日
    浏览(44)
  • Chrome浏览器中的vue插件devtools的下载方式(使用Chrome应用商店/科学上网情况下)

    目录 devtools对前端来说的好处——开发预览、远程调试、性能调优、Bug跟踪、断点调试等  下载步骤:  测试阶段:  最近做项目要使用devtools这个vue插件。 首先先想个办法搞个加速器之类的,好实现科学上网。 在Chrome浏览器中访问以下网址: Chrome应用商店网址: https://c

    2024年02月14日
    浏览(41)
  • 谷歌浏览器调试vue项目

    前言          众所周知,在项目过程中我们常常遇到的一个问题就是本地调试的时候没问题但是发布到线上的时候就不行了。在时间充裕的情况下,我们当然可以慢慢调试,但是那是不可能的。在线上遇到问题时,难免会倍感压力和焦虑,这个时候就有必要强化前端的调试能力了

    2024年02月03日
    浏览(47)
  • 实现微信内置浏览器分享功能(前期准备+VUE前端部分代码+调试+坑记录)

    一、基础准备 1、登录微信公众号(需已认证),找到[【设置与开发】[【公众号设置】【功能设置】【js接口安全域名],在下面填写你的域名。 2、在【设置与开发】【基本配置】中拿到 appid开发者密码 appSecret ,给后端用生成签名时用到。 二、前端代码部分 1、下载微信sdk 2、

    2024年04月17日
    浏览(38)
  • chrome 浏览器在 112 正式版本以及 114 canary 版本从 devtools 控制台复制文本不会复制高亮显示的文本?

    我的 chrome 浏览器版本如下: 版本 112.0.5615.138(正式版本) (64 位) 今天我在写代码的时候报错了,看了一下控制台浏览器,是某个属性没有定义,然后我双击这个属性名称 ctrl + c 复制,最后粘贴的时候发现 文本不正确 , 离了个大谱! 我特意找了一下这个 bug:https://bu

    2023年04月22日
    浏览(58)
  • 下载、编译、安装、使用 vue-devtools

    不少人都想下载 vue-devtools插件,但又不会做,今天我做个比较详细的笔记 查看当前的devtools的版本可以去这个网站看右侧的个v几点几的,就是版本号 https://github.com/vuejs/devtools 目录 第一个方法:使用极简插件 第一步:查找极简插件 第二步:搜索vue-devtools  第三步:点击推

    2024年03月14日
    浏览(48)
  • vue-devtools-简介、下载、安装、配置、使用

    vue-devtools是一款基于chrome游览器的插件,可以用于调试vue应用,也可以用来辅助我们找到各页面对应的Vue.js文件路径,这将极大地提高我们的开发和调试效率。 下载路径:https://github.com/vuejs/vue-devtools 将下载好的文件夹放在任意磁盘下 前提:先安装好node和npm打开cmd,进入d

    2024年02月12日
    浏览(35)
  • 常用浏览器调试方法

    # 1 调试是什么? # 1.1 调试是什么? **Bug的起源**:当时人们还在使用第一代真空计算机(马克二型),这种计算机是依靠控制电流来改变开关,从而实现控制,但是它会发出大量的热和光。 1949年9月9日,天气非常炎热,有一只娥死在了70号继电器里面,造成电路不通,机器死

    2024年02月14日
    浏览(39)
  • 浅谈浏览器调试

    至此, 全篇结束。

    2024年02月01日
    浏览(30)
  • Chrome 浏览器远程调试

    打开浏览器的远程调试 Chrome浏览器的快捷方式,右键选择“属性”,在目标一栏加上 --remote-debugging-port=9222 ,后面的端口可以自己定义,完成之后启动浏览器。 我们拿另外一个浏览器测试下 打开新版的edge浏览器,地址栏输入 edge://inspect/#devices ,如果是chrome则需要输入 chr

    2024年02月13日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包