mac下安装Vue DevTools
2019-03-28 本文已影响0人
啊杜杜杜
一、下载
去Vue DevTools 项目的官方主页GitHub上下载。因为直接在Chrome应用商店下载需要翻墙。
官方地址:https://github.com/vuejs/vue-devtools.git
二、安装项目所需的依赖包— npm 包
进入下载好的vue-devtools-dev文件夹的目录,通过命令输入以下代码
npm install
三、编辑项目文件
npm run build
四、修改persistent
进入vue-devtools-dev文件夹下的shells -> chrome -> manifest.json ,找到persistent,将其值修改为true

五、添加至Chrome浏览器
1、打开chrome浏览器的扩展程序页面,可通过以下方式进入页面:
- 浏览器输入地址: chrome://extensions/
- 浏览器右上角 — 更多工具L — 扩展程序(E)

2、将chrome
文件(vue-devtools-dev -> shells -> chrome)直接拖进去即可。
六、打开本地项目(localhost:8080)
,进入开发者模式即可看到。
小贴士:有时候看不到是因为窗口太小了,被藏起来了,可以点击》找到 vue


可以选中它,然后拖动它调到自己想放的位置。
