vue-2.6.10版本源代码断点调试方法

最新推荐文章于 2024-04-06 09:45:06 发布

叶子_zq

最新推荐文章于 2024-04-06 09:45:06 发布

阅读量642

点赞数

分类专栏： vue

原文链接：https://blog.csdn.net/a44185/article/details/111570992

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

标题

出处
博客内容
注意

出处

原博客地址

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，就可以看到注释了

叶子_zq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-2.6.10版本源代码断点调试方法

标题出处博客内容出处原博客地址https://blog.csdn.net/shi851051279/article/details/103550018博客内容版本： vue-2.6.10, 一定要保证版本一致因为最开始调试源码的时候下载的是这个版本，后来在百度上找到的
复制链接

扫一扫