如何在chrome浏览器中按照vue的调试工具

  • A+
所属分类:MAC教程

最近没什么事情,听说前段框架vue挺火的,就想折腾学习下这个超火的前端框架。框架确实简单,但是和传统的js html还是有些区别的。所以调试上面还是有些问题的。网上搜索了怎么安装Vue的调试工具,但是发现都有些问题,所以这里跟大家介绍下如何在chrome浏览器中按照vue的调试工具?
1.安装 vue的调试工具 vue-devtools
从https://github.com/vuejs/vue-devtools 下载vue-devtools
2.安装nodejs https://nodejs.org/en/download/
3.安装yarn https://yarnpkg.com/en/docs/install
4. 解压下载下来的vue-devtools-dev
在vue-devtools-dev 目录下执行
yarn install
yarn run build
5.扩展Chrome插件
打开Chrome浏览器 > 更多程序 > 拓展程序
点击加载已解压程序按钮, 选择 vue-devtools-dev > packages > shell-chrome 放入, 安装成功如下图

6. vue-devtools使用

vue项目, 打开f12, 选择vue就可以使用了.

vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试,如下图所示
如何在chrome浏览器中按照vue的调试工具

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: