在我们阅读vue源码时，一般引用vue的版本都是打包编译后的版本，无法debugger源码，要debugger源码，就需要给代码添加sourcemap，他存储源码与编译后代码的一种对应关系，详细内容可以参考阮老师的博文（http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html）

　　vue是采用rollup进行代码打包，我们只需要在config.js中，output代码中添加sourcemap的配置即可，如下所示：

　　rollup基础配置：https://www.rollupjs.com/guide/command-line-reference/#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6configuration-files

　　修改完成后，执行下npm run dev，在example中的代码中，引入/dist/vue.js代码即可，在源码中添加debugger，会有对应的断点

vue如何debugger源码的更多相关文章

  1. 从vue.js的源码分析，input和textarea上的v-model指令到底做了什么

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能:对,它本质上只是一个语法糖,但到底是一个 ...

  2. 一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

    1.前言 本文内容讲解的内容:一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构. 项目地址:https://github.com/biaochenxuying/vu ...

  3. vue中$watch源码阅读笔记

    项目中使用了vue,一直在比较computed和$watch的使用场景,今天周末抽时间看了下vue中$watch的源码部分,也查阅了一些别人的文章,暂时把自己的笔记记录于此,供以后查阅: 实现一个简单 ...

  4. 浅析Vue原理(部分源码解析)

    响应式 Object.defineProperty Object.defineProperty(obj, prop, descriptor) // 对象.属性.描述符 Object.definePro ...

  5. 深入Vue.js从源码开始(二)

    从入口开始 我们之前提到过 Vue.js 构建过程,在 web 应用下,我们来分析 Runtime + Compiler 构建出来的 Vue.js,它的入口是 src/platforms/web/en ...

  6. Vue.js 从源码理解v-for和v-if的优先级的高低

    在vue.js里面,v-for和v-if是可以一起使用作用在某个元素上,网上看到一篇文章说永远不要把v-for和v-if同时用在同一个元素上,感觉有点瞎扯,官网也注明了可以一起使用的,还把两个指令的优 ...

  7. 【vue】nextTick源码解析

    1.整体入手 阅读代码和画画是一样的,忌讳一开始就从细节下手(比如一行一行读),我们先将细节代码折叠起来,整体观察nextTick源码的几大块. 折叠后代码如下图 整体观察代码结构 上图中,可以看到: ...

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

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

  9. vue仿追书神器，vue小说项目源码

    vue-reader 一点阅读器!API源自追书神器,免费使用!目前已初步开发完成! Github项目地址:https://github.com/AntonySufer/vue-readle 欢迎is ...

随机推荐

  1. 一条数据的HBase之旅，简明HBase入门教程4：集群角色

    [摘要] 本文主要介绍HBase与HDFS的关系,一些关键进程角色,以及在部署上的建议 HBase与HDFS 我们都知道HBase的数据是存储于HDFS里面的,相信大家也都有这么的认知: HBase是 ...

  2. 在Tinymce编辑器里，集成数学公式

    在以前,需要在Web页面显示数学公式,常用的都是先制作成图片,然后插入到页面里.这使得后期对数学公式的修改变的麻烦,同时也不利于搜索引擎搜索. 本文将介绍如何在TinyMce编辑器里集成数学公式.先看 ...

  3. 2017 CCPC秦皇岛 A题 A Ballon Robot

    The 2017 China Collegiate Programming Contest Qinhuangdao Site is coming! There will be  teams parti ...

  4. LSI系列芯片Raid卡配置方法、管理手册

    说明 本手册适用于LSI芯片Raid卡 包括但不限于Inspur 2008/2108 Raid卡.LSI 9240/9260/9261/ 9271 等Raid卡. 不同型号的Raid卡在某些功能上的支 ...

  5. ARTS-S golang goroutines and channels(二)

    向tcp服务端发消息 package main import ( "io" "log" "net" "os" ) fun ...

  6. ES6语法中的class、extends与super的原理

    class 首先, 在JavaScript中, class类是一种函数 class User {    constructor(name) { this.name = name; }    sayHi ...

  7. Vue使用Viser

    最近产品经理发现antV的图表非常漂亮,想在项目里使用,看了下文档antV适用于Vue的分支叫Viser,Viser的官方文档写的有点随意,在此给出Vue中使用Viser的方法如下: 1.安装Vise ...

  8. NodeJS2-3环境&调试----module.exports与exports的区别

    exports默认会给他设置为module.exports的快捷方式,可以把它的里面添加属性,但是我们不能修改它的指向,如果修改了它的指向那它和普通对象没有任何区别了.因为在CommonJS中,模块对 ...

  9. 《Java基础知识》Java接口和抽象类的区别

    抽象类 抽象类必须用 abstract 修饰,子类必须实现抽象类中的抽象方法,如果有未实现的,那么子类也必须用 abstract 修饰.抽象类默认的权限修饰符为 public,可以定义为 public ...

  10. 面试连环炮系列（十五）：说说Eureka的高可用方案

    说说Eureka的高可用方案 至少3个Eureka实例才能满足高可用,配置方法如下: 准备三个节点node1,node2,node3. 在每个实例的application.xml文件里加入 eurek ...