【转载】vue-2.6.10版本源代码断点调试方法

2021/5/3 18:56:26

编程Tag： js vue 版本源码文件断点 10 源代码

本文主要是介绍【转载】vue-2.6.10版本源代码断点调试方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

原博客地址
博客内容
注意

原博客地址

https://blog.csdn.net/shi851051279/article/details/103550018

博客内容

版本： vue-2.6.10, 一定要保证版本一致

因为最开始调试源码的时候下载的是这个版本，后来在百度上找到的一些方法，发现那些方法都是一两年前的，根本不管用了，因为版本迭代，vue源码的配置已经变了！

1，先在github上找到vue源码

连接：https://github.com/vuejs/vue/tree/v2.6.10
然后切换到2.6.10版本上再clone
在这里插入图片描述

2，安装依赖，修改配置，重新打包

下载好以后，老规矩先 npm install 一下安装好依赖文件，然后我们打开package.json文件找到script 标签中的 dev 命令
在这里插入图片描述
然后修改配置在后边加上一段代码 --sourcemap 如下图

然后运行 npm run dev 命令，重新打包生成vue.js文件这时候也会生成一个对应的vue.js.map文件。

3，新建文件开始打断点调试

根目录下找到 examples/commits文件夹然后新建一个test.html文件

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <div id="app">
        {{ message }}
    </div>
    <!-- 注意这里引入的vue.js文件 -->
    <script src="../../dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data () {
                return {
                    message: 'hello world'
                }
            }
        })
    </script>
  </body>
</html>
然后直接用浏览器打开运行这个html 文件，不用起本地服务直接运行就可以
  
然后我们发现sources tab下的源码目录里关联上了src 源代码目录
 然后我们找到 /src/instance/index.js 文件，直接打上断点刷新一下就可以愉快的调试了


注意
1 函数调用的时候ctrl+f搜索函数名，可以关联代码的位置

2 在vue源码文件中写注释，之后npm run dev重新生成vue.js。重新debug，就可以看到注释了

这篇关于【转载】vue-2.6.10版本源代码断点调试方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！