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. [置顶] iOS中让省略号垂直居中

    在显示等待框时,一般要求在提示信息后面加个省略号,但中文输入法下输入的省略号是在底部对齐,但中 文的习惯是省略号垂直居中对齐,最后找到下面这个方法来显示垂直居中的省略号: 中文和英文输入法下一样: o ...

  2. Codeforces Round #309 (Div. 2) C. Kyoya and Colored Balls

    Kyoya Ootori has a bag with n colored balls that are colored with k different colors. The colors are ...

  3. 【《Objective-C基础教程 》笔记ch03】（四）OC中的OOP

    一.声明类接口步骤: 1.声明一个类接口,使用@interfacekeyword加上类名称. 2.用  { 实例变量 }  来定义各种数据成员. 3.方法声明,採用中缀符语法声明一个c函数,用到了冒号 ...

  4. C#程序集系列07,篡改程序集

    以下几个方面用来区分不同的程序集:○ 程序集名称:Name○ 程序集版本:Version○ 程序集公匙: Public Token○ 程序集文化:Culture 如果没有很严格地按照上面的几个方面来创 ...

  5. 【linux】centos7安装使用rz/sz命令

    今天在一个新的centos上使用rz上传文件,提示找不到命令 需要在root用户下 安装命令: yum install -y lrzsz 使用rz上传文件到服务器上: rz 使用sz命令发送服务器文件 ...

  6. Oracle存储过程update受外键约束的主键值时完整性冲突解决方式

    1.问题背景 尽管在数据库操作中我们并不提倡改动主键,可是确实在实际生活中有这种业务需求: 表A有主键KA,表B中声明了一个references A(KA)的外键约束.我们须要改动A中某条目KA的值而 ...

  7. .NET：CLR via C# Thread Basics

    A thread is a Windows concept whose job is to virtualize the CPU. Thread Overhead Thread kernel obje ...

  8. html在线编辑器汇总

    1. TinyMCE 免费,开源,轻量的在线编辑器,基于 JavaScript,高度可定制,跨平台. 2. FCKEditor 免费,开源,用户量庞大的在线编辑器,有良好的社区支持. 3. YUI E ...

  9. 每天一个linux命令-vi

    进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi +n filename :打开文件,并将光标置于第n行首 vi + filename :打开文件,并将光标置于最后 ...

  10. json-lib包笔记

    json-lib.jar开发包使用: 依赖包:commons-beanutils.jar;commons-httpclient.jar;commons-lang.jar;ezmorph.jar;不少人 ...