diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
commit | a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 (patch) | |
tree | 5032e6779a402a863654c9d65965073f09ea4182 /files/es/tools/debugger/how_to/use_a_source_map | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-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.html | 36 |
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> |