在我们阅读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. bash中$符号的一般用法

    $一般用于获取变量的内容(字符串或数字等),用以构成命令version=$(uname -r).构成字符串echo "my name is $myname".进行算术运算等tota ...

  2. vars()

    返回一个字典,包含所有在本函数调用时存在的变量

  3. MVVMLight绑定数据

    我们先新建一个WPF项目MVVMLightDemo,添加GalaSoft.MvvmLight.dll(没有可以自己下载) 然后在项目中添加三个文件夹,如图: 先添加我们的Model,在Model下新建 ...

  4. MySQL必知必会(汇总数据, 聚集函数)

    SELECT AVG(prod_price) AS avg_price FROM products; #AVG只能用于单个列求平均值,如想计算多个列,必须用多个AVG() SELECT AVG(pro ...

  5. 七种CSS左侧固定,右侧自适应两栏布局

    一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...

  6. I_want_all 2019训练记录

    Team members StarHai binarycopycode Fly_White Caution 读题 数组第一维的访问速度比其他维速度快. 清空数组 乘法运算取模里面涉及到减法注意变为负数 ...

  7. 利用Python爬虫轻松挣外快的几个方法（值得收藏）

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:小猿猿er 在下写了10年Python,期间写了各种奇葩爬虫,挣各种奇葩 ...

  8. 基于iCamera测试模拟摄像头-TVP5150模块小结

    基于iCamera测试模拟摄像头-TVP5150模块小结 首先先认识下模拟摄像头,相信大家都不陌生, CCD模拟摄像头 CMOS模拟摄像头 可以看到,ccd摄像头电路较复杂,接口少,而cmos摄像头, ...

  9. 机会来了！5G时代带来新闻传播行业的变革！

    5G时代到来!新闻传播行业大变革! 1.作为一名体育生进入的新闻传播学院,传统的新闻媒体能力已不再具有优势,意味着我有翻身的机会了! 从一开始进入大学,由于高中的知识储备不如其他人,尤其是英语能力方面 ...

  10. JAVA 锁的终极状态

    自旋锁 背景:互斥同步对性能最大的影响是阻塞,挂起和恢复线程都需要转入内核态中完成:并且通常情况下,共享数据的锁定状态只持续很短的一段时间,为了这很短的一段时间进行上下文切换并不值得. 原理:当一条线 ...