在我们阅读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. MVVMLight绑定数据

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

  2. 开放下载 | 《Knative 云原生应用开发指南》开启云原生时代 Serverless 之门

    点击下载<Knative 云原生应用开发指南> 自 2018 年 Knative 项目开源后,就得到了广大开发者的密切关注.Knative 在 Kubernetes 之上提供了一套完整的应 ...

  3. SI522和RC522/ZS3801/FM17520的区别

    小编最近在测试一颗新的芯片,是国内知名厂家中科微研发的,主打超低功耗的厂家. 经过测试和比较小编发现 相对于MFRC522,SI522可以完全替换,不需要做任何更改,同时接受模式下功耗低10mA左右, ...

  4. git 使用详解（5）—— get log 查看提交历史

    git log 查看 提交历史 在提交了若干更新之后,又或者克隆了某个项目,想回顾下提交历史,可以使用 git log 命令查看. 接下来的例子会用我专门用于演示的 simplegit 项目,运行下面 ...

  5. python操作s3服务中的文件

    亚马逊云aws提供了s3服务.国内一些云厂商也用了s3技术.要操作s3服务器中的文件需要用到boto这个python包.下面的代码是一个简单例子. #! /usr/bin/python # -*-co ...

  6. [TimLinux] django model关于QuerySet

    1. 获取执行过的sql命令 from django.db import connections connections['default'].queries 2. 获取QuerySet将执行的sql ...

  7. elasticsearch中mapping全解实战

    目录 Mapping简介 Mapping Type 分词器最佳实践 字段类型 text 类型 keyword 类型 date类型 object类型 nest类型 range类型 实战:同时使用keyw ...

  8. Spring Cloud第八篇 | Hystrix集群监控Turbine

    ​ 本文是Spring Cloud专栏的第八篇文章,了解前七篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring Clo ...

  9. 常见排序汇总C&C++

    常见排序主要有以下四种: 1.交换排序 2.选择排序 3.插入排序 4.归并排序 (以下代码基本都有输出每步排序结果) 一.交换排序 交换排序主要是冒泡排序和快排 1.冒泡排序 流程: (1)对数组中 ...

  10. python学习-while

    """while 条件: 条件满足时,干的事情.如果条件一直满足,一直去重复的执行代码.直接条件不满足为止,停止循环."""# salary ...