创意电子

标题: 利用 Chrome 调试 Vue3 的 TypeScript 源码 [打印本页]

作者: 编程三昧    时间: 2021-9-27 20:08
标题: 利用 Chrome 调试 Vue3 的 TypeScript 源码

                               
登录/注册后可看大图

信赖很多同学都已经上手 Vue3 了,用起来是真香!
学习技术又怎能不学习源码,多看看源码,说不定自己哪天也成大佬了呢 ︿( ̄︶ ̄)︿
本日,我来记录一下自己调试 Vue3 源码的过程,方便以后参考。
准备工作

起首需要下载源码和安装依赖:
mkdir codegit clone https://github.com/vuejs/vue-next.gitcd ./vue-nextyarn 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 源码。
~
~本文完,感谢阅读!
~
学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!
大家好,我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!
你来,怀揣期望,我有墨香相迎! 你归,无论得失,唯以余韵相赠!
知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!





欢迎光临 创意电子 (https://wxcydz.cc/) Powered by Discuz! X3.4