vue-devtools安装

vue-devtools安装

简介

vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,现在已经可以在Firefox和Safari中安装。这可以提高我们的调试效率。

商店直接安装

Chrome Extension https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Firefox Addon https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools

Workaround for Safari https://github.com/vuejs/vue-devtools/blob/master/docs/workaround-for-safari.md

手动安装

  1. Github下载
  https://github.com/vuejs/vue-devtools.git

推荐将文件下载到浏览器插件文件夹中。正常情况下,Chrome插件扩 展程序的默认安装目录如下:

  • windows7中chrome插件默认安装目录位置:
  C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\Extensions
  • MAC中chrome插件默认安装目录位置:
  ~/Library/Application Support/Google/Chrome/Default/Extensions
  • Ubuntu中chrome插件默认安装目录位置:
  ~/.config/google-chrome/Default/Extensions

如果在这些不同操作系统中的chrome插件默认安装位置,没有找到插件。那么请通过下面的方式查看,如下图所示:

  • 地址栏输入chrome:version 回车
  • 用资源管理器打开"个人资料路径"栏的路径,该路径下的Extensions文件夹即默认的扩展安装路径

15898539871.jpg

  1. 进入下载的目录安装所需npm依赖包,编译文件
yarn install  安装所需npm依赖包
yarn run build  编译文件
  1. 添加至chrome游览器
浏览器输入地址“chrome://extensions/”进入扩展程序页面,将文件夹拖入浏览器即可

15898542681.jpg

3.1 打开开发者模式
3.2 加载已解压的扩展程序
3.3 选择目录下packages/shell-chrome

安装成功后开启项目后再控制台中会有如下显示。

16357444030646024ff3fbb.png

作者:知止至得
链接:https://www.jianshu.com/p/18906cade6c4
来源:简书