blob: d294c36ba8d774b5adab1e61c0e08a6894d81966 (
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
36
37
|
---
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>
|
