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. Android native层动态库注射

    1.简单介绍 本文解说在Android native层.root权限下.注射动态库到目标进程,从而hook目标进程中动态库的函数的实现方式. 文中的源代码所有来源于网络.我仅仅是略微加以整理. 环境: ...

  2. 拆解探索MagSafe电源接口结构和指示灯变颜色原理

    你有没有想过一个Mac的MagSafe接头里面有什么? 控制光线是什么? 在Mac如何知道它是什么样的充电器? 本文探讨的MagSafe连接器内,并回答这些问题. 2006年由苹果公司推出的MagSa ...

  3. 我对NHibernate的感受（1）：对延迟加载方式的误解

    NHibernate是.NET平台上最著名的ORM框架,虽说出身于Java平台上的Hibernate,但是从外部看来这几乎就是一个.NET平台上的原生产品:有自己的社区,有自己的用户,有自己的商业支持 ...

  4. 系统字体的Regular、Light等几种名称的区别

    以苹果系统中的PingFang SC系列字体为例,其中常见的有下面几种类型可以细分如下. PingFang SC ExtraLight         苹方 特细 PingFang SC Light  ...

  5. java string常见操作题

    1. 每个基本类型封装类都有将string转换为基本数据类型的方法 对于非常大的数字请使用Long,代码如下 int age = Integer.parseInt("10");  ...

  6. tomcat 启动时设置 java 参数，mark

    在文件  startup.bat/.sh 中添加 set "JAVA_OPTS=-Xms2048m -Xmx4096m -XX:NewSize=256m -XX:MaxNewSize=102 ...

  7. Tomcat6内存不足问题及解决方法

    1.Tomcat默认可以使用的内存为128MB,在较大型的应用项目中,这点内存是不够的,有可能导致系统无法运行.常见的问题是报Tomcat内存溢出错误,Out of Memory(系统内存不足)的异常 ...

  8. [实时更新]jquery全部版本号下载

    jquery-2.1.0   注!不再支持IE 6/7/8 直接引用地址:  开发版地址1: <script src="http://code.jquery.com/jquery-2. ...

  9. Linux 系统分析命令图

    sar命令: 编辑 /etc/default/sysstat 设置为true sudo /etc/init.d/sysstat restart

  10. 一道面试题：用shell写一个从1加到100的程序

    [试题描述] 请用shell写一个简短的程序,实现1+2+...+100的功能. [程序] 方法一: #!/bin/bash ..} do let sum+=$i done echo $sum 方法二 ...