1、添加sourceMap

sourceMap: true

2、npm run dev 会生成vue.js.map

3、断点调试

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>vue源码测试</title>

    </head>

    <body>

        <div id="app">

            <div v-for="item in list">

                {{ item }}

            </div>

        </div>

        <script src="./vue.js"></script>

        <script type="text/javascript">

            var app = new Vue({

                el: '#app',

                data: {

                    list: [1, 2, 3]

                }

            })

        </script>

    </body>

</html>

vue 源码 断点调试的更多相关文章

  1. Vue源码解析-调试环境-代码目录和运行构建

    目录 前言 1 代码结构 1.1 octotree插件 1.2 vue工程项目目录 1.3 主要代码目录src compiler core platforms server sfc shared 2 ...

  2. Vue2.x源码学习笔记-Vue源码调试

    如果我们不用单文件组件开发,一般直接<script src="dist/vue.js">引入开发版vue.js这种情况下debug也是很方便的,只不过vue.js文件代 ...

  3. Vue源码学习（一）：调试环境搭建

    最近开始学习Vue源码,第一步就是要把调试环境搭好,这个过程遇到小坑着实费了点功夫,在这里记下来 一.调试环境搭建过程 1.安装node.js,具体不展开 2.下载vue项目源码,git或svn等均可 ...

  4. Vue源码（下篇）

    上一篇是mount之前的添加一些方法,包括全局方法gloal-api,XXXMixin,initXXX,然后一切准备就绪,来到了mount阶段,这个阶段主要是 解析template 创建watcher ...

  5. Vue 源码解读（2）—— Vue 初始化过程

    当学习成为了习惯,知识也就变成了常识. 感谢各位的 点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github 仓库 liyongning/blog ...

  6. Vue 源码解读（8）—— 编译器 之 解析（上）

    特殊说明 由于文章篇幅限制,所以将 Vue 源码解读(8)-- 编译器 之 解析 拆成了上下两篇,所以在阅读本篇文章时请同时打开 Vue 源码解读(8)-- 编译器 之 解析(下)一起阅读. 前言 V ...

  7. Vue 源码解读（10）—— 编译器 之 生成渲染函数

    前言 这篇文章是 Vue 编译器的最后一部分,前两部分分别是:Vue 源码解读(8)-- 编译器 之 解析.Vue 源码解读(9)-- 编译器 之 优化. 从 HTML 模版字符串开始,解析所有标签以 ...

  8. Vue源码后记-其余内置指令（3）

    其实吧,写这些后记我才真正了解到vue源码的精髓,之前的跑源码跟闹着玩一样. go! 之前将AST转换成了render函数,跳出来后,由于仍是字符串,所以调用了makeFunction将其转换成了真正 ...

  9. 【vuejs深入三】vue源码解析之二 htmlParse解析器的实现

    写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而 ...

随机推荐

  1. 白光LED驱动方案的选择 TPS61043

    所有专为驱动白光LED而设计的IC都提供恒定电流夕其中尽大多数是基于电感或电荷泵的解决方案9这两种解决方案各有其优缺点. 电荷泵解决方案也称为开关电容器解决方案,利用分离电容器将电源从输进端传送至输出 ...

  2. C#软件license管理（简单软件注册机制）

    最近做了一个绿色免安装软件,领导临时要求加个注册机制,不能让现场工程师随意复制.事出突然,只能在现场开发(离开现场软件就不受我们控了).花了不到两个小时实现了简单的注册机制,稍作整理.        ...

  3. T4 生成实体和简单的CRUD操作

    <#@ template debug="false" hostspecific="false" language="C#" #> ...

  4. 在MyEclipse中修改类不重启tomcat

    今天因为在调试一个程序,因为工程中用到spring,每次修改类代码时都要重启服务器,搞得很郁闷,于是上网找找有没有可以让java代码每次修改之后 直接加载到服务器的,找了一些还果真有,不过有些方法我试 ...

  5. oracle转义符

    要使用_,则需要做如下转义 select column_name from user_tab_columns where table_name = 'SYS_TERMINAL_MAPPING' AND ...

  6. java 数据流的处理

    字节流类 功能简单介绍 DataInputStream 包含了读取Java标准数据类型的输入流 DataOutputStream 包含了写Java标准数据类型的输出流 ByteArrayInputSt ...

  7. csv2txt.cpp

    #include <iostream> #include <fstream.h> #include <windows.h> #include <iomanip ...

  8. 学习笔记：状态压缩DP

    我们知道,用DP解决一个问题的时候很重要的一环就是状态的表示,一般来说,一个数组即可保存状态.但是有这样的一些题 目,它们具有DP问题的特性,但是状态中所包含的信息过多,如果要用数组来保存状态的话需要 ...

  9. 【BZOJ】【4066】简单题（强制在线）

    KD-Tree KD-Tree的进阶姿势戳这里 http://zyfzyf.is-programmer.com/posts/92431.html 为啥有种线段树&平衡树的即视感……(树形结构的 ...

  10. 妙用HTML5的八大特性来开发移动webAPP

    webAPP的实现基础就是html5+js+css3.可是webAPP还是基于浏览器的微站点开发.正是如此,我们必需要深入的了解html5的特性,这样才干方便我们在开发和设计APP的时候.更合理的採用 ...