---
title: Uso de un mapa fuente
slug: Tools/Debugger/How_to/Use_a_source_map
tags:
  - Debug
  - mapa fuente
  - source map
translation_of: Tools/Debugger/How_to/Use_a_source_map
original_slug: Tools/Debugger/How_to/Uso_de_un_mapa_fuente
---
<div>{{ToolsSidebar}}</div>

<p>Los fuentes JavaScript ejecutados por el explorador frecuentemente son transformados de alguna manera desde el original creado por el desarrollador. Por ejemplo:</p>

<ul>
 <li>los fuentes a menudo se combinan y minifican para hacer la transferencia desde el servidor más eficiente.</li>
 <li>el código JavaScript que se ejecuta en una página a menudo es generado automáticamente. Como el compilado desde los lenguajes <a href="http://coffeescript.org/">CoffeeScript</a> o <a href="http://www.typescriptlang.org/">TypeScript</a>.</li>
</ul>

<p>En estas situaciones, es mucho más fácil depurar el código fuente en el estado original, que el fuente en el estado transformado que el navegador ha descargado. Un <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">mapa fuente</a> es un fichero que mapea el código transformado hacia el estado original, permitiendo al navegador reconstruir el fuente original y presentar el código original en el debugger.</p>

<p>Para habilitar al debugger trabajar con un mapa fuente, debes:</p>

<ul>
 <li>generar el mapa fuente</li>
 <li>incluir un comentario en el fichero transformado, apuntando al mapa fuente. La sintaxis del comentario es la siguiente:</li>
</ul>

<pre class="brush: js"><code>//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</code></pre>

<p>{{EmbedYouTube("Fqd15gHC4Pg")}}</p>

<p>En el video anterior, cargamos <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>. Esta página carga un fuente llamado "main.js" que fue originalmente escrito en CoffeeScript y compilado a JavaScript. El fuente compilado contiene un comentario como el siguiente, que apunta al mapa fuente:</p>

<pre class="brush: js"><code>//# sourceMappingURL=main.js.map</code></pre>

<p>En el <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">panel de fuentes</a> del debugger, el fichero fuente original en CoffeeScript aparece ahora como "main.coffee", y podemos depurarlo como cualquier otro fichero fuente.</p>