blob: 720ef166221035f5531402b54a2bde8bc2bf2b21 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
---
title: 使用 source map
slug: Tools/Debugger/How_to/Use_a_source_map
tags:
- Use a source map
- source map
translation_of: Tools/Debugger/How_to/Use_a_source_map
---
<div>{{ToolsSidebar}}</div>
<div>被浏览器执行的JavaScript代码通常会以某种方式从开发人员创建的原始资源中转译而来。例如：</div>
<ul>
<li>源码通常会合并和最小化以高效的从服务器端获取</li>
<li>页面中运行的JavaScript通常是机器生成的，就像从CoffeeScript或TypeScript这样的语言编译时一样。</li>
</ul>
<p>在这些场景下，调试原始源代码会比浏览器下载的转换后的代码更加容易。 <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source map</a> 是从已转换的代码映射到原始源的文件，使浏览器能够重构原始源并在调试器中显示重建的原始源。</p>
<p>为了调试工作能够使用source map，你必须：</p>
<ul>
<li>生产一个source map</li>
<li>加入一个注释在转换后的文件，它指向source map。注释的语法类似：</li>
</ul>
<pre class="brush: js"><code>//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</code></pre>
<p>{{EmbedYouTube("Fqd15gHC4Pg")}}</p>
<p>在此视频我们加载了 <a href="https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html">https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html</a>. 页面加载一个名为“main.js”的源，该源最初是用CoffeeScript编写的，并编译为JavaScript。已编译的源包含这样的注释，指向源映射：</p>
<pre class="brush: js"><code>//# sourceMappingURL=main.js.map</code></pre>
<p>在调试器的 <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">source list pane</a> 中，原始的CoffeeScript源现在显示为“main.coffee”，我们可以像调整任何其他源一样调试它。.</p>
|
