Partilhar via

Depurar com segurança o código original usando mapas de origem do servidor de símbolos do Azure Artifacts

  • Artigo

Para ver e trabalhar com segurança com o código-fonte de desenvolvimento original em DevTools, em vez do código de produção compilado, extraído e empacotado retornado pelo servidor Web, você pode usar mapas de origem publicados no servidor de símbolos do Azure Artifacts.

Mapas de origem mapeiam seu código de produção compilado para seus arquivos de origem de desenvolvimento originais. Em DevTools, você pode ver e trabalhar com seus arquivos de origem de desenvolvimento familiares, em vez do código compilado. Para saber mais sobre o mapeamento de origem e o uso de mapas de origem no DevTools, consulte Mapear o código processado para o código-fonte original, para depuração.

Baixar seus mapas de origem do servidor de símbolos do Azure Artifacts torna possível depurar seu site de produção recuperando seu código-fonte de desenvolvimento original com segurança.

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

Para usar mapas de origem do servidor de símbolos do Azure Artifacts em DevTools, eles precisam ser publicados primeiro no servidor.

Para saber mais sobre como publicar mapas de origem, consulte Depurar código original com segurança publicando mapas de origem no servidor de símbolos do Azure Artifacts.

Etapa 1: Habilitar mapas de origem em DevTools

Para garantir que os mapas de origem estejam habilitados em DevTools:

  1. Para abrir o DevTools, no Microsoft Edge, clique com o botão direito do mouse em uma página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS).

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

  3. Verifique se a caixa de seleção Habilitar mapas de origem JavaScript e a caixa de seleção Habilitar mapas de origem do CSS estão selecionadas:

    A tela de configuração Preferências nas configurações de DevTools

Etapa 2: Conectar DevTools ao servidor de símbolos do Azure Artifacts

O DevTools precisa ser configurado para recuperar com êxito os mapas de origem publicados para seu site.

Para configurar o DevTools, crie uma conexão do servidor de símbolos do Azure Artifacts. Há dois tipos de conexões: Microsoft Entra ID, que é a mais fácil de usar, e Token de Acesso Pessoal.

Conecte-se ao servidor de símbolos usando Microsoft Entra ID

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

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

  3. Na lista suspensa Modo de Autorização, selecione Microsoft Entra ID.

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

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

    A tela de configuração do Servidor de Símbolos em DevTools

    A lista de organizações DevOps das quais você é membro aparece.

  5. Clique duas vezes na organização à qual você deseja se conectar ou clique nela e pressione Enter.

  6. Clique em Adicionar para criar a conexão.

    A tela de configuração do Servidor de Símbolos em DevTools, mostrando o botão Adicionar para criar uma nova conexão

  7. Clique no botão Fechar (ícone Fechar configurações) no canto superior direito para fechar o painel Configurações e clique no botão Recarregar DevTools .

Conectar-se ao servidor de símbolos usando um Token de Acesso Pessoal

Para se conectar ao servidor de símbolos usando um PAT (Token de Acesso Pessoal), primeiro gere um novo PAT no Azure DevOps e configure DevTools.

Gerar um novo PAT no Azure DevOps

  1. Entre em sua organização do Azure DevOps acessando https://dev.azure.com/{yourorganization}.

  2. No Azure DevOps, acesse Configurações de usuário Tokens>de acesso pessoal:

    O menu 'Configurações do usuário' no Azure DevOps, com o comando 'Tokens de acesso pessoal'

    A página Tokens de Acesso Pessoal é exibida:

    A página 'Tokens de Acesso Pessoal' no Azure DevOps

  3. Clique em Novo Token. A caixa de diálogo Criar um token de acesso pessoal é aberta:

    A caixa de diálogo 'Criar um novo token de acesso pessoal', com o escopo 'Leitura' para Símbolos selecionados

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

  5. Na seção Expiração , insira uma data de validade para o PAT.

  6. Na seção Escopos , clique em Mostrar todos os escopos para expandir a seção.

  7. Role para baixo até Símbolos e selecione a caixa de seleção Ler .

  8. Clique no botão Criar . A caixa de diálogo Sucesso! é exibida:

    A caixa de diálogo 'Sucesso!' com o PAT para copiar

  9. Clique no botão Copiar para área de transferência para copiar o PAT. Copie o token e armazene-o em um local seguro. Para sua segurança, ela não será mostrada novamente.

Para saber mais sobre o PAT, confira Usar tokens de acesso pessoal.

Seu novo PAT já foi gerado. Em seguida, configure DevTools.

Configurar DevTools

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

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

  3. Na lista suspensa Modo de Autorização , selecione Token de Acesso Pessoal.

  4. Na caixa de texto da organização do Azure DevOps, insira a organização do Azure DevOps na qual você criou o PAT.

  5. Na caixa de texto do token de acesso pessoal , cole seu PAT (token de acesso pessoal):

    A tela de configuração do Servidor de Símbolos nas configurações de DevTools, mostrando os campos necessários para criar uma nova conexão PAT

  6. Clique no botão Adicionar. A conexão é criada.

  7. Clique no botão Fechar (ícone Fechar configurações) no canto superior direito para fechar o painel Configurações e clique no botão Recarregar DevTools .

Etapa 3: recuperar código original em DevTools

Depois de fazer as etapas de configuração acima, quando você usa o DevTools para trabalhar em um build do seu site para o qual os símbolos foram publicados, agora você pode ver seu código-fonte original, em vez do código-fonte transformado.

  • Na ferramenta Console , links de mensagens de log para arquivos de origem vão para os arquivos originais, não para os arquivos compilados.

  • Ao passar pelo código na ferramenta Fontes , os arquivos originais são listados no painel Navegador à esquerda.

  • Na ferramenta Fontes , os links para arquivos de origem que aparecem no painel Pilha de Chamadas do Depurador abrem os arquivos de origem originais.

Conectar-se a vários servidores de símbolo do Azure Artifacts

Para buscar guias de origem de várias organizações do Azure DevOps, configure DevTools para se conectar a vários servidores de símbolo do Azure Artifacts, da seguinte maneira:

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

  2. Clique em Adicionar conexão do Servidor de Símbolos para criar uma conexão adicional.

  3. Configure a nova conexão. Consulte Conectar-se ao servidor de símbolos usando Microsoft Entra ID ou Conectar-se ao servidor de símbolos com um Token de Acesso Pessoal.

Para editar ou remover uma conexão existente, passe o mouse sobre a conexão e clique no botão Editar (Editar ícone) ou Remover (ícone Remover) ao lado da conexão na página Configurações do Servidor de Símbolos :

Os botões remover e editar, em um item de conexão, na página Configurações do Servidor de Símbolos

Filtrar mapas de origem por URL

Para decidir qual origem mapeia para baixar por meio da conexão do servidor de símbolos do Azure Artifacts, use o recurso De comportamento filtrar .

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

  2. Crie uma nova conexão ou edite uma conexão existente.

  3. Na lista suspensa 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 suspensa, insira uma URL por linha para os mapas de origem que você deseja excluir ou incluir:

    A configuração da lista de inclusão em uma tela de edição de conexão de servidor de símbolo

  5. Clique no botão Salvar .

    Há suporte para os seguintes curingas:

    Curinga Significado
    ? Corresponde a um único caractere.
    * Corresponde a um ou mais caracteres.

    Se você selecionar Lista de Exclusão, DevTools tentará pesquisar quaisquer mapas de origem para scripts, exceto aqueles que têm uma URL que corresponda a uma das entradas da lista.

    Se você selecionar Lista de Inclusão, o DevTools só tentará pesquisar mapas de origem para scripts que tenham URLs que correspondam a uma das entradas da lista. Por exemplo, suponha que você selecione Lista de Inclusão na lista suspensa Comportamento do filtro e insira o seguinte na caixa de texto Filtrar comportamento :

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

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

Verifique o status de mapas de origem baixados

Você pode marcar o status de seus mapas de origem usando a ferramenta Monitor de Mapas de Origem.

Para saber mais sobre a ferramenta Monitor de Mapas de Origem e como ela pode ajudar a monitorar quais arquivos de origem solicitaram mapas de origem e se esses mapas de origem foram carregados, consulte Ferramenta Do Source Maps Monitor.

Confira também