Depuración segura del código original mediante mapas de origen del servidor de símbolos de Azure Artifacts

  • Artículo

Para ver y trabajar de forma segura con el código fuente de desarrollo original en DevTools en lugar del código de producción compilado, minificado y agrupado devuelto por el servidor web, puede usar mapas de origen publicados en el servidor de símbolos de Azure Artifacts.

El origen asigna el código de producción compilado a los archivos de origen de desarrollo originales. En DevTools, puede ver y trabajar con los archivos de origen de desarrollo conocidos, en lugar del código compilado. Para obtener más información sobre la asignación de origen y el uso de mapas de origen en DevTools, consulte Asignación del código procesado al código fuente original para la depuración.

La descarga de los mapas de origen desde el servidor de símbolos de Azure Artifacts permite depurar el sitio web de producción recuperando el código fuente de desarrollo original de forma segura.

Requisito previo: Publicación de asignaciones de origen al servidor de símbolos de Azure Artifacts

Para usar mapas de origen desde el servidor de símbolos de Azure Artifacts en DevTools, primero deben publicarse en el servidor.

Para obtener información sobre cómo publicar mapas de origen, consulte Depuración segura del código original mediante la publicación de mapas de origen en el servidor de símbolos de Azure Artifacts.

Paso 1: Habilitar mapas de origen en DevTools

Para asegurarse de que los mapas de origen están habilitados en DevTools:

  1. Para abrir DevTools, en Microsoft Edge, haga clic con el botón derecho en una página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS).

  2. En DevTools, haga clic en Configuración (icono Configuración) >Preferencias.

  3. Asegúrese de que la casilla Habilitar mapas de origen de JavaScript y la casilla Habilitar mapas de origen CSS estén activadas:

    La pantalla DevTools settings (Configuración de preferencias) en DevTools settings (Configuración de DevTools)

Paso 2: Conexión de DevTools al servidor de símbolos de Azure Artifacts

DevTools debe configurarse para recuperar correctamente los mapas de origen publicados para su sitio web.

Para configurar DevTools, cree una conexión de servidor de símbolos de Azure Artifacts. Hay dos tipos de conexiones: Microsoft Entra identificador, que es el más fácil de usar, y token de acceso personal.

Conexión al servidor de símbolos mediante el identificador de Microsoft Entra

  1. En DevTools, haga clic en Configuración (icono Configuración) >Servidor de símbolos.

  2. Haga clic en Agregar conexión del servidor de símbolos para empezar a crear una nueva conexión.

  3. En la lista desplegable Modo de autorización, seleccione Microsoft Entra id.

    Si la opción Microsoft Entra ID está deshabilitada, inicie sesión en Microsoft Edge. Para más información, consulte Iniciar sesión para sincronizar Microsoft Edge entre dispositivos.

  4. En Organización de Azure DevOps, haga clic en Seleccionar.

    Pantalla de configuración del servidor de símbolos en DevTools

    Aparece la lista de organizaciones de DevOps de las que es miembro.

  5. Haga doble clic en la organización a la que desea conectarse o haga clic en ella y, a continuación, presione Entrar.

  6. Haga clic en Agregar para crear la conexión.

    Pantalla de configuración del servidor de símbolos en DevTools, que muestra el botón Agregar para crear una nueva conexión

  7. Haga clic en el botón Cerrar (cerrar configuración) situado en la esquina superior derecha para cerrar el panel Configuración y, a continuación, haga clic en el botón Volver a cargar DevTools .

Conexión al servidor de símbolos mediante un token de acceso personal

Para conectarse al servidor de símbolos mediante un token de acceso personal (PAT), genere primero una nueva PAT en Azure DevOps y, a continuación, configure DevTools.

Generación de una nueva PAT en Azure DevOps

  1. Inicie sesión en la organización de Azure DevOps en https://dev.azure.com/{yourorganization}.

  2. En Azure DevOps, vaya a Configuración de> usuarioTokens de acceso personal:

    Menú

    Aparece la página Tokens de acceso personal :

    Página

  3. Haga clic en Nuevo token. Se abre el cuadro de diálogo Crear un nuevo token de acceso personal :

    Cuadro de diálogo

  4. En el cuadro de texto Nombre , escriba un nombre para la PAT, como "devtool source maps".

  5. En la sección Expiración , escriba una fecha de expiración para la PAT.

  6. En la sección Ámbitos , haga clic en Mostrar todos los ámbitos para expandir la sección.

  7. Desplácese hacia abajo hasta Símbolos y, a continuación, seleccione la casilla Leer .

  8. Haga clic en el botón Crear. Aparece el cuadro de diálogo ¡Correcto! :

    Cuadro de diálogo

  9. Haga clic en el botón Copiar en el Portapapeles para copiar la PAT. Asegúrese de copiar el token y almacenarlo en una ubicación segura. Por su seguridad, no se volverá a mostrar.

Para más información sobre PAT, consulte Uso de tokens de acceso personal.

Ahora se ha generado el nuevo PAT. A continuación, configure DevTools.

Configuración de DevTools

  1. En DevTools, haga clic en Configuración (icono Configuración) >Servidor de símbolos.

  2. Haga clic en Agregar conexión del servidor de símbolos para empezar a crear una nueva conexión.

  3. En la lista desplegable Modo de autorización , seleccione Token de acceso personal.

  4. En el cuadro de texto Organización de Azure DevOps , escriba la organización de Azure DevOps donde creó la PAT.

  5. En el cuadro de texto Token de acceso personal, pegue el token de acceso personal (PAT):

    Pantalla de configuración del servidor de símbolos en la configuración de DevTools, que muestra los campos necesarios para crear una nueva conexión PAT

  6. Haga clic en el botón Agregar. Se crea la conexión.

  7. Haga clic en el botón Cerrar (cerrar configuración) situado en la esquina superior derecha para cerrar el panel Configuración y, a continuación, haga clic en el botón Volver a cargar DevTools .

Paso 3: Recuperar código original en DevTools

Después de realizar los pasos de configuración anteriores, cuando use DevTools para trabajar en una compilación de su sitio web para la que se han publicado símbolos, ahora puede ver el código fuente original, en lugar del código transformado.

  • En la herramienta Consola , los vínculos de los mensajes de registro a los archivos de origen van a los archivos originales, no a los archivos compilados.

  • Al recorrer el código paso a paso en la herramienta Orígenes , los archivos originales se muestran en el panel Navegador de la izquierda.

  • En la herramienta Orígenes , los vínculos a los archivos de origen que aparecen en la pila de llamadas del panel Depurador abren los archivos de origen originales.

Conexión a varios servidores de símbolos de Azure Artifacts

Para capturar mapas de origen de varias organizaciones de Azure DevOps, configure DevTools para conectarse a varios servidores de símbolos de Azure Artifacts, como se indica a continuación:

  1. En DevTools, haga clic en Configuración (icono Configuración) >Servidor de símbolos.

  2. Haga clic en Agregar conexión del servidor de símbolos para crear una conexión adicional.

  3. Configure la nueva conexión. Consulte Conexión al servidor de símbolos mediante Microsoft Entra id. o Conexión al servidor de símbolos con un token de acceso personal.

Para editar o quitar una conexión existente, mantenga el puntero sobre la conexión y, a continuación, haga clic en el botón Editar (editar icono) o Quitar (quitar icono) situado junto a la conexión en la página Configuración del servidor de símbolos :

Botones de eliminación y edición, en un elemento de conexión, en la página Configuración del servidor de símbolos

Filtrar asignaciones de origen por dirección URL

Para decidir qué mapas de origen se van a descargar a través de la conexión del servidor de símbolos de Azure Artifacts, use la característica Comportamiento de filtro .

  1. En DevTools, haga clic en Configuración (icono Configuración) >Servidor de símbolos.

  2. Cree una nueva conexión o edite una conexión existente.

  3. En la lista desplegable Comportamiento de filtro , seleccione Lista de exclusión para excluir mapas de origen específicos o Lista de inclusión para incluir solo mapas de origen específicos.

  4. En el cuadro de texto debajo de la lista desplegable, escriba una dirección URL por línea para los mapas de origen que desea excluir o incluir:

    Configuración de la lista de inclusión en una pantalla de edición de conexión del servidor de símbolos

  5. Haga clic en el botón Guardar .

    Se admiten los siguientes caracteres comodín:

    Carácter comodín Significado
    ? Coincide con un solo carácter.
    * Coincide con uno o varios caracteres.

    Si selecciona Lista de exclusión, DevTools intenta buscar scripts en los mapas de origen, excepto aquellos que tengan una dirección URL que coincida con una de las entradas de la lista.

    Si selecciona Lista de inclusión, DevTools solo intenta buscar mapas de origen para scripts que tengan direcciones URL que coincidan con una de las entradas de la lista. Por ejemplo, supongamos que selecciona Lista de inclusión en la lista desplegable Comportamiento de filtro y, a continuación, escriba lo siguiente en el cuadro de texto Comportamiento de filtro :

    https://cdn.contoso.com/*
https://packages.contoso.com/*

    En este ejemplo, DevTools solo intenta resolver los mapas de origen que coinciden con estos dos patrones de dirección URL y no intenta cargar mapas de origen para otros scripts.

Comprobación del estado de los mapas de origen descargados

Puede comprobar el estado de los mapas de origen mediante la herramienta Monitor de mapas de origen .

Para obtener más información sobre la herramienta Monitor de mapas de origen y cómo puede ayudar a supervisar qué archivos de origen solicitaron mapas de origen y si se cargaron esos mapas de origen, consulte La herramienta De supervisión de mapas de origen.

Vea también