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

依赖安装

  • 使用 yarn 安装所有依赖

package.json 启动 添加配置

  • 在dev 命令里 加上 –sourcemap,便于源码调试

在源码根目录中运行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
  • vscode 左边 会有一个edge的操作按钮,用于浏览器调试
  1. 打开测试代码 test.html 中,按 F5 ,唤醒调式操作界面
    在这里插入图片描述

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

  3. 在这里插入图片描述

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

代码中添加debugger

  1. 在代码中直接加 debugger
  2. 在vscode 编辑器的函数左边添加 小红点,点击即可
  3. vue2源码调试,在vscode中直接调试vue源代码操作指南_第1张图片

总结 这一波操作下来,就可以在vscode中直接调试 vue2的源码了

你可能感兴趣的:(vue2,源码解析-逐行解析,vscode,vue.js,visual,studio,code)