11vue学习——在chrome扩展程序中安装vue-devtools插件
前言
做前端开发的IT工程师应该比较熟悉这款工具,可以边侧边栏窗格中的页面,边检查代码。由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么。但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试。我们今天就来了解一下。
步骤
1. 到 https://github.com/vuejs/vue-devtools 下载vue-devtools插件
将压缩包下载到你自定义的路径(例如我是下载到 G:\software\VSCode 的)之后,将文件解压2. 打开cmd 进入到你放置插件的路径下
(1)执行 npm install
执行成功之后会出现下面的界面
(2)执行 npm run build
执行成功之后会出现下面的界面
3. 修改该文件夹下 的 shells 文件夹 里面的 chrome 文件夹里面的 manifest.json 文件
将persistent 的值修改为 true
4. 打开chrome浏览器的扩展程序
将 shells 文件夹 下 chrome 拖入扩展程序中
5. 完成界面
当你打开包含vue代码的网页时,控制台出现以下界面的时候你就大功告成了》