vue调试工具vue-devtools安装及使用

本文主要介绍 vue的调试工具 vue-devtools 的安装和使用

工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧

安装: 

1.到github下载：

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

2.在vue-devtools目录下安装依赖包

cd vue-devtools
cnpm install

3.修改manifest.json文件

把"persistent":false改成true

4.扩展Chrome插件

Chrome浏览器 >  更多程序 > 拓展程序

点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入, 安装成功如下图

5. vue-devtools使用

vue项目, 打开f12, 选择vue就可以使用了.

vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试

怎么样, 是不是感觉工作效率提高了呢

时间： 2024-08-08 22:11:46

vue调试工具vue-devtools安装及使用的相关文章

谷歌chrome浏览器vue调试工具vue-devtools的安装

先导 vue-devtools是一款基于chrome浏览器的插件,用于vue应用的调试,这款vue调试神器可以极大地提高我们的调试效率.帮助我们快速的调试开发vue应用. 第一步: 我们可以先从github上找到vue-devtools的项目,下载到本地.下载vue-devtools链接. 克隆方法:git clone https://github.com/vuejs/vue-devtools.git 第二步: 解压下载好的文件,进入到vue-devtools目录,安装项目所需要的依赖包. 安装

vue.js的devtools安装

安装 1.github下载地址:https://github.com/vuejs/vue-devtools 2.下载好后进入vue-devtools-master工程  执行npm install ----->npm run build. 3.修改manifest.json 中的persistent为true 4.打开谷歌浏览器设置--->扩展程序-->勾选开发者模式--->添加工程中的shells-->chrome的内容或者直接拖动shells-->chrome,至此

vue调试工具vue-devtools安装及使用方法

vue调试工具vue-devtools安装及使用方法 https://www.jb51.net/article/150335.htm 本文主要介绍 vue的调试工具 vue-devtools 的安装和使用 工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧 安装: 1.到github下载: ? 1 git clone https://github.com/vuejs/vue-devtools 2.在vue-devtools目录下安装依赖包 ? 1 2 cd

Vue开发之devtools

在使用vue-cli开发SPA应用的时候,经常看到控制台会提示 说是下载Vue Devtools扩展以获得更好的开发体验,那么vue-devtools是什么呢?我们不妨点击他们给的GitHub地址,一看究竟. https://github.com/vuejs/vue-devtools 这里我们看到已经获得将近3.7k star了,看来支持的人不少. 1.这里我们把它克隆到本地,或者直接下载 2.然后找到文件夹按住shift右击选择在此处打开命令行-Windows系统(Mac系统快速打开终端清参考

【22】Vue 之 Vue Devtools

vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev Vue Devtools安装(谷歌浏览器插件:) ①谷歌选择浏览器-更多工具-扩展程序 ②获取更多扩展程序 ③搜索并安装 ④找

Vue的介绍及安装和导入

08.27自我总结 Vue的介绍及安装和导入 本质就是封装一些js 一Vue的介绍 进式 JavaScript 框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目 三大主流框架之一:Angular React Vue 先进的前端设计模式:MVVM 这个我们可以和之前的mav设置模式结合其实他相当于mvcmc他将其中的逻辑控制又进行划分划分成视图的逻辑,数据的逻辑. 可以完全脱离服务器端,以前端代码复用的方式渲染整个页面:组件化开发 数据

Vue.js学习之——安装

Vue.js的安装方式有三种: 1.script引入 2.CDN 3.NPM 前两种不细说,重点讨论第三种--NPM安装 Vue.js提供了一个名为Vue-cli的官方命令工具,使用之前先进行如下准备工作: 1.安装nvm(Node Version Manager),简单来说就是一个管理node.js版本的控制器. 2.安装npm(Node package Manager),实际上就是个node包管理器.事实上在通过nvm安装node的时候,npm就已经附带了. 完成上述准备之后可以安装Vue了

vue学习 之 vuex安装及使用

1.安装  vuex npm install vuex --save 2.为什么使用vuex vue 包括  data()状态:template(视图):methods(方法).一个简单的单项数据流概念 但是当我们的应用遇到多个组件共享状态时.单项数据流 容易 破坏. 3. 使用vuex 再main.js 中注入 vuex import Vuex from 'vuex' Vue.use(Vuex) 在src 下创建文件夹store:创建store.js import Vue from 'vue'

Vue调试工具 vue-devtools

vue-devtools是一款基于chrome浏览器的插件,可以帮我们快速调试vue项目 vue-devtools手动安装: 第一步:找到vue-devtools的github项目(https://github.com/vuejs/vue-devtools),并将其clone到本地 第二步: 安装项目所需要的npm包 npm install  第三步:编译项目文件 npm run build 第四步:添加至chrome浏览器 1. 浏览器输入地址:chrome://extensions ,进入扩