首页 前端知识 vue2源码调试,在vscode中直接调试vue源代码操作指南

vue2源码调试,在vscode中直接调试vue源代码操作指南

2024-06-16 09:06:01 前端知识 前端哥 125 347 我要收藏

依赖安装

  • 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的源码了
转载请注明出处或者链接地址:https://www.qianduange.cn//article/12414.html
评论
发布的文章

前端开发 4: jQuery

2024-06-22 01:06:02

网页开发 HTML

2024-06-22 01:06:17

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!