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

Sofia Emelianova
Sofia Emelianova

Usa el panel Developer Resources para verificar si Herramientas para desarrolladores carga correctamente los mapas de origen. Si es necesario, puedes cargarlos de forma manual.

Descripción general

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 el panel Developer Resources, puedes ver el estado de carga de los mapas de origen y también cargarlos de forma manual.

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 orígenes y navega a more_vert > 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.

Filtrado de mapas de origen que no contienen "js" en la URL.

Cómo solucionar problemas relacionados con la carga de mapas de orígenes

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 Cargar a través del sitio web.

La columna "Cargar a través del sitio web" casilla de verificación

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ú.

    Seleccionando "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 fuentes.

  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.