技术讲座：Chrome DevTools 中调试 TypeScript 源码的 Source Map 原理与实践

引言

TypeScript 是一种由微软开发的开源编程语言，它扩展了 JavaScript 的功能，提供了类型系统、接口、模块、装饰器等特性。在开发过程中，TypeScript 代码通常需要被编译成 JavaScript 才能在浏览器中运行。然而，这给调试带来了不便，因为调试的是编译后的 JavaScript 代码，而不是原始的 TypeScript 代码。为了解决这个问题，Source Map 应运而生。本文将深入探讨 Source Map 的原理，并通过实际案例展示如何在 Chrome DevTools 中调试 TypeScript 源码。

Source Map 原理

Source Map 是一种映射关系，它将编译后的 JavaScript 代码与原始的 TypeScript 代码对应起来。当 TypeScript 代码被编译成 JavaScript 代码时，编译器会生成一个 Source Map 文件，其中包含了原始代码与编译后代码之间的映射关系。

Source Map 文件结构

Source Map 文件是一个 JSON 格式的文件，其基本结构如下：

{
  "version": 3,
  "file": "output.js",
  "sourceRoot": "/path/to/source",
  "sources": ["file1.ts", "file2.ts"],
  "mappings": "AAAA;AAC;AAC;AACA;EAAQ;AAC;AAC;EAAQ;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;AAC;