Vue源码学习之——如何在Chrome中deBug源码

最新推荐文章于 2023-04-21 14:11:34 发布
最新推荐文章于 2023-04-21 14:11:34 发布
阅读量5.3k 收藏 5
点赞数 1
分类专栏： vue源码 Chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_33408089/article/details/85014460
版权

参考链接

如果我们不用单文件组件开发，一般直接<script src="dist/vue.js">引入开发版vue.js
这种情况下debug也是很方便的，只不过vue.js文件代码是rollup生成的

在这里插入图片描述

但是如果能够在vue项目中的src目录下中的文件打断点调试就更好了。在这里插入图片描述

那怎么做到呢？

  1. 打开 vue/script/config.js 文件(就是package.json的入口文件)
    找到 genConfig() 函数
    该函数下有个config对象,给该对象添加一个属性和值: sourceMap: true
    在这里插入图片描述
  2. 在源码目录vue下，然后重新 npm run dev, 会发现dist目录下多了一个vue.js.map文件
    在这里插入图片描述
  3. 最后在你的xxx.html(这里start.html)引入vue.js, 在浏览器中打开该xxx.html(这里start.html)文件, 就可以愉快的调试了
    在这里插入图片描述
  4. 我这里是直接在vue源码的Example里新建了一个文件用来调试：在这里插入图片描述
AddTwoNum
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue3 - 项目中使用 debugger 在 chrome 谷歌浏览器中失效
良月柒
05-11 507
在 Vue 应用中，debugger;语句用于在代码中设置断点，以便在浏览器的开发者工具中进行调试。这个语句会使得代码在执行到这一行时停止，你可以查看当前的变量值、调用堆栈等信息。
谷歌浏览器 chrome vue 调试插件 vue-devtools 及源码
05-04
谷歌浏览器 chrome vue 调试插件 vue-devtools chrome（谷歌浏览器）vue代码调试插件， 已打包。解压后，通过chrome扩展程序加载即可使用。 使用方法： 1、chrome浏览器输入地址“chrome://extensions/”进入扩展程序页面 2、勾选开发者模式 3、点击“加载已解压的扩展程序...”按钮，选择解压后的chrome文件夹，即可添加成功。 4、添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息
使用Vscode进行Vue的debug调试功能，研究了一天终于可以了，同时解决Unbound breakpoint灰点问题
04-21 2万+
实现的结果：在vscode中可以直接debug上一步下一步等，同时在浏览器里面也可以执行这样的操作，这样的debug功能，谁不想要呢？谁还没有呢？是不是你，哈哈哈哈。
关于如何调试vue3源码
qq_35094120的博客
02-12 272
把选中的代码去vue源码中的rollup.config.js文件中。workspaceFolder是项目根目录。attach是连接上已有的端口9222。此时已经成功映射上了。
vscode chrome vue 双端源码调试应用
hhbbeijing的专栏
02-09 1701
在vscode中断点调试vue代码。
谷歌vue源码查看
01-31
vue.js的devtools安装,实现了谷歌浏览器可以直接查看vue源码，类似h5的元素开发者模式。 方法1：打开谷歌浏览器>更多工具>拓展程序（直接把解压缩的文件拖进去，ctrl+r即可） 方法2：打开谷歌浏览器>输入网址：chrome://extensions/（直接把解压缩的文件拖进去，ctrl+r即可）
详解Vue源码学习之双向绑定
01-21
原理 当你把一个普通的 ...上面那段话是Vue官方文档中截取的，可以看到是使用Object.defineProperty实现对数据改变的监听。Vue主要使用了观察者模式来实现数据与视图的双向绑定。 function initData(vm) { //将dat
Vue源码学习之关于对Array的数据侦听实现
12-10
摘要 我们都知道Vue的响应式是...通过查看Vue源码路径vue/src/core/observer/array.js。 /** * Vue对数组的变化侦测 * 思想: 通过一个拦截器来覆盖Array.prototype。 * 拦截器其实就是一个Object, 它的属性与Arr
vue源码学习之Object.defineProperty对象属性监听
01-21
本文介绍了vue源码学习之Object.defineProperty对象属性监听，分享给大家，具体如下： 参考版本 vue源码版本：0.11 相关 vue实现双向数据绑定的关键是 Object.defineProperty ，让我们先来看下这个函数。 在MDN上...
基于Vue的微服务在线学习平台前端设计源码
最新发布
03-29
这是一个基于Vue的微服务在线学习平台前端设计，使用Vue、JavaScript、CSS和HTML语言开发，包含148个文件。...该项目是一个基于微服务的在线学习平台前端代码，适合用于个人学习和实践Vue的开发技术。
vue源码学习总结 深入响应式原理
01-08
Vue.prototype._init= function (options?: Object) { callHook(vm, 'beforeCreate') initInjections(vm) // resolve injections before data/props 初始化注入 initState(vm) // 初始化 data/props/method/...
最新Vue3+Vite+Setup开发秘籍(包含源代码)
Smell_rookie的博客
08-20 1059
前言 大家好，我是《前端发现者》，发现前端，发现技术，让前端变得更加容易。今天给大家带来一篇Vue3的开发文献，供大家在开发过程中查阅，一时看不完 收藏 点起来✌️ Vue3就在前几天尤大大发布了 V3.2.2 的版本了，此次更新在前端程序员看来可谓是皆大欢喜、欢呼雀跃。那么问题来了？ 旧项目要不要从Vue2升级为Vue3呢？ 新项目要使用Vue3吗？ 答：旧项目暂且不考虑升级。新项目可以尝试用Vue3开始搞起（纯属个人意见，仅供参考！） 这个怎么说呢？旧项目需要考虑稳定，毕竟是已经在使用的产品，要
VUE项目开发，使用开发者工具查看源文件
weixin_44370837的博客
01-25 4452
如何在浏览器看到.vue文件的源文件 问题描述： 今天在开发的时候，想要通过断点的方式看一下代码究竟是咋运行的，打开Chrome浏览器，F12，在开发者工具中选择Soruces，Ctrl + P进行文件查找，找到之后，发现明显不是源文件，调试困难。 解决办法： 在vue.config.js目录中添加如下内容： configureWebpack: { devtool: 'source-map' }, 可以看到，已经是能够方便调试的源文件了。 更多详情可以查看阮一峰老师对 devtool: 's
Vue Chrome浏览器调试vue项目源代码
票票的博客
01-23 5199
Vue项目在Chrome浏览器的源代码混乱，无法调试问题 解决方法： 在文件 vue.config.js 的 configureWebpack 对象加一个元素 devtool: ‘source-map’ configureWebpack: { devtool: 'source-map', name: name, resolve: { alias: { '@': resolve('src') } } }, 重启就ok了 ...
如何在chrome浏览器里面debug调试前端代码？
weixin_45157527的博客
07-29 9258
一、前言 转载博主说:初学者仅仅掌握了alert、console这些基本的调试方法。 我刚自学前端初期的时候,也是只用这种方法调试,天真地以后所有调试都可以通过console解决。后面去公司实习,看大佬们调试页面,这边打个断点,那边记录一下,马上就把问题定位出来了。确实,学会浏览器调试工具真的能大大提高自己的工作效率,尤其是在大项目的处理过程中。 二、调试工具 1. Elements 先来看这张图最上头的一行是一个功能菜单，每一个菜单都有它相应的功能和使用方法，依次从左往右来看箭头按钮：用于在页面
Chrome浏览器找不见Vue项目源代码
票票的博客
08-04 3454
Vue项目在Chrome浏览器的源代码混乱，无法调试问题 先上个问题图： 在文件 vue.config.js 的configureWebpack对象加一个元素 devtool: ‘source-map’ 如图： 搞定！重启下项目，按F12 看看效果去吧 之所以会出现这种情况，一般是Vue模板项目 取消设置SourceMap，为了避免前端源码在浏览器端泄露。 解决这个问题，就是配置一个 SourceMap就好。 关键点来了，不同脚手架版本，配置代码不同！我的脚手架是3.x.x，如果你是其他版本，就找找其他
Chrome开发者工具调试详解
CRMEB小程序商城的博客
09-04 3098
chrome开发者工具最常用的四个功能模块：元素（ELements）、控制台（Console）、源代码（Sources），网络（Network）。 元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。css可以即时修改，即时显示。大大方便了开发者调试页面 控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性，.
Vite + Vue3 + chrome源码调试
jian274622701的博客
03-22 4416
启动命令加参数 -m development vite build -m development --watch vite.config.ts配置build.minify 为 false build: { minify: env.NODE_ENV == "production", } 一定要关闭: sourcemap选项, 注释或者: sourcemap: false 现在打开chrome访问你的项目地址, 在你的域名assets目录下找到你...
vue项目怎么使用 chrome 打断点 debug
热门推荐
脑瓜疼儿的博客
06-04 4万+
常见的一种方式是在你的chorme浏览器安装dev-tools， 安装教程和使用教程， 自行百度； 如果 显示的 是 Vue.js is detected on this page. Open DevTools and look for the Vue panel. 这时候你的devtools插件是不能用的 你可以在你main.js 里面 添加 一行代码 其实就是开启 devtools Vue...
Vue踩坑之旅——Vuex
06-03
非常感谢您的提问！以下是回答： Vuex 是一个专门为 Vue.js ...3. 在使用 Vuex 时，应该注意代码的可维护性和可读性，避免将所有逻辑都写在一个文件中，应该按照模块化的方式组织代码。 希望这些信息能对您有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值