在我们阅读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. 工作流Activity组件值数据传递获取问题

    如图:先简单说一下大致过程 通过具体的菜单节点,加载具体的指令组件.本着低耦合的原件,需要将核查组件从指令组件重拆分出来,作为单独的组件根据业务需要拖拽到指令组件中.但是具体业务方面核查组件一方面需要 ...

  2. JavaScript的DOM对象和jQuery对象的对比

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. React-Native项目在Android真机上调试

    目录 1.确保你的设备已经成功连接.可以终端输入adb devices来查看: 2.终端运行npm start 开启本地服务,成功后运行react-native run-android来在设备上安装并 ...

  4. 鲲鹏来了,在EulerOS试用.NETCore-3.1

    在EulerOS试用.NETCore-3.1 前言 EulerOS其实出来有一段时间了,一直在关注,单是仅仅也只是停留在观望的阶段,目前还没有接入的打算:正好看到园子里的兄弟分享了华为云免费试用的活动 ...

  5. 2018 ACM-ICPC南京区域赛题解

    解题过程 开场开A,A题shl看错题意,被制止.然后开始手推A,此时byf看错E题题意,开始上机.推出A的规律后,shl看了E题,发现题意读错.写完A题,忘记判断N=0的情况,WA+1.过了A后,sh ...

  6. python学习笔记—DataFrame和Series的排序

    更多大数据分析.建模等内容请关注公众号<bigdatamodeling> ################################### 排序 ################## ...

  7. 基于iCamera测试mt9m034 1280X960 高动态相机模块小结

    基于iCamera测试mt9m034 高动态相机模块小结 首先看看此模块的特性 mt9m034 高动态 CMOS模块 1280*960像素 5.48 V/lux-sec >115db 摄像头模块 ...

  8. Nios II的Boot过程分析

    目录 1       概述....................................................................... 1 2       几种常见的 ...

  9. 【数据结构06】二叉平衡树（AVL树）

    目录 一.平衡二叉树定义 二.这货还是不是平衡二叉树? 三.平衡因子 四.如何保持平衡二叉树平衡? 五.平衡二叉树插入节点的四种情况 六.平衡二叉树操作的代码实现 七.AVL树总结 @ 一.平衡二叉树 ...

  10. 层叠机制和继承的概念以及CSS中选择器的优先级

    层叠机制: 一个元素的某个特定的样式属性可能来自行间的style属性.内联样式表或者外部引入的样式表,以及浏览器自定义的样式,还有就是继承自父元素的样式,但是最终只会选择其中的某一个来表示,这个选择的 ...