关于 Chrome 开发者工具 Sources 面板里看到的 from source map

from source map 是指这个 JavaScript 文件是通过源映射（Source Map）生成的。源映射是一种文件，它会将编译后的代码映射回原始的源代码，这样在开发者工具中就可以正确地显示源代码而不是编译后的代码。这在开发过程中非常有用，特别是在调试阶段。

源映射包含了编译后的代码与原始代码之间的映射关系，以及原始代码的路径信息。在开发者工具中，如果你看到一个 JavaScript 文件名以 .dbg.js 结尾，并且鼠标放上去会显示 (from source map)，那么说明这个文件是通过源映射生成的，你看到的实际上是原始的源代码，而不是编译后的代码。

举例来说，假设你正在开发一个使用 TypeScript 编写的 Angular 应用。在编译 TypeScript 代码之后，会生成一堆 JavaScript 文件，但是当你在浏览器中查看开发者工具时，你可能想要看到的是原始的 TypeScript 代码而不是编译后的 JavaScript 代码。这时，源映射就派上了用场，它可以将编译后的 JavaScript 代码映射回原始的 TypeScript 代码，使你能够在开发者工具中准确地调试和查看源代码。

另外，值得一提的是，源映射并不仅限于用于调试 TypeScript。它可以被用于任何需要将编译后的代码映射回原始源代码的情况，比如编译后的 ES6+ 代码映射回原始的 ES5 代码，或者编译后的 JSX 代码映射回原始的 JavaScript 代码。

总的来说，通过源映射生成的 JavaScript 文件可以让开发者在浏览器的开发者工具中更轻松地调试和查看源代码，提高了开发效率和代码质量。

源映射（source map）是一种文件，它包含了编译后的代码与原始代码之间的映射关系，以及原始代码的路径信息。在前端开发中，当我们使用了一些高级语言或者工具对代码进行了转换、压缩、合并等操作后，生成的代码往往难以直接调试或理解。这时，源映射就扮演了一个关键的角色，它提供了一种将编译后的代码映射回原始代码的方法，从而使得开发者可以在浏览器的开发者工具中直接调试源代码，而不需要去理会编译后的代码。

源映射的工作原理主要包括两个方面：映射关系和路径信息。

首先，让我们来看看源映射是如何建立编译后的代码与原始代码之间的映射关系的。当我们使用编译器（比如 TypeScript、Babel 等）对原始代码进行编译时，编译器会生成一个源映射文件，其中包含了一系列映射关系，用来告诉浏览器如何将编译后的代码映射回原始代码。这些映射关系通常以一种称为 VLQ（Variable Length Quantity）的编码方式存储，它能够高效地表示行号、列号等信息。例如，一个简单的映射关系可能是这样的：

1:10 => 3:5

这个映射关系的意思是，编译后的代码的第一行第十列对应于原始代码的第三行第五列。通过这样的映射关系，浏览器就能够根据编译后的代码的位置，找到对应的原始代码的位置，从而在开发者工具中正确地显示源代码。

其次，源映射还包含了原始代码的路径信息。这个路径信息的作用在于告诉浏览器源代码的位置，以便浏览器能够加载正确的源代码进行调试。在源映射文件中，通常会包含原始代码文件的路径、文件名等信息，以及源代码的内容。这样，当浏览器需要加载原始代码进行调试时，它就可以根据路径信息找到对应的源代码文件，并将其加载到开发者工具中。

综上所述，源映射通过建立编译后的代码与原始代码之间的映射关系，并包含原始代码的路径信息，实现了将编译后的代码映射回原始代码的功能。这使得开发者可以在浏览器的开发者工具中直接调试原始代码，极大地提高了开发效率和代码质量。

举个例子来说明源映射的工作原理。假设我们有一个使用 TypeScript 编写的 Angular 应用，经过编译后生成了一堆 JavaScript 文件。在开发过程中，我们希望能够在浏览器的开发者工具中直接调试 TypeScript 源代码。这时，我们就可以利用源映射来实现这个目标。当我们在浏览器中打开开发者工具并选择一个 JavaScript 文件时，浏览器会自动加载对应的源映射文件，并根据映射关系将编译后的代码映射回原始的 TypeScript 代码。同时，浏览器还会根据源映射文件中的路径信息找到对应的 TypeScript 源代码文件，并将其加载到开发者工具中。这样，我们就可以在开发者工具中直接调试 TypeScript 源代码，从而更轻松地发现和解决问题，提高了开发效率和代码质量。