chrome安装vue-devtools

由于在chrome上打不开应用商店,准备离线安装。
1 . 下载chrome扩展插件。

在github上下载压缩包并解压到本地,github下载地址:https://github.com/vuejs/vue-devtools

  1. npm install 安装依赖包;

下载完成后打开命令行cmd进入vue-devtools-dev文件夹,
npm install
如果安装太慢,可以使用npm淘宝镜像安装依赖包地址:http://npm.taobao.org/
命令行安装npm淘宝镜像:$ npm install -g cnpm --registry=https://registry.npm.taobao.org
之后我们就可以使用cnpm代替npm安装依赖包了。

  1. npm run build
    npm run build 执行完,会在shells>chrome下的src文件夹里生产如上图所示的几个js文件;
  2. 打开shells>chrome>manifest.json并把json文件里的"persistent":false改成true
  3. 扩展chrome插件
    1.打开chrome浏览器,打开更多工具>扩展程序;
    2.再点击加载已解压的扩展程序,然后把shells>chrome文件夹放入
  4. 测试安装

在插件的目录下执行npm run dev,这个时候我们的插件就可以运行了,打开localhost:8100 可以看到插件已经安装并运行了。

原文地址:https://www.cnblogs.com/denken/p/11118999.html

时间: 2024-11-10 01:33:50

chrome安装vue-devtools的相关文章

在浏览器上安装 Vue Devtools工具

Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码. 1)首先在github下载devtools源码,地址:https://github.com/vuejs/vue-devtools. 2)下载好后进入vue-devtools-master工程 执行cnpm install, 下载依赖,然后执行npm run build,编译源程序. 3)编译完成后,目录结构如下: 修改shells.chrome目录

VUE devtools 调试工具安装 让vue飞起来

安装: 1.到github下载: git clone https://github.com/vuejs/vue-devtools 2.在vue-devtools目录下安装依赖包 cd vue-devtools npm install || cnpm install -- npm&cnpm i 到文件夹shells下 chrome 下打开manifest.json 文件 把"persistent":false改成true 接着 num run build 打开chrome浏览器

Vue DevTools 安装应用

1.https: //github.com/vuejs/vue-devtools  从这上面下载Vue DevTools: 2.npm install(cnpm install) && npm run build ; 3.进入到 vue-devtools/shells/chrome/manifest.json,修改persistent为true. 4.拖入谷歌浏览器扩展工具界面: 5.勾选允许访问文件网址: 6.一般默认服务器环境自动启用,想要在非服务器单页面启动 ,必须在vue文件中加上

Chrome 浏览器安装Vue插件方法 (十分详细)

博主最近在研究Vue,无奈新手想安装Chrome的Vue插件,整理下安装流程: 1.首先去github下载vue.zip文件插件(还有npm安装方法这里就不介绍了自行百度) 2.下载后解压 3.然后通过npm下载相关依赖,可能有些同学没有安装npm,博主也是,这里介绍下安装npm的方法. 从node.js中文网站下载node.js,里面包含npm 4.下载完成直接安装,因为博主已安装成功就不截图,验证npm是否安装成功命令,打开CMD输入 node -v npm -v 如果出现对应版本号,说明安

使用yarn 安装 vue.js devtools(2020.1.6)

!!!坑:一言以蔽之:npm太慢,需要注册下taobao镜像 新年了,重装了系统,也就需要重装vue devtools了. clone了vue-devtools包. 安装办法如下: 1. Clone this repo2. `yarn install`3. `yarn run dev`4. A plain shell with a test app will be available at `localhost:8100`. -----------------------------------

chrome中安装Vue调试工具vue-devtools

极简插件 下载Vue Devtools 打开chrome://extensions/   开发者模式 将Vue.js Devtools_5.3.3_chrome.zzzmh.cn.crx拖拽进去即可 原文地址:https://www.cnblogs.com/LYD312/p/12234894.html

【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脚手架及其他vue工具

一.安装vue脚手架   网上有许多教程,基本都是大同小异,不在这里班门弄釜了,具体可以参照下面链接这个博客. https://www.cnblogs.com/loveyaxin/p/7094089.html 二.安装vue工具之vue-devtools-dev 其实安装这个工具比安装vue脚手架更简单,注意细节就好. 1.在GitHub上下载压缩包,下载地址:https://github.com/vuejs/vue-devtools 2.将文件解压到任意盘,然后cmd到vue-devtools

WebStorm+Chrome调试Vue步骤

在调试时请 注意 : 在WebStorm中启动调试时,WebStorm会根据你设置的url,自动打开新的Chrome浏览器进程访问这个设置的url,而且这个浏览器页面和你平常看到的浏览器差异会比较大,看不到书签栏,也看不到你先前所装的所有插件.这是因为平常我们打开Chrome浏览器进程时,并不会添加–remote-debugging-port选项,而WebStorm无法让已经打开的Chrome实例支持调试,所以必须重新打开一个新的Chrome浏览器进程,而且不能和原来的Chrome浏览器进程使用

Vue2.0 实战项目(一) ——安装vue.cli

1.打开Vue脚手架的github地址:https://github.com/vuejs/vue-cli,在README查看如何安装 2.通过npm安装vue $ npm install -g vue-cli 3.通过webpack安装 $ vue init webpack myProjectName 4.切换到创建的项目目录,然后安装依赖文件 npm install