要利用 Chrome 调试 TypeScript 编写的 Vue3 源代码，可以按照以下步骤进行代码实现：
1. 首先，在 Vue3 源代码所在的项目中安装 TypeScript 和使用 TypeScript 的编辑器，例如 Visual Studio Code。
2. 在项目的根目录下创建一个名为 tsconfig.json 的 TypeScript 配置文件，并设置相关的编译选项，例如输出目录、模块解析方式、是否生成 source map 等。
3. 修改 Vue3 源代码中的入口文件，例如 main.ts，以使用 TypeScript 进行编写，同时在该文件中设置 Vue3 的全局配置选项。例如：
“`
import { createApp } from ‘vue’;
import App from ‘./App.vue’;
const app = createApp(App);
// 设置全局配置选项
app.config.productionTip = false;
app.mount(‘#app’);
“`
4. 在编辑器中打开 main.ts 文件，并输入断点调试的语句。例如，在组件的 mounted 生命周期钩子函数中添加断点：
“`
import { defineComponent } from ‘vue’;
export default defineComponent({
name: ‘HelloWorld’,
mounted() {
// 在此处设置断点
debugger;
},
/* … */
}
“`
5. 使用 TypeScript 中的 tsc 命令，将 TypeScript 文件编译成 JavaScript 文件，并生成 source map。例如，在项目根目录下执行以下命令：
“`
tsc -w –sourceMap
“`
该命令将会监视项目中所有 TypeScript 文件的变动，并实时地将其重新编译成 JavaScript 文件，并生成对应的 source map。
6. 在 Chrome 浏览器中打开 Vue3 应用的调试页面，并打开开发者工具。
7. 在开发者工具中，选择 Sources 面板，并将其中的 webpack:// 目录展开。此时，应该能够看到与 TypeScript 文件对应的 JavaScript 文件和 source map 文件已经被加载进来。
8. 在 Chrome 浏览器中刷新页面，以便加载最新的 JavaScript 和 source map 文件。
9. 在页面中触发断点，例如通过点击一个按钮或者加载一个组件等。此时，Chrome 浏览器应该会自动停在断点处，并在 Sources 面板中高亮显示相应的 TypeScript 代码。
10. 在 Sources 面板中进行调试，例如查看变量的值、单步执行代码等。此时，Chrome 浏览器会自动地将 TypeScript 代码转换成对应的 JavaScript 代码，并在当前位置执行相应的代码。在调试过程中，可以随时查看当前代码的堆栈和调用关系，以便更好地理解代码的运行方式。
通过以上步骤，就可以利用 Chrome 调试 TypeScript 编写的 Vue3 源代码，并实现对代码的断点调试和单步执行等操作。