依赖安装

  • node 版本切换到 18.0.0
  • 单独安装 puppeteer否则会报错
    • npm i puppeteer --ignore-script 否则会报错
  • 使用 yarn 安装所有依赖

package.json 启动 添加配置

  • 在dev 命令里 加上 –sourcemap,便于源码调试
 "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev"

在源码根目录中运行npm run dev

  • 运行npm run dev 在dist文件夹下生成 vue.js文件

新建一个test目录，并创建test.html文件用于测试

  • m在html文件中使用script引入 dist/vue.js 文件

在测试代码中调试

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-源码调试</title>
</head>
<script src="../dist/vue.js"></script>

<body>
    <div id="app">
        {{ message }}
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: 'hello world'
            }
        })
        console.log(Vue)

    </script>
</body>

</html>

直接在vscode中调试Vue源代码

  1. 安装插件 Microsoft Edge Tools for VS Code

在Edge浏览器中安装vue-devtool插件

  • 在Edge浏览器中安装vue-devtool插件，否则无法在vscode软件中进行打断点的操作

launch.json配置

  • 按下F5，配置launch.json
{
  "configurations": [
      {
          "type": "pwa-msedge",//调试环境的具体类型
          "name": "Launch Microsoft Edge",//调试任务的名称，用与在下拉列表中展示
          "request": "launch",//调试模式，一共有两种模式 launch：和应用一起启动 attach：应用已经启动了，但是又想在不重新启动的情况下调试该应用，就可以把调试器附加到应用上
          "runtimeArgs": [//传递给运行时的参数列表。
              "--remote-debugging-port=9222"
          ],
          "url": "http://localhost:8080",//项目启动运行的url
          "webRoot": "${workspaceFolder}",//
          "presentation": {
              "hidden": true
          },
          "smartStep": true, //自动跳过未映射的代码
          "skipFiles": [
              "<node_internals>/**/*.js", //跳过node核心模块代码
              "${workspaceFolder}/node_modules/**/*.js",
              "${workspaceFolder}/src/node_modules/**/*.js",
              "${workspaceFolder}/src/asserts/js/webpack:/app/webpack/**", //忽略webpack源码
              "${workspaceFolder}/src/asserts/js/webpack:/app/node_modules/**" //忽略各种包文件源码
          ] //跳过文件
      },
      {
          "type": "pwa-msedge",
          "name": "Launch Microsoft Edge in headless mode",
          "request": "launch",
          "runtimeArgs": [
              "--headless",
              "--remote-debugging-port=9222"
          ],
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}",
          "presentation": {
              "hidden": true
          },
          "smartStep": true, //自动跳过未映射的代码
          "skipFiles": [
              "<node_internals>/**/*.js", //跳过node核心模块代码
              "${workspaceFolder}/node_modules/**/*.js",
              "${workspaceFolder}/src/node_modules/**/*.js",
              "${workspaceFolder}/src/asserts/js/webpack:/app/webpack/**", //忽略webpack源码
              "${workspaceFolder}/src/asserts/js/webpack:/app/node_modules/**" //忽略各种包文件源码
          ] //跳过文件
      },
      {
          "type": "vscode-edge-devtools.debug",
          "name": "Open Edge DevTools",
          "request": "attach",
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}",
          "presentation": {
              "hidden": true
          },
          "smartStep": true, //自动跳过未映射的代码
          "skipFiles": [
              "<node_internals>/**/*.js", //跳过node核心模块代码
              "${workspaceFolder}/node_modules/**/*.js",
              "${workspaceFolder}/src/node_modules/**/*.js",
              "${workspaceFolder}/src/asserts/js/webpack:/app/webpack/**", //忽略webpack源码
              "${workspaceFolder}/src/asserts/js/webpack:/app/node_modules/**" //忽略各种包文件源码
          ] //跳过文件
      }
  ],
  "compounds": [
      {
          "name": "Launch Edge Headless and attach DevTools",
          "configurations": [
              "Launch Microsoft Edge in headless mode",
              "Open Edge DevTools"
          ]
      },
      {
          "name": "Launch Edge and attach DevTools",
          "configurations": [
              "Launch Microsoft Edge",
              "Open Edge DevTools"
          ]
      }
  ]
}
  • vscode 左边 会有一个edge的操作按钮，用于浏览器调试

  1. 打开测试代码 test.html 中，按 F5 ，唤醒调式操作界面
    在这里插入图片描述

  2. 点击最右侧的调试图标可在vscode内部预览项目

  3. 在这里插入图片描述

  • vscode中预览项目效果
    在这里插入图片描述

代码中添加debugger

  1. 在代码中直接加 debugger
  2. 在vscode 编辑器的函数左边添加 小红点，点击即可
  3. 在这里插入图片描述

直接在vscode中使用vue项目调试Vue源代码

步骤

  1. 先使用脚手架搭建一个空的vue项目
  2. 将所有的Vue导入改为本地文件导入
import Vue from '../../../../vue-2.6.14/dist/vue.js'
// import Vue from 'vue';
  1. 在Vue源码中打debugger断点或者加 console.log日志，即刻实现源码的调试

优势

  • 可方便的利用vue的组件进行源码调试，不需要用html调试

备注

  • 由于本人的google浏览器有些问题，故使用了edge浏览器调试代码，也可以用google直接调试，思路都是一样的

总结

  • 这一波操作下来，就可以在vscode中直接调试 vue2的源码了
# vscode # vue.js # visual studio code
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

cover

GitTalk | 使用面向业务的狮偶编程语言提升开发效率

avatar GitCode 开源社区
cover

GitTalk | DevUI Suits 场景解决方案

avatar GitCode 开源社区
cover

GitTalk | DevUI Admin 前端项目构建

avatar GitCode 开源社区