Recursos para desarrolladores: Cómo visualizar y cargar mapas de origen de forma manual

Sofía Emelianova
Sofía Emelianova

Usa la pestaña Recursos para desarrolladores a fin de verificar si Herramientas para desarrolladores carga los mapas de origen correctamente. Si es necesario, puedes cargarlos manualmente.

Cuando abres Herramientas para desarrolladores, esta intenta cargar mapas de origen, si los hubiera. En caso de falla, la consola registra un error similar al siguiente.

Error de carga del mapa de origen en Console.

En la pestaña del panel lateral Developer Resources, puedes ver el estado de carga del mapa de origen y aun cargar mapas de origen de forma manual.

Abre Recursos para desarrolladores y verifica el estado

Para verificar los estados de carga de los mapas de orígenes, sigue estos pasos:

  1. Abre las Herramientas para desarrolladores, asegúrate de habilitar los mapas de origen y navega a Menú de tres puntos > Más herramientas > Recursos para desarrolladores.
  2. En la tabla, verifica los valores de las siguientes columnas:

    • Estado para comprobar si la carga del mapa de origen se realizó correctamente o no
    • Error para leer el mensaje de error, si existe.

Las columnas Estado y Error.

Filtrar recursos por URL o error

Para centrarte en los mapas de orígenes que te interesan, ingresa el texto correspondiente en el cuadro de texto de la parte superior para filtrar los mapas de orígenes que no contengan este texto en las URLs ni en los mensajes de error.

Se filtran los mapas de orígenes que no contienen "js" en la URL.

Solución de problemas

De forma predeterminada, Herramientas para desarrolladores solicita mapas de origen en lugar del sitio web. Estas solicitudes pueden tratarse como de origen cruzado y es posible que no se transfieran.

Para crear primero los mapas de origen de las solicitudes del sitio web, en la esquina superior derecha de Recursos para desarrolladores, marca la opción Casilla de verificación. Habilitar la carga mediante el destino.

Si aún tienes problemas con la carga de los mapas de origen, intenta cargarlos manualmente como se describe a continuación.

Carga un mapa de fuentes de forma manual

Si encuentras fallas de carga o, por ejemplo, si deseas depurar tu código original en un sitio web en producción que carece de mapas de origen, puedes cargarlos manualmente:

  1. Genera mapas de orígenes con herramientas compatibles.
  2. Aloja los mapas de origen de manera local.
  3. Abre las Herramientas para desarrolladores en tu página y asegúrate de habilitar los mapas de origen.
  4. Abre el archivo implementado (procesado) en Sources, haz clic con el botón derecho en el Editor y selecciona Add source map en el menú.

    Selecciona "Agregar mapas de origen" en el menú.

  5. En el cuadro de texto, especifica la URL del mapa de fuentes y haz clic en Agregar.

    Especifica la URL del mapa de fuentes.

  6. Verifica si el mapa de fuentes apareció en Recursos para desarrolladores y si el archivo original (asignado a partir del implementado) en el árbol de archivos.

    Un mapa de orígenes cargado manualmente hace que el archivo original aparezca en el árbol de archivos.

  7. Continúa con la depuración del archivo original.