如果我们不用单文件组件开发,一般直接<script src="dist/vue.js">引入开发版vue.js
这种情况下debug也是很方便的,只不过vue.js文件代码是rollup生成的


这种情况下debug,看源码也是很方便的

但是如果能够在vue项目中的src目录下中的文件打断点调试就更好了。

那怎么做到呢?

其实很简单
1. 打开 build/config.js 文件
找到 genConfig() 函数
该函数下有个config对象,给该对象添加一个属性和值: sourceMap: true

2. 然后重新 npm run dev, 会发现dist目录下多了一个vue.js.map文件
3. 最后在你的xxx.html(这里start.html)引入vue.js, 在浏览器中打开该xxx.html(这里start.html)文件, 就可以愉快的调试了


然后就可以愉快debug了.这对我来说很重要,能不能debug决定了我有没有耐心去看源码。

其实以前我最关心的是通过webpack打包后的文件,断点总是打偏,遇到这种情况
试试 在你想要打断的地方,偷偷偷的写上debugger,运行时会停在你所写的地方,
这种方式我好像记得犀牛书上也有过,只不过就觉得在浏览器上直接打断点很爽,爽过头
就把该调试方法慢慢的淡忘了。

总结:前面4篇笔记包括该篇笔记,都是前戏。
了解了vue源码的入口
了解了vue构造函数的静态属性和方法
了解了vue原型方法
以及怎么去调试vue源码
前戏做好了,后面才会激情乱射。下篇笔记,会用个小例子走下vue实例从生成到渲染到页面的
整个过程。

感谢涛哥, 为我解答部分疑问。

Vue2.x源码学习笔记-Vue源码调试的更多相关文章

  1. Vue2.x源码学习笔记-Vue构造函数

    我们知道使用vue.js开发应用时,都是new Vue({}/*options*/) 那Vue构造函数上有哪些静态属性和方法呢?其原型上又有哪些方法呢? 一般我都会在浏览器中输入Vue来look se ...

  2. Vue2.x源码学习笔记-Vue实例的属性和方法整理

    还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...

  3. Vue2.x源码学习笔记-Vue静态方法和静态属性整理

    Vue静态方法和静态属性,其实直接在浏览器中可以查看到的,如下 圈起来的是其静态属性,但是有的属性对象中的属性的值又是函数.未圈起来的则是函数. 其实它来自如下各个目录下的js文件 // src/co ...

  4. Vue源码学习(一):调试环境搭建

    最近开始学习Vue源码,第一步就是要把调试环境搭好,这个过程遇到小坑着实费了点功夫,在这里记下来 一.调试环境搭建过程 1.安装node.js,具体不展开 2.下载vue项目源码,git或svn等均可 ...

  5. 最新 Vue 源码学习笔记

    最新 Vue 源码学习笔记 v2.x.x & v3.x.x 框架架构 核心算法 设计模式 编码风格 项目结构 为什么出现 解决了什么问题 有哪些应用场景 v2.x.x & v3.x.x ...

  6. vue 2.0源码学习笔记—new Vue ( Vue 初始化过程 )

    new Vue(Vue 初始化) 一个vue实例化到底经历了什么?已下是博主自己的总结,不正确的地方请指出,谢谢~ 一.简述 从使用角度来看,挂载的顺序如下 1. $slots 2. $scopedS ...

  7. Underscore.js 源码学习笔记(下)

    上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...

  8. Underscore.js 源码学习笔记(上)

    版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}());  这样的东西,我们应该知道这是一个 IIFE(立即执行 ...

  9. AXI_LITE源码学习笔记

    AXI_LITE源码学习笔记 1. axi_awready信号的产生 准备接收写地址信号 // Implement axi_awready generation // axi_awready is a ...

随机推荐

  1. 【手记】解决EXCEL跑SQL遇“查询无法运行或数据库表无法打开...”

    报错: 解决:在语句开头指定SET NOCOUNT ON 就是这么神cao奇dan. -END-

  2. &amp;

    在 xml 中,不能直接使用 '&' 表示 '&',要转译为 '&'  (转译序列个字符不能有空格,区分大小写,以';'结束,不要丢了分号哦 ;    amp;不是" ...

  3. kcp-go源码解析

    概念 ARQ:自动重传请求(Automatic Repeat-reQuest,ARQ)是OSI模型中数据链路层的错误纠正协议之一.RTO:Retransmission TimeOutFEC:Forwa ...

  4. level.go

    package blog4go import ( "fmt" "strings" ) // LevelType type defined for logging ...

  5. 显著性检测(saliency detection)评价指标之KL散度距离Matlab代码实现

    步骤1:先定义KLdiv函数: function score = KLdiv(saliencyMap, fixationMap) % saliencyMap is the saliency map % ...

  6. jdbc 增删改查以及遇见的 数据库报错Can't get hostname for your address如何解决

    最近开始复习以前学过的JDBC今天肝了一晚上 来睡睡回笼觉,长话短说 我们现在开始. 我们先写一个获取数据库连接的jdbc封装类 以后可以用 如果不是maven环境的话在src文件下新建一个db.pr ...

  7. STM32基于固件库新建MDK工程模板(精简版)

    上个博文理论讲解的东西太多,太复杂,这里把所有步骤全部贴出 1.新建一个工程文件夹LED 2.LED文件夹下建立如下文件夹 3.Project –>New Uvision Project 到US ...

  8. ACM——八大输出方式总结

    个人做题总结,希望能够帮助到未来的学弟学妹们的学习! 永远爱你们的 ----新宝宝 1: 题目描述 Your task is to Calculate a + b. Too easy?! Of cou ...

  9. python的知识统计笔记

    python的发展

  10. .net core 注入机制与Autofac

    本来是要先出注入机制再出 管道 的,哈哈哈……就是不按计划来…… 这里扯扯题外话:为什么要注入(DI,dependency-injection),而不用 new 对象? 可能我们都很清楚,new 对象 ...