---
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>