aboutsummaryrefslogtreecommitdiff
path: root/files/es/tools/debugger/how_to/use_a_source_map
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:46:50 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:46:50 +0100
commita55b575e8089ee6cab7c5c262a7e6db55d0e34d6 (patch)
tree5032e6779a402a863654c9d65965073f09ea4182 /files/es/tools/debugger/how_to/use_a_source_map
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.gz
translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.bz2
translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.zip
unslug es: move
Diffstat (limited to 'files/es/tools/debugger/how_to/use_a_source_map')
-rw-r--r--files/es/tools/debugger/how_to/use_a_source_map/index.html36
1 files changed, 36 insertions, 0 deletions
diff --git a/files/es/tools/debugger/how_to/use_a_source_map/index.html b/files/es/tools/debugger/how_to/use_a_source_map/index.html
new file mode 100644
index 0000000000..30e60902cd
--- /dev/null
+++ b/files/es/tools/debugger/how_to/use_a_source_map/index.html
@@ -0,0 +1,36 @@
+---
+title: Uso de un mapa fuente
+slug: Tools/Debugger/How_to/Uso_de_un_mapa_fuente
+tags:
+ - Debug
+ - mapa fuente
+ - source map
+translation_of: Tools/Debugger/How_to/Use_a_source_map
+---
+<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>