zoukankan      html  css  js  c++  java
  • Vue调试神器之Vue.js devTools

    Vue项目中使用Vue.js devTools这款调试神器,可以极大程度的提高我们的开发效率。

    安装

    1、打开Chrome网上应用商店安装插件(自墙),直接搜索devTools安装即可。贵宾传送阵,请戳这里→Chrome网上应用商店

    2、从github上下载到本地。贵宾传送阵,请戳这里→vue-devtools

    1)、进入到/vue-devtools目录下(npm install或者cnpm install)安装项目所需依赖。

    2)、安装完依赖后(npm run build或者cnpm run build)编译项目。

    3)、编译完项目后,在/vue-devtools/shell/chrome/manifest.json中修改persistent参数false为true。

    4)、在chrome扩展程序页面,打开“开发者模式”,点击“加载已解压的扩展程序”按钮,选择你本地的.../vue-devtools/shell/chrome文件夹, 添加完成后,勾选允许文件地址是否访问。

    安装完成后devTools的图标会出现在浏览器的菜单栏中。

    以上两种安装方式告一段落。下面让我们在vue项目中体验一下这款调试神器吧。

    使用

    运行Vue项目,在Chrome浏览器中展示项目(浏览器菜单栏中的devTools图标会亮起),按F12打开开发者工具,在开发者工具的菜单栏最后面会看到Vue,选中它就可以尽情的使用了。

    当然这样一顿行云流水的操作下来,有些人会一次成功,而有些人则不会成功,浏览器菜单中的devTools图标亮滴鸭批,但是就是在开发者工具的菜单栏最后面看不到Vue。嗯~~~,怎么肥事小老弟?

    请查看项目的index.html中,对vue.js的引用。你肯定使用了压缩版的vue.min.js,使用vue.min.js默认为生产环境,会导致devTools不显示,改为vue.js即可。

    原文地址:https://segmentfault.com/a/1190000017195452

  • 相关阅读:
    IntelliJ IDEA 常用快捷键
    IntelliJ IDEA 高效率配置
    Eclipse 设置保存代码时自动格式化
    SQL Server 事务隔离级别详解
    网络安全,互联网金融,高并发
    net user命令集合详解
    SQL不同服务器数据库之间的数据操作整理(完整版)
    sql优化
    在 Windows 上遇到非常多 TIME_WAIT 連線時應如何處理
    mvc和iis工作原理
  • 原文地址:https://www.cnblogs.com/lovellll/p/10121820.html
Copyright © 2011-2022 走看看