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

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

Os mapas de origem mapeiam o código de produção compilado para os arquivos de origem de desenvolvimento originais. No 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 possibilita depurar seu site de produção recuperando seu código-fonte de desenvolvimento original com segurança.

Pré-requisito: A publicação de mapas de origem para o servidor de símbolos de artefatos do Azure

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

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

Etapa 1: habilitar mapas de origem no DevTools

Para garantir que os mapas de origem estejam habilitados no 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. No DevTools, clique em Configurações (ícone de configurações) >Preferências.

  3. Verifique se as caixas de seleção Ativar mapas de origem JavaScript e Ativar mapas de origem CSS estão selecionadas:

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

Etapa 2: Conectar o 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. Existem dois tipos de conexões: o Microsoft Entra ID, que é o mais fácil de usar, e o Token de Acesso Pessoal.

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

  1. No DevTools, clique em Configurações (ícone de configurações) >Servidor de símbolos.

  2. Clique em Adicionar conexão do Servidor de Símbolos para iniciar a criação de 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 DevOps do Azure, clique em Selecionar.

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

    A lista de organizações de DevOps das quais você é membro será exibida.

  5. Clique duas vezes na organização à qual 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 no DevTools, mostrando o botão Adicionar para criar uma nova conexão

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

Conecte-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, em seguida, configure o DevTools.

Gerar um PAT no Azure DevOps

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

  2. No DevOps do Azure, acesse Configurações >do usuárioTokens 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

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

    A caixa de diálogo

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

  5. Na seção Expiração , insira uma data de expiração 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 marque a caixa de seleção Leitura .

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

    A caixa de diálogo

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

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

Seu novo PAT agora foi gerado. Em seguida, configure o DevTools.

Configurar DevTools

  1. No DevTools, clique em Configurações (ícone de configurações) >Servidor de símbolos.

  2. Clique em Adicionar conexão do Servidor de Símbolos para iniciar a criação de uma nova conexão.

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

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

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

    A tela Configuração do servidor de símbolos nas configurações do 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 de configurações de fechamento) no canto superior direito para fechar o painel Configurações e clique no botão Recarregar DevTools .

Etapa 3: recuperar o código original no DevTools

Depois de executar as etapas de configuração acima, ao usar o DevTools para trabalhar em uma compilação do seu site para a qual os símbolos foram publicados, agora você pode ver o código-fonte original, em vez do código transformado.

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

  • Ao percorrer o código na ferramenta Códigos-fonte , os arquivos originais são listados no painel Navegador à esquerda.

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

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

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

  1. No DevTools, clique em Configurações (ícone de 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 o 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 de 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 quais mapas de origem baixar por meio da conexão do servidor de símbolos do Azure Artifacts, use o recurso Comportamento do filtro.

  1. No DevTools, clique em Configurações (ícone de configurações) >Servidor de símbolos.

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

  3. Na lista suspensa Comportamento de 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 do servidor de símbolos

  5. Clique no botão Salvar .

    Há suporte para os seguintes curingas:

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

    Se você selecionar Lista de exclusão, o DevTools tentará pesquisar todos os mapas de origem para scripts, exceto aqueles que têm uma URL que corresponde a uma das entradas na lista.

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

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

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

Verifique o status dos 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 Monitor de Mapas de Origem.

Confira também

  • Last updated on