• 使用 Chrome 调试 Vue3 的 TypeScript 源码


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

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

    今天,我来记录一下自己调试 Vue3 源码的过程,方便以后参考。

    准备工作

    首先需要下载源码和安装依赖:

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

    执行完上面这一套之后,得到如下文件结构:

    image-20210927181106256

    贴心小提示:由于国内访问 Github 实在龟速,所以我一般都是将 Github 上的项目导入到 Gitee,然后从 Gitee 上克隆的,速度贼快!

    基本调试

    vue-next 目录下,使用终端执行 yarn run dev,得到如下输出:

    image-20210927181630791

    使用 VSCode 的 Live Server 插件运行 packages/vue/examples/composition/grid.html,然后打开控制台查看代码,结果是:

    image-20210927193924649

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

    调试 TypeScript 源码

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

    image-20210927194536043

    然后执行”开发调试“中的步骤,得到的结果如下:

    image-20210927194645408

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

    总结

    通过上面的操作可以看到,如果我们在构建 Vue3 时增加 -sourcemap 参数,那得到的结果可以让我们在 Chrome 浏览器中直接调试 TS 源码。

    ~

    ~本文完,感谢阅读!

    ~

    学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

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

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

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

  • 相关阅读:
    Oracle DataGuard搭建(二)
    Oracle DataGuard搭建(一)
    Linux 安装oracle10g 配置dataguard 介绍和步骤
    Oracle DataGuard数据备份方案详解
    汽车行业的DMS系统 IT不变应万变
    汽车行业DMS系统介绍
    详解UML中的聚合,关联,泛化等关系
    ASP.NET将Session保存到数据库中
    C#快捷键
    Asp.net中使用资源文件实现网站多语言
  • 原文地址:https://www.cnblogs.com/bianchengsanmei/p/15345004.html
Copyright © 2020-2023  润新知