Compartilhar via

Depurar código original de forma segura com mapas de origem do servidor de símbolos Azure Artefactos

Para ver e trabalhar de forma segura com o código fonte de desenvolvimento original em DevTools em vez do código de produção compilado, minificado e agrupado devolvido pelo servidor Web, pode utilizar mapas de origem publicados no servidor de símbolos Azure Artifacts.

Os mapas de origem mapeiam o código de produção compilado para os seus ficheiros de origem de desenvolvimento originais. Em DevTools, pode ver e trabalhar com os seus ficheiros de origem de desenvolvimento familiares, em vez do código compilado. Para saber mais sobre o mapeamento de origem e a utilização de mapas de origem no DevTools, consulte Mapear o código processado para o código fonte original para depuração.

Transferir os mapas de origem do servidor de símbolos Azure Artefactos permite depurar o site de produção ao obter o código fonte de desenvolvimento original de forma segura.

Pré-requisito: publicar mapas de origem no servidor de símbolos Azure Artefactos

Para utilizar mapas de origem do servidor de símbolos Azure Artefactos em DevTools, primeiro têm de ser publicados no servidor.

Para saber mais sobre como publicar mapas de origem, veja Depurar código original de forma segura ao publicar mapas de origem no servidor de símbolos Azure Artifacts.

Passo 1: Ativar mapas de origem no DevTools

Para se certificar de que os mapas de origem estão ativados no DevTools:

  1. Para abrir o DevTools, no Microsoft Edge, clique com o botão direito do rato numa página Web e, em seguida, selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS).

  2. Em DevTools, clique em Definições (ícone Definições) >Preferências.

  3. Certifique-se de que a caixa de verificação Ativar mapas de origem JavaScript e a caixa de verificação Ativar mapas de origem CSS estão selecionadas:

    O ecrã de configuração Preferências nas definições de DevTools

Passo 2: Ligar DevTools ao servidor de símbolos Azure Artefactos

As DevTools têm de ser configuradas para obter com êxito os mapas de origem publicados para o seu site.

Para configurar o DevTools, crie uma ligação de servidor de símbolos Azure Artefactos. Existem dois tipos de ligações: Microsoft Entra ID, que é o mais fácil de utilizar, e Token de Acesso Pessoal.

Ligar ao servidor de símbolos com Microsoft Entra ID

  1. Em DevTools, clique em Definições (ícone Definições) >Servidor de Símbolos.

  2. Clique em Adicionar ligação ao Servidor de Símbolos para começar a criar uma nova ligação.

  3. Na lista pendente Modo de autorização, selecione Microsoft Entra ID.

    Se a opção Microsoft Entra ID estiver desativada, inicie sessão no Microsoft Edge. Para saber mais, consulte Entrar para sincronizar o Microsoft Edge entre dispositivos.

  4. Em Azure organização do DevOps, clique em Selecionar.

    O ecrã de definições do Servidor de Símbolos em DevTools

    É apresentada a lista de organizações de DevOps das quais é membro.

  5. Faça duplo clique na organização à qual pretende ligar ou clique na mesma e, em seguida, prima Enter.

  6. Clique em Adicionar para criar a ligação.

    O ecrã de definições do Servidor de Símbolos em DevTools, a mostrar o botão Adicionar para criar uma nova ligação

  7. Clique no botão Fechar (Fechar definições) no canto superior direito para fechar o painel Definições e, em seguida, clique no botão Recarregar DevTools .

Ligar ao servidor de símbolos com um Token de Acesso Pessoal

Para ligar ao servidor de símbolos com um Token de Acesso Pessoal (PAT), gere primeiro um novo PAT no Azure DevOps e, em seguida, configure DevTools.

Gerar um novo PAT no Azure DevOps

  1. Inicie sessão na sua organização Azure DevOps ao aceder a https://dev.azure.com/{yourorganization}.

  2. No Azure DevOps, aceda a Definições do utilizador Tokens> deacesso pessoal:

    O menu

    É apresentada a página Tokens de Acesso Pessoal :

    A página

  3. Clique em Novo Token. É aberta a caixa de diálogo Criar um novo token de acesso pessoal :

    A caixa de diálogo

  4. Na caixa de texto Nome , introduza um nome para o PAT, como "mapas de origem devtool".

  5. Na secção Expiração , introduza uma data de expiração para o PAT.

  6. Na secção Âmbitos , clique em Mostrar todos os âmbitos para expandir a secção.

  7. Desloque-se para baixo até Símbolos e, em seguida, selecione a caixa de verificação Ler .

  8. Clique no botão Criar . A caixa de diálogo Êxito! é apresentada:

    A caixa de diálogo 'Êxito!' com o PAT a copiar

  9. Clique no botão Copiar para a área de transferência para copiar o PAT. Certifique-se de que copia o token e o armazena numa localização segura. Para sua segurança, não será apresentado novamente.

Para saber mais sobre o PAT, consulte Utilizar tokens de acesso pessoal.

O seu novo PAT foi agora gerado. Em seguida, configure DevTools.

Configurar DevTools

  1. Em DevTools, clique em Definições (ícone Definições) >Servidor de Símbolos.

  2. Clique em Adicionar ligação ao Servidor de Símbolos para começar a criar uma nova ligação.

  3. Na lista pendente Modo de autorização , selecione Token de Acesso Pessoal.

  4. Na caixa de texto Azure organização do DevOps, introduza o Azure organização de DevOps onde criou o PAT.

  5. Na caixa de texto Token de acesso pessoal , cole o token de acesso pessoal (PAT):

    O ecrã de configuração do Servidor de Símbolos nas definições de DevTools, a mostrar os campos necessários para criar uma nova ligação PAT

  6. Clique no botão Adicionar. A ligação é criada.

  7. Clique no botão Fechar (Fechar definições) no canto superior direito para fechar o painel Definições e, em seguida, clique no botão Recarregar DevTools .

Passo 3: obter o código original no DevTools

Depois de efetuar os passos de configuração acima, quando utiliza o DevTools para trabalhar numa compilação do seu site para a qual foram publicados símbolos, agora pode ver o código fonte original, em vez do código transformado.

  • Na ferramenta Consola , as ligações das mensagens de registo aos ficheiros de origem vão para os ficheiros originais e não para os ficheiros compilados.

  • Ao percorrer o código na ferramenta Origens , os ficheiros originais são listados no painel Navegador à esquerda.

  • Na ferramenta Origens , as ligações para ficheiros de origem que aparecem na Pilha de Chamadas do painel Depurador abrem os ficheiros de origem originais.

Ligar a vários servidores de símbolos Azure Artefactos

Para obter os esquemas de origem de várias Azure organizações de DevOps, configure DevTools para ligar a vários servidores de símbolos Azure Artefactos, da seguinte forma:

  1. Em DevTools, clique em Definições (ícone Definições) >Servidor de Símbolos.

  2. Clique em Adicionar ligação ao Servidor de Símbolos para criar uma ligação adicional.

  3. Configure a nova ligação. Veja Ligar ao servidor de símbolos com Microsoft Entra ID ou Ligar ao servidor de símbolos com um Token de Acesso Pessoal.

Para editar ou remover uma ligação existente, paire o cursor sobre a ligação e, em seguida, clique no botão Editar (ícone Editar) ou Remover (ícone Remover) junto à ligação na página de definições do Servidor de Símbolos :

Os botões remover e editar, num item de ligação, na página definições do Servidor de Símbolos

Filtrar mapas de origem por URL

Para decidir quais os mapas de origem a transferir através da ligação do servidor de símbolos Azure Artefactos, utilize a funcionalidade Comportamento do filtro.

  1. Em DevTools, clique em Definições (ícone Definições) >Servidor de Símbolos.

  2. Crie uma nova ligação ou edite uma ligação existente.

  3. Na lista pendente Comportamento do filtro , selecione Lista de Exclusão para excluir mapas de origem específicos ou Lista de Inclusão para incluir apenas mapas de origem específicos.

  4. Na caixa de texto abaixo da lista pendente, introduza um URL por linha para os mapas de origem que pretende excluir ou incluir:

    A definição da lista de inclusão num ecrã de edição de ligação do servidor de símbolos

  5. Clique no botão Guardar .

    São suportados os seguintes carateres universais:

    Curinga Significado
    ? Corresponde a um único caráter.
    * Corresponde a um ou mais carateres.

    Se selecionar Lista de Exclusão, a DevTools tenta procurar scripts em quaisquer mapas de origem, exceto aqueles que tenham um URL que corresponda a uma das entradas na lista.

    Se selecionar Lista de Inclusão, o DevTools apenas tenta procurar os mapas de origem para obter scripts que tenham URLs que correspondam a uma das entradas na lista. Por exemplo, suponha que seleciona Lista de Inclusão na lista pendente Comportamento do filtro e, em seguida, introduza o seguinte na caixa de texto Comportamento do filtro :

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

    Neste exemplo, o DevTools apenas tenta resolve mapas de origem que correspondam a estes dois padrões de URL e não tenta carregar mapas de origem para outros scripts.

Verificar a status dos mapas de origem transferidos

Pode marcar a status dos seus mapas de origem com a ferramenta Deteção de Mapas de Origem.

Para saber mais sobre a ferramenta Monitor de Mapas de Origem e como pode ajudar a monitorizar que ficheiros de origem pediram mapas de origem e se esses mapas de origem foram carregados, consulte a ferramenta Deteção de Mapas de Origem.

Confira também

  • Last updated on