欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

详细介绍vue.js中的devtools安装教程(图文)

程序员文章站 2022-04-10 17:33:11
...
本篇文章主要介绍了详解vue.js的devtools安装 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

安装

2.下载好后进入vue-devtools-master工程 执行npm install ----->npm run build.

3.修改manifest.json 中的persistent为true

详细介绍vue.js中的devtools安装教程(图文)

4.打开谷歌浏览器设置--->扩展程序--》勾选开发者模式---》添加工程中的shells-->chrome的内容或者直接拖动shells-->chrome,至此恭喜已经安装成功!!!

详细介绍vue.js中的devtools安装教程(图文)

5.打开自己的vue项目中,如果是有vue-cli构建的项目,执行npm run dev,打开http://localhost:8080/ 服务器调试地址;至此完成devtools的安装;

使用

打开vue项目,在控制台选择vue:

详细介绍vue.js中的devtools安装教程(图文)

5.可操作组件查看信息变化(例如分页组件)选择第一页:

详细介绍vue.js中的devtools安装教程(图文)

选择最后一页:

详细介绍vue.js中的devtools安装教程(图文)

以上就是详细介绍vue.js中的devtools安装教程(图文)的详细内容,更多请关注其它相关文章!

相关标签: vue.js,devtools