环境:

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. 编写一个带有main函数的类，调用上面的汽车类，实例化奔驰、大众、丰田等不同品牌和型号，模拟开车过程：启动、加速、转弯、刹车、息火，实时显示速度。

    //程序入口    public static void main(String[] args) {        // TODO Auto-generated method stub         ...

  2. WEB性能测试工具

    做Web开发,难免要对自己开发的页面进行性能检测,自己写工具检测,工作量太大.网上有几款比较成熟的检测工具,以下就介绍一下,与大家分享. 互联网现有工具 基于网页分析工具: 1.       阿里测 ...

  3. JavaScript实现AOP（面向切面编程，装饰者模式）

    什么是AOP? AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能通常包括日志统计.安全控制.异常处理等.把这些功能抽离出来之后, 再通过“动态织入 ...

  4. 日志记录发布网站之后不成功，对路径“C:\Inetpub\wwwroot\***\***.xls”的访问被拒绝。

    主要是web程序的根目录文件夹路径访问权限不够,新增加一个everyone的完全控制读写的权限即可!---------折磨了两天,才发现使劲使错了地方. 另外: 一定谨记!!!!! 所写的路径如果不存 ...

  5. RegExp.$1 简单理解

    RegExp 是javascript中的一个内置对象.为正则表达式.RegExp.$1是RegExp的一个属性,指的是与正则表达式匹配的第一个 子匹配(以括号为标志)字符串, 以此类推,RegExp. ...

  6. np.eye()

    今天在完成深度学习的相关编程作业的时候,发现代码中出现了一个关于np.eye()的函数,这个函数的用法非常的简单,但是在预制的代码中,这个函数的用法并非单单制造一个对角矩阵,而是通过其来将一个labe ...

  7. 利用X.509证书对XML进行加密和签名

    综述       XML加密和签名技术应用非常广泛. ASP.NET 使用XML加密对配置信息进行加密:InfoPath使用XML签名对表单进行签名:Web服务使用XML加密和签名对SOAP消息进行加 ...

  8. TZOJ 3533 黑白图像(广搜)

    描述 输入一个n*n的黑白图像(1表示黑色,0表示白色),任务是统计其中八连块的个数.如果两个黑格子有公共边或者公共顶点,就说它们属于同一个八连块.如图所示的图形有3个八连块. 输入 第1行输入一个正 ...

  9. TZOJ 4435 n皇后问题(回溯)

    描述 在 n×n 的国际象棋棋盘上放置n个皇后,使得任何一个皇后都无法直接吃掉其他的皇后(任两个皇后都不能处于同一条横行.纵行或斜线上) 输入 输入有多组(直到-1结束) 每组一行 一个整数 n(0& ...

  10. Mysql优化性能优化21条

    今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序员需要去关注的事情.当我们去设计数据库表结构,对操作数据 ...