在我们阅读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. Python之HTTP静态Web服务器开发

    众所周知,Http协议是基于Tcp协议的基础上产生的浏览器到服务器的通信协议 ,其根本原理也是通过socket进行通信. 使用HTTP协议通信,需要注意其返回的响应报文格式不能有任何问题. 响应报文, ...

  2. base64转图片、图片转base64、图片拼接、加水印（水印角度可设置）

    /** * @Description: 将base64编码字符串转换为图片 * @param imgStr * base64编码字符串 * @param path * 图片路径-具体到文件 * @re ...

  3. hibernate查询方式（二）

    1.HQL查询(hibernate query language) 操作的是实体类和属性 *查询所有记录 //1.hql查询操作会使用Query对象 // (1)写sql语句 创建Query对象, S ...

  4. 蓝牙5.0芯片NRF52810和NRF52832可进行mesh组网

    提供智能化mesh照明解决方案,在现有传统灯具的基础上,插入NRF52832/52810的照明Mesh模块,可以迅速升级现有的传统灯具,配合手机APP和服务器系统,使每一盏灯成为物联网的一个智能节点, ...

  5. CSS_跳动的心

    详细教程CSS3 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  6. java的传参究竟是按值传递的还是按引用传递的

    这里来弄清楚Java的传参究竟是按值传递的还是按引用传递的. 形参和实参 传参的概念里,有形参和实参的区分.形参是定义方法名和方法体的时候使用的参数,目的是用来接收调用该方法的时候传入的参数:实参是调 ...

  7. git避免每次输入密码

    生成公匙 在仓库所在目录输入 ssh-keygen -t rsa -C "yourname@sina.com" 其中yourname@sina.com是注册邮箱.可以在%HOME% ...

  8. [状态模式]实现stopwatch

    1.模拟传统面向对象语言的状态模式实现 // Stopwatch类 状态机class Stopwatch {    constructor() {        this.button1 = null ...

  9. JavaWeb中的MVC 下

    代码较多,请先略过代码,看懂逻辑在研究代码 引入 回顾上一节中的项目,最终的层次结构: 在MVC上中,我们分析了MVC设计模式具备的优点,以及不足,并在其基础上增了Service层用于处理业务逻辑,但 ...

  10. pipelineDB学习笔记-2. Stream （流）

    一.流的定义: 所谓的“流”(stream)在pipelineDB中是指那些被允许的数据库客服端推送到 Continuous View(连续视图) 的时序化数据的一种“抽象”.流中的每一个raw(数据 ...