乐趣区

关于前端:使用-Chrome-调试-Vue3-的-TypeScript-源码

置信很多同学都曾经上手 Vue3 了,用起来是真香!

学习技术又怎能不学习源码,多看看源码,说不定本人哪天也成大佬了呢 ︿(~︶~)︿

明天,我来记录一下本人调试 Vue3 源码的过程,不便当前参考。

筹备工作

首先须要下载源码和装置依赖:

mkdir code
git clone https://github.com/vuejs/vue-next.git
cd ./vue-next
yarn install

执行完下面这一套之后,失去如下文件构造:

贴心小提示:因为国内拜访 Github 切实龟速,所以我个别都是将 Github 上的我的项目导入到 Gitee,而后从 Gitee 上克隆的,速度贼快!

根本调试

vue-next 目录下,应用终端执行 yarn run dev,失去如下输入:

应用 VSCode 的 Live Server 插件运行 packages/vue/examples/composition/grid.html,而后关上控制台查看代码,后果是:

所有的代码都被合到 vue.global.js 中了,调试代码时,走的都是这个文件中的代码,那如果想要调试 Vue3 的 TypeScript 源码的话,要怎么做呢?

调试 TypeScript 源码

首先,在 vue-next/package.json 的脚本指令中增加 -s 或者 -sourcemap:

而后执行”开发调试“中的步骤,失去的后果如下:

能够看到,此时,咱们能够通过断点进入到 Vue3 的 TS 源码中了,也代表着咱们在调试 Vue3 源码。

总结

通过下面的操作能够看到,如果咱们在构建 Vue3 时减少 -sourcemap 参数,那失去的后果能够让咱们在 Chrome 浏览器中间接调试 TS 源码。

~

~ 本文完,感激浏览!

~

学习乏味的常识,结识乏味的敌人,塑造乏味的灵魂!

大家好,我是〖编程三昧〗的作者 隐逸王 ,我的公众号是『编程三昧』,欢送关注,心愿大家多多指教!

你来,怀揣冀望,我有墨香相迎!你归,无论得失,唯以余韵相赠!

常识与技能并重,内力和外功兼修,实践和实际两手都要抓、两手都要硬!

退出移动版