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

Sofia Emelianova
Sofia Emelianova

Usa la pestaña Developer Resources para verificar si Herramientas para desarrolladores carga correctamente los mapas de origen. Si es necesario, puedes cargarlos de forma manual.

Cuando abres Herramientas para desarrolladores, se intentan cargar los mapas de origen, si los hay. En caso de producirse una falla, la consola registra un error similar al siguiente.

El error de carga del mapa de fuentes en Console.

En la pestaña del panel lateral Recursos para desarrolladores, puedes ver el estado de carga del mapa de origen e incluso cargarlos manualmente.

Abrir Recursos para desarrolladores y verificar el estado

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

  1. Abre 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 en las siguientes columnas:

    • Status para ver si se realizó correctamente o no la carga del mapa de fuentes.
    • Error para leer el mensaje de error, si lo hay.

Las columnas Estado y Error

Filtrar recursos por URL o error

Para enfocarte en los mapas de fuentes que te interesan, ingresa texto en el cuadro de texto de la parte superior para filtrar los mapas de fuentes que no contengan ese texto en URLs o mensajes de error.

Filtrar los mapas de origen que no contengan "js" en la URL.

Solucionar problemas

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

Para crear primero los mapas de orígenes de la solicitud del sitio web, en la esquina superior derecha de Recursos para desarrolladores, marca Casilla de verificación Habilitar la carga mediante el destino.

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

Cómo cargar un mapa de fuentes manualmente

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

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

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

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

    Especifica la URL del mapa de origen.

  6. Verifica si el mapa de fuentes apareció en Developer Resources y el archivo original (asignado desde el que se implementó) en el árbol de archivos.

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

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