VUE 配置vue-devtools调试工具及安装方法

1. 通过 Git 克隆项目到本地

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

2. Git 进入到 vue-devtools 所在目录，然后运行以下两个指令。

先运行 npm install 安装项目依赖

再运行 npm run build 进行编译生成

这两条指令的运行都需要一定的时间，请耐心等待，build 成功后如下图：

3.修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件。 将persistent 参数改为 true，如下图：

4. 将扩展程序添加到chrome浏览器

a. 打开浏览器扩展程序（也可以直接在地址栏输入 chrome://extensions/ 来打开）

b. 打开扩展程序后，开启 开发者模式，点击 加载已解压的扩展程序 按钮

c. 选择 vue-devtools > shells 目录下的 Chrome 文件夹，成功后如下图：

　加载成功后，先启用，然后点击旁边的刷新按钮，浏览器右上角就会出现一个Vue的logo图标

5. 到此调试工具安装完成。

需要注意的项： vue调试工具请在开发模式下使用，生产环境中不行。即 vue.min.js 文件下，调试工具无效。

下面看下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目录，安装项目所需要的依赖包。

安装方法：npm install  或者  cnpm install （注：cnpm命令是国内的镜像，速度会快一些）

第三步：

编译项目文件。

编译方法：npm run build

第四步：

修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件。 persistent参数改为true，访问协议是否包含：

1.http://*/*; 2.https://*/*; 3.file:///*;这三种情况

第五步：

添加至浏览器：

添加方法：在chrome浏览器输入地址：“chrome://extensions/”进入扩展程序页面，然后点击“加载已解压的扩展程序...”按钮；选择vue-devtools>shells目录下的Chrome文件夹；还需允许文件地址是否访问。如果看不到“加载已解压的扩展程序...”按钮，先勾选“开发者模式”。如下图:

第六步：

使用：

打开我们的vue应用，打开调试，点击vue扩展图标，就可以使用了。如下图：

注：如果点击vue扩展图标还是提示：Vue.jsis detectedonthis page. Open DevToolsand lookfor the Vue panel.
可以检查下你是否使用的是压缩版本的vue.min.js，使用vue.min.js默认为生产环境的，需要改为vue.js.

结束。

总结

以上所述是小编给大家介绍的VUE 配置vue-devtools调试工具及安装方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue项目安装插件并保存

    Vue项目安装插件并保存

    比如安装jszip插件的命令行如下: npm install jszip --save-dev 只有执行了--save-dev 才会将当前安装的插件版本保存在package.json文件中 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面相关链接

  • 图文详解vue框架安装步骤

    vue安装 首先第一步,安装javascript运行环境node.js,根据你系统是32位或64位安装文件如下图. 第二步,安装Nodejs下的包管理器,打开windows命令窗口,输入"npm install -g cnpm --registry=https://registry.npm.taobao.org"命令安装.如下图所示. 第三步,安装vue-cli脚手架构建工具,在windows命令窗口输入"cnpm install -g vue-cli",如下图所示

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

    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

  • vue-cli中安装方法(图文详细步骤)

    脚手架是指通过输入简单指令帮助你快速搭建好一个基本环境的工具. vue-cli 是vue.js的脚手架,用于快速自动生成vue.js+webpack的项目模板,这样大大降低了webpack的使用难度.下面是详细的安装步骤 vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 1.安装node,vue运行需要基于npm一定的版本,所以首先升级npm到最新的版本,而在安装的过程中个人比较喜欢淘宝的镜像,所以先安装cnpm(因为速度和稳定性都比较好) 2.在目标文件夹下

  • VUE 配置vue-devtools调试工具及安装方法

    1. 通过 Git 克隆项目到本地 git clone https://github.com/vuejs/vue-devtools.git 2. Git 进入到 vue-devtools 所在目录,然后运行以下两个指令. 先运行 npm install 安装项目依赖 再运行 npm run build 进行编译生成 这两条指令的运行都需要一定的时间,请耐心等待,build 成功后如下图: 3.修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件.

  • vue配置请求本地json数据的方法

    本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下: 在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加 const express = require('express') const app = express() const appData = require('../data.json') // 加载本地json文件 const seller = appDa

  • vue项目中运用webpack动态配置打包多种环境域名的方法

    在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法.(欢迎纠错,谢谢.) 1. 安装插件 cross-env,npm install cross-env --save -dev,用于配置命令行输入命令. 2. 修改package.json里的script命令: 配置了test(测试),ready(预发布),prod(正式)三种环境,npm run build 默认设置成 npm run build:p

  • 基于vue配置axios的方法步骤

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 1.背景 在项目开发中ajax请求是必不可缺少 一部分ajax请求不需要loading或则请求时间少于多少是不显示loading 项目中对请求的同一化

  • 在vue项目创建的后初始化首次使用stylus安装方法分享

    项目创建报错: This dependency was not found: * !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1d57e5ea","s

  • vue的安装及element组件的安装方法

    一.新建vue项目 1.首先需要下载nodejs,安装后打开命令窗口可以使用npm包管理工具 npm集成在node中的,所以直接输入npm-v查看npm的版本信息 2.npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm. 3.在命令行中输入 npm install -g cnpm--registry=http://registry.npm.taobao.org然后等待安装完成,就可以使用cnpm安装依赖包了,这里说一下最好

  • Vue配置marked链接添加target="_blank"的方法

    1."引入marked package.json "dependencies": { "marked": "^0.3.9" } import marked from "marked"; 1.修改生成的HTML的方法 const renderer = new marked.Renderer(); //https://github.com/markedjs/marked/issues/655#issuecomment-3

  • vue配置多页面的实现方法

    vue配置多页面的实现方法

    1.安装环境 ①安装node.js 并添加入环境变量PATH ②安装淘宝NPM镜像 $ npm install -g cnpm --registry=https://registry.npm.taobao.org ③安装webpack npm install webpack -g ④安装vue-cli脚手架 npm install -g vue-cli ⑤创建项目模板 vue init wepack vue-multipage-demo ⑥cmd进入到要放项目的文件夹 ⑦安装 cnpm inst

  • 配置vue全局方法的两种方式实例

    目录 1,前言 2,第一种方式 3,第二种方式 总结 1,前言 在Vue项目开发中,肯定会有这样一个场景:在不同的组件页面用到同样的方法,比如格式化时间,文件下载,对象深拷贝,返回数据类型,复制文本等等.这时候我们就需要把常用函数抽离出来,提供给全局使用.那如何才能定义一个工具函数类,让我们在全局环境中都可以使用呢?请看下文分解. PS:本文vue为2.6.12 2,第一种方式 直接添加到Vue实例原型上 首先打开main.js,通过import引入定义的通用方法utils.js文件,然后使用V

随机推荐