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

丰的传说

已于 2024-03-02 16:35:54 修改

阅读量3.7k

点赞数 10

分类专栏： vue2 源码解析-逐行解析文章标签： vscode vue.js visual studio code

于 2024-02-10 16:35:47 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42389674/article/details/136091303

版权

依赖安装

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

丰的传说

关注关注

10
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue2.x源码解析准备--对源码进行debugger

小毛驴的博客

07-01

1504

1.debugger源代码我们学习vue源码采用的是Runtime+Compiler的版本当我们vue-cli创建完成后 build/webpack.base.conf.js中 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', ...

VSCode+Vue代码调试设置

m0_38025027的博客

02-06

1956

这几天整了个Spring boot+VUE的学生管理系统代码学习，自己也建了个项目边学习边开发，用VSCode调试VUE前端代码时，两个项目出现了不同情况的无法打断点的问题，现在这里记录一下解决办法。的都不行，一调试就跳进了app.js中，说明没找到正确的源码路径。这里也是抄的别人vue.config.js的配置(然后就可以顺利打断点了，网上很多写的都是要写成。// webpack 配置。加完之后就可以顺利打断点调试了。

参与评论您还未登录，请先登录后发表或查看评论

vscode开始调试步骤(本人实践过)

qq_42288851的博客

06-17

3362

1.安装 Debugger for Chrome 2.配置launch.json参数 { // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "...

怎么用 vscode 调试 vue2 项目

最新发布

小妖666个人笔记

03-15

273

怎么用 vscode 调试 vue2 项目

vue2 项目 vscode 配置

TheThirdMoon的博客

02-22

1422

文件-> 首先项->配置文件->显示内容/创建配置文件->打开或创settings.json，内容如下。（如果失败则直接编辑系统中的settings.json文件）在安装目录新建 node_cache 和 node_global 两个文件夹，并将node_global路径加入Path环境变量。新建或修改jsconfig.json文件（解决路径问题）下载 vs code。

vscode使用内置插件断点调试vue2项目

qq_44441669的博客

06-24

825

vscode内置插件断点调试

利用vscode调试vue代码

Admin_yws的博客

04-07

2836

利用vscode调试代码，实测非常好用注意：现在只支持vue2.x。 1.配置launch.json { // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ {

vue2调试源码

我的博客简介

11-23

909

数据劫持 + 发布者-订阅者模式，递归Observer data数据，其实用Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调，Compile编译模板时，新增Watcher依赖，并触发相关属性的getter方法收集依赖，当我们让属性发生变化时，会notify发布消息给订阅者，触发依赖数据更新。很多时候会用到别名，想快速找到该文件可以复制路径和上面的方法一样也可以找到。输入文件名字就可以找到该文件。.........

Vue3.x源码调试的实现方法

10-16

在开发者工具中，通过Source面板可以查看源码和sourcemap文件，甚至直接在面板中进行断点设置、单步调试等操作。实际的调试过程中，开发者可能还需要掌握一些调试技巧。比如，可以使用console.log()在源码的某些...

谷歌浏览器 chrome vue 调试插件 vue-devtools 及源码

05-04

谷歌浏览器 chrome vue 调试插件 vue-devtools ...4、添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息

基于Vue的ruoyi低代码开发平台设计源码

10-05

在当前快速发展的IT行业中，低代码开发平台因其能够提高开发效率、降低开发门槛而受到广泛关注。基于Vue的ruoyi低代码开发平台正是其中的一个杰出代表，它采用流行的前端框架Vue.js与强大的后端框架Spring Cloud相...

Vue2.x源码本地调试

dahaogea的博客

11-22

508

用浏览器打开html文件（如果你安装了vscode插件open in browser，右键在浏览器打开）或者右键。，用别的（如yarn，我用的pnpm没报错）可能会报错，接着就pnpm run dev 启动项目。文件夹下有一些官方给的例子，你可以直接用这些，或者重新创建一个新的并引用vue.js文件。这个时候通过Rollup的构建流程，就生成了dist目录下的。然后把里面script的src路径改成。文件（这个目录下的其它html也行）

Vue2.x源码：开启源码调试环境

YanHSama的博客

03-17

1626

gitHub上克隆或者直接下载压缩包此次源码版本为发现npm i安装失败（在Mac上操作存在）；执行再执行npm i执行安装成功文件修改启动命令原来的修改后的。

vue 源码（v2.6.12）调试的方法

ur home

05-27

805

git clone https://github.com/vuejs/vue.git 克隆下来后将package.json文件中的scriptdev命令后面添加这个--sourcemap。 { "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap" } npm i # 在 dist/vue.js 最后一行追加一行 //# sourceMappingURL=vue.j...

使用Vs Code进行Vue调试

qq_55896432的博客

03-14

1052

本文详细介绍如何Vs Code进行Vue调试，文章完全免费。

VSCode调试Vue项目

Blog of Leviash

12-19

3181

代码在某个平台运行时，会将运行时的状态通过某种方式暴露出来。这些状态信息可以通过某种方式传递给开发工具，以便进行UI的展示和交互。这样的交互可以辅助开发者排查问题、梳理流程，并更好地了解代码的运行状态。这就是我们通常所说的调试。在过去，我们常常需要在浏览器中进行调试，但这种方式往往显得繁琐，尤其是在只有一个屏幕的情况下，我们很难同时查看代码和调试信息。然而，VSCode 拥有内置的 Debug 功能，使得调试变得更加便捷。

vue2用vscode调试打不上断点

小妖666个人笔记

03-15

394

vue2用vscode调试打不上断点

vsCode调试Vue项目

weixin_45880538的博客

12-31

430

【代码】vsCode调试Vue项目。

在 VS Code 中调试Vue代码

老靳的WebGIS

01-31

882

在vscode中调试，我总是用console.log()来打印过程数据，觉得太麻烦了，也不专业，就学着用高级一点的办法来调试代码。

轻松使用vue-devtools在Chrome中调试Vue代码

- Chrome开发者工具（DevTools）是Chrome浏览器内置的一套功能强大的开发调试工具，包含了元素查看器、控制台、网络监控器、源代码编辑器和性能分析器等。 - 使用vue-devtools，开发者可以轻松地访问到Vue组件的实例...