前两条出自:

https://link.zhihu.com/?target=http%3A//www.orzzone.com/vuejs-project-debug.html

https://www.zhihu.com/question/41127712

一、Vue.js devtools开发工具的使用

在Chrome或Firefox浏览器的扩展插件仓库里搜vue devtool,安装Vue.js devtools后结合下面这张官方动图,其他就不多说了,这不是本文重点。

二、使用debugger和sourcemap调试Vue组件

针对vue-cli webpack官方脚手架,打开build/webpack.dev.conf.js文件,找到下面这句:

devtool: '#cheap-module-eval-source-map',

将其修改为:

devtool: '#eval-source-map ',

要修改的地方已经都改好了,就是这么简单,惊不惊喜,意不意外。

现在是具体调试了。假设我们想调试App.vue这个组件,可以在想要调试的代码前添加debugger方法,如下图所示:

然后运行npm run dev(如果你没改命令的话,默认开始命令是这个),启动服务后刷新页面(刷新前先把浏览器开发者工具打开),可以看到在程序进入App.vue组件mounted这个组件生命周期钩子里后,指定到debugger处时程序就被debug了。如下图所示,剩下的大家应该都很熟悉了。可以看到,此处显示的代码就是我们组件里的实际代码,并非被我们编译混淆后的那种代码,可读性非常好。

VUE源代码调试方法的更多相关文章

  1. 基于ivy的源代码调试方法

    项目PORJ_TEST是项目PROJ的测试项目.在它的ivy中引用了PROJ的jar包.由于PROJ正处于开发阶段,源代码更改频繁, 在运行PROJ_TEST中的测试时,需要进入PROJ的jar包内部 ...

  2. vue调试方法

    vue调试方法有如下三种 1.chrome谷歌插件vue-devtools 2.console.log().console.error().alert().debugger 3.设置全局变量,分为两种 ...

  3. VUE程序调试的方法

    目录 VUE程序调试的方法 1.写本文的背景 2.调试与测试 3.Console调试法 3.1 添加console.log指令 3.2 调出温度界面如下 3.3 Google浏览器的Console窗口 ...

  4. 二十四、【开源】EFW框架Winform前端开发之项目结构说明和调试方法

    回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan ...

  5. Linux内核调试方法总结【转】

    转自:http://my.oschina.net/fgq611/blog/113249 内核开发比用户空间开发更难的一个因素就是内核调试艰难.内核错误往往会导致系统宕机,很难保留出错时的现场.调试内核 ...

  6. Cortex-M3/4的Hard Fault调试方法

    1 Cortex-M3/4的Fault简介 Cortex-M3/4的Fault异常是由于非法的存储器访问(比如访问0地址.写只读存储位置等)和非法的程序行为(比如除以0等)等造成的.常见的4种异常及产 ...

  7. 【转】Linux内核调试方法总结

    目录[-] 一  调试前的准备 二  内核中的bug 三  内核调试配置选项 1  内核配置 2  调试原子操作 四  引发bug并打印信息 1  BUG()和BUG_ON() 2  dump_sta ...

  8. Perl的调试方法

    来源: http://my.oschina.net/alphajay/blog/52172 http://www.cnblogs.com/baiyanhuang/archive/2009/11/09/ ...

  9. java web 入门级 开发 常用页面调试方法

    这里介绍一下Java web 入门级开发中常用的代码调式方法;  (  仅供入门级童靴 参考) ; 工具: chrome  浏览器 (版本越高越好); Java web 入门级开发 主要就是两个方面: ...

随机推荐

  1. NormalMap原理详细解析

    NormalMap的实现标志着对渲染流水线的各个环节以及矩阵变化有了正确和深入的认识.这里记录一下学习过程,以及关于NormalMap的诸多细节. 刚开始想要实现NormalMap程序的时候,查阅的是 ...

  2. IE6789浏览器使用console.log类似的方法输出调试内容但又不影响页面正常运行

    问题来源:外网IE下,触发js报错.经检测,未清除console造成.清除console后,解决. 问题原因:console.log 原先是 Firefox 的“专利”,严格说是安装了 Firebug ...

  3. xcconfig

    [xcconfig] 1.When you can use a .xcconfig file? Use .xcconfig files if you find yourself changing th ...

  4. (转)【javascript基础】原型与原型链

    原文地址:http://www.cnblogs.com/allenxing/p/3527654.html 前言 原型是什么 理解原型对象 原型对象 isPrototypeOf hasOwnProper ...

  5. 深夜配置一把struts2

    在intellij idea里面配置出来了struts2的一个Helloworld,因为换了工具,在网上查了很多关于IDEA配置它的方式,好多是用Maven解决依赖关系的.于是按照网上的来,发现很多东 ...

  6. osx上使用'cd'命令跳转到别名(alias)目录

    在mac上使用windows的共享目录时,在terminal中时法使用cd的,会提示"xxx 不是目录",经过一番的查找,发现了Mac Terminal 'cd' to folde ...

  7. merge sort 的javascript实现

    递归 上一篇blog里,用js实现了quicksort算法,quicksort算法是一个递归调用过程. 递归是一种非常强大的编程思想,它广泛的的存在于各种语言当中,尤其lisp的各种方言中,大量的使用 ...

  8. Beginning Asp.Net Security 读书笔记-----XSS

    几个月前通过Veracode对代码进行动态和静态安全扫描,扫出了数以千计的安全bug,基本上都是top 10的,安全漏洞. 其中CWE80,CWE601数量最多.具体CWE的定义可参考http://c ...

  9. Lock的await/singal 和 Object的wait/notify 的区别

    在使用Lock之前,我们都使用Object 的wait和notify实现同步的.举例来说,一个producer和consumer,consumer发现没有东西了,等待,produer生成东西了,唤醒. ...

  10. “全栈2019”Java异常第十章:throw与throws区别详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...