利用 Chrome 调试 Vue3 的 TypeScript 源码
https://p26.toutiaoimg.com/large/pgc-image/9b3147feddd54e58928cafb7c969fab6信赖很多同学都已经上手 Vue3 了，用起来是真香！
学习技术又怎能不学习源码，多看看源码，说不定自己哪天也成大佬了呢 ︿(￣︶￣)︿
本日，我来记录一下自己调试 Vue3 源码的过程，方便以后参考。
准备工作
起首需要下载源码和安装依赖：
mkdir codegit clone https://github.com/vuejs/vue-next.gitcd ./vue-nextyarn install执行完上面这一套之后，得到如下文件结构：
https://p26.toutiaoimg.com/large/pgc-image/c513f9b8ed464cfe8a162c63f10c4db1
知心小提示：由于国内访问 Github 着实龟速，所以我一样平常都是将 Github 上的项目导入到 Gitee，然后从 Gitee 上克隆的，速度贼快！
基本调试
在 vue-next 目录下，使用终端执行 yarn run dev，得到如下输出：
https://p3.toutiaoimg.com/large/pgc-image/aa82c10ed42149029df3bf672ceceb02
使用 VSCode 的 Live Server 插件运行 packages/vue/examples/composition/grid.html，然后打开控制台查看代码，结果是：
https://p3.toutiaoimg.com/large/pgc-image/fd6ab11438b64ef0befe05fe85734d2d
全部的代码都被合到 vue.global.js 中了，调试代码时，走的都是这个文件中的代码，那假如想要调试 Vue3 的 TypeScript 源码的话，要怎么做呢？
调试 TypeScript 源码
起首，在 vue-next/package.json 的脚本指令中添加 -s 或者 -sourcemap：
https://p6.toutiaoimg.com/large/pgc-image/b26371aeb29b4ccfb4516f489a924536
然后执行”开发调试“中的步骤，得到的结果如下：
https://p9.toutiaoimg.com/large/pgc-image/e9718d5a8b5a406cab0fc003868d84cc
可以看到，此时，我们可以通过断点进入到 Vue3 的 TS 源码中了，也代表着我们在调试 Vue3 源码。
总结
通过上面的操作可以看到，假如我们在构建 Vue3 时增加 -sourcemap 参数，那得到的结果可以让我们在 Chrome 浏览器中直接调试 TS 源码。
~
~本文完，感谢阅读！
~
学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！
大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！
你来，怀揣期望，我有墨香相迎！ 你归，无论得失，唯以余韵相赠！
知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！
页:
[1]