环境:

Google Chrome  V72.0.3626.109

vue-dev V 2.6.10

1. 在vue-dev的package.json文件如下位置加 --sourcemap， 用于生成.map文件

 "scripts": {

    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap",

2. 执行npm run dev, 这一步 将在dist目录下生成vue.js和vue.js.map两个文件

3. 将dist目录和src目录拷贝到引用vue.js的网页的位置， 比如下例中index.html即是要访问的文件（如果index.html访问的是vue.min.js，记得改为vue.js）

4. 为该目录设置网站环境，设置完之后通过网址访问index.html, 如 ： http://localhost/vue/commits/index.html

5. 压F12，打开调试工具，发现src文件夹，即可调试vue-dev源码

配置使用sourcemap调试vue源码爬坑的更多相关文章

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

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

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

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

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

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

  4. vue 源码 断点调试

    1.添加sourceMap sourceMap: true 2.npm run dev 会生成vue.js.map 3.断点调试 <!DOCTYPE html> <html> ...

  5. Vue 源码解读（1）—— 前言

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

  6. Vue源码学习1——Vue构造函数

    Vue源码学习1--Vue构造函数 这是我第一次正式阅读大型框架源码,刚开始的时候完全不知道该如何入手.Vue源码clone下来之后这么多文件夹,Vue的这么多方法和概念都在哪,完全没有头绪.现在也只 ...

  7. 14. vue源码入口+项目结构分析

    一. vue源码 我们安装好vue以后, 如何了解vue的的代码结构, 从哪里下手呢? 1.1. vue源码入口 vue的入口是package.json 来分别看看是什么含义 dependences: ...

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

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

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

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

随机推荐

  1. spark 创建稀疏向量和矩阵

    http://blog.csdn.net/canglingye/article/details/41316193 [相互转换]:http://stackoverflow.com/questions/3 ...

  2. Managing Images on smartos

    SmartOS依赖images.images是包含在创建新zone或虚拟机时使用的磁盘或文件系统映像和元数据的模板. images使用imgadm工具进行管理. 使用此工具,您可以: 查看和下载在公共 ...

  3. Css定位元素

    Css定位selenium极力推荐使用Css定位,而不是xpath定位元素,原因是css定位比xpath定位块,速度快,语法更加简洁 css常用的定位方法:1.find_element_by_css_ ...

  4. maven部署项目流程（区分环境）

    java项目区分环境打包部署到Linux 本文以一个简单的HelloWorld的项目为例,从pom.xml配置到打jar包,最后在linux上运行并验证来对maven部署的这套流程进行简单介绍. 为方 ...

  5. phpStudy3——往数据库中添加数据

    前言: 前边介绍了查询数据库的方法,这里介绍下往数据库中添加数据的方法. 项目需求: 用户在前端页面输入的用户名和手机号码,点击提交后后端判断手机号码是否已经存在.如果不存在,那么插入数据库到数据库, ...

  6. UVa 11988 Broken Keyboard (a.k.a. Beiju Text)(链表)

    You're typing a long text with a broken keyboard. Well it's not so badly broken. The only problem wi ...

  7. django复习--学校管理系统用到的知识点梳理

    先看如何引入静态文件 一.引入静态文件,静态文件包括css文件,图片文件,jquery文件等 STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path. ...

  8. 【原创】有关Silverlight中异常“XmalParseEception” 通用解决思路

    针对于 此类 XamlParse问题,大部分都是 silverlight/WPF 前段 xmal文件问题,仔细逐行审查 接口解决.

  9. Laravel框架中实现supervisor执行异步进程

    问题描述:在使用Laravel框架实现动态网页时,若有些操作计算量较大,为了不影响用户体验,往往需要使用异步方式去处理.这里使用supervisor和laravel自带的queues实现. Super ...

  10. Eloquent Observer 的小坑

    前言 最近开发新的项目不是基于完整的 laravel 框架,框架是基于 laravel ORM 的简单MVC模式.随着项目的成熟和业务需求,需要引入事件机制.简单地浏览了一下 symfony.lara ...