请选择 进入手机版 | 继续访问电脑版

Vue 调试工具 vue-devtools 安装及使用

[复制链接]
时间苍白了等待 发表于 2020-12-31 20:25:43 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
在 Chrome 欣赏器上安装 Vue Devtools 工具



Vue.js devtools是基于Google Chrome欣赏器的一款调试vue.js应用的开辟者欣赏器扩展,可以在欣赏器开辟者工具下调试代码。
下载 Devtools



  • 一,直接去 github 官网,下载 devtools 源码,地点:https://github.com/vuejs/vue-devtools

  • 二、使用 git clone 命令,将源码克隆到本地
    1.   git clone https://github.com/vuejs/vue-devtools
    复制代码
    下载后,源码如下:

安装 Devtools



  • 下载完成后,进入 vue-devtools-master 目次 执行 yarn install`, 下载依赖
    1.   cd vue-devtools-master  npm install   # cnpm install  # yarn install
    复制代码
    依赖安装完成,效果如图:

  • 然后执行 npm run build,编译源步伐
    1.   npm run build  # yarn build
    复制代码
    编译完成,效果如图:

    编译完成,目次布局如下:

修改 mainifest.json



  • 修改 packages/shell-chrome 目次下的 mainifest.json 中的 persistant 为 true:

  • “persistent”: false 改成 “presistnet”: true

Chrome 扩展插件



  • 打开谷歌欣赏器,点击右上角的扩展符号,点击 更多工具,选择 扩展步伐

  • 选择 开辟者模式,并点击 加载已解压步伐扩展步伐 按钮

  • 选择 vue-devtools-master --> packages --> shell-chrome 放入,安装乐成并启用,效果如图:

注意


  • vue必须引入开辟版,使用min压缩版是不能使用devtools举行调试的;
  • 安装后,需要重启欣赏器,才可以使用。
Vue Devtools 使用



  • 启动 vue 项目, 打开 F12 开辟者模式, 选择 Vue 就可以使用了。

    vue是数据驱动的, 这样就能看到对应数据了, 方便我们举行调试。

来源:https://blog.csdn.net/zimeng303/article/details/111934896
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )