脚本之家

电脑版
提示:原网页已由神马搜索转码, 内容由www.jb51.net提供.
您的位置:首页网络编程JavaScriptjavascript类库vue.js→ dev-tool安装方法

关于dev-tool安装方法(手动安装版)

  更新时间:2024年07月01日 11:16:57  作者:YOGiii 
这篇文章主要介绍了关于dev-tool安装方法(手动安装版),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

记录一下vue调试神器dev-tool的安装过程,由于是在公司内网,也不方便挂梯子,所以手动安装——下载源码在本地编译,再添加扩展程序的方式安装。

过程如下:

一、dev-tool源码获取

这里可以选择自己需要的版本,试了挺多版本,在安装的时候会遇到各种的文件缺失的问题,所以这里选择了一个v5.1.1版本,这个安装的过程基本比较顺畅,没什么大的问题。

版本切换

源码下载两种方式,

第一种直接用git下载,git访问会出现连接失败的报错,有SSL验证和代理的问题,具体的问题遇到了可以自行搜索解决方法;

这里为了方便直接点击Download ZIP下载压缩包就好。

源码获取

二、源码编译

这一步主要是安装依赖和编译源码,手动安装的过程官网教程也说得非常清楚,如果下载的版本一样的话直接执行以下指令就行

npm install//安装依赖,如果使用yarn进行包管理则yarn install
npm run build

完成后可以在文件夹里找到这个文件

chrome扩展文件

三、添加扩展程序

打开chrome浏览器,自定义及控制-更多工具-扩展程序,切换成开发者模式,点击加载已解压的扩展程序,选择第二步中的shells/chrome文件即可,

加载扩展程序

扩展程序的配置如下:

扩展程序配置

四、愉快地使用dev-tool

到此为止就可以使用dev-tool进行调试了,随便开一个vue项目,打开f12,切换到vue就ok了

dev-tool使用

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

    • 在Vue中, v-slot 指令用于定义插槽的模板内容,v-slot 指令可以用于标签或组件标签上,以便在子组件中使用插槽,这篇文章主要介绍了vue v-slot指令,需要的朋友可以参考下
      2023-08-08
    • 今天小编就为大家分享一篇vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
      2019-11-11
    • 今天要讲讲Vue2.0了。最近将公司App3.0用vue2.0构建了一个web版,因为是第一次使用vue,而且一开始使用的时候2.0出来一个月不到,很多坑都是自己去踩的,现在项目要上线了,所以记录一些过程
      2017-01-01
    • EventBus是一种发布/订阅事件设计模式的实践。这篇文章主要介绍了vue采用EventBus实现跨组件通信及注意事项,需要的朋友可以参考下
      2018-06-06
    • 这篇文章主要为大家详细介绍了vue实现表单录入小案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
      2019-09-09
    • 这篇文章主要介绍了详解关于vue2.0工程发布上线操作步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2018-09-09
    • 本文主要介绍了Vue3 style CSS 变量注入的实现,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
      2021-07-07
    • 本文主要介绍了mini-vue渲染的简易实现,主要简单来实现一个虚拟dom渲染真实dom,以及更新的方法。具有一定的参考价值,感兴趣的小伙伴们可以参考一下
      2021-08-08
    • slot元素是一个插槽出口,标示了父元素提供的插槽内容将在哪里被渲染,这篇文章主要给大家介绍了关于vue3 setup语法糖中获取slot插槽的dom对象的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
      2024-04-04
    • 下面小编就为大家分享一篇axios拦截设置和错误处理方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
      2018-03-03

    最新评论