Recursos para desenvolvedores: visualizar e carregar manualmente mapas de origem

Sofia Emelianova
Sofia Emelianova

Use a guia Recursos do desenvolvedor para verificar se o DevTools carrega os mapas de origem corretamente. Se necessário, você pode carregá-los manualmente.

Quando você abre o DevTools, ele tenta carregar mapas de origem, se houver. Em caso de falha, o Console registra um erro semelhante ao seguinte.

Erro no carregamento do mapa de origem no console.

Na guia da gaveta Recursos para desenvolvedores, você pode ver o status de carregamento do mapa de origem e até mesmo carregar mapas de origem manualmente.

Abrir os Recursos do desenvolvedor e verificar o status

Para verificar o status de carregamento dos mapas de origem:

  1. Abra o DevTools, ative os mapas de origem e navegue até Menu de três pontos. > Mais ferramentas > Recursos para desenvolvedores.
  2. Na tabela, verifique os valores nas seguintes colunas:

    • Status para saber se o carregamento do mapa de origem foi bem-sucedido ou com falha.
    • Error para ler a mensagem de erro, se houver.

Colunas "Status" e "Erro".

Filtrar recursos por URL ou erro

Para se concentrar nos mapas de origem do seu interesse, insira o texto na caixa de texto na parte de cima para filtrar os que não contêm esse texto em URLs ou mensagens de erro.

Filtrando mapas de origem que não contêm "js" no URL.

Resolver problemas

Por padrão, o DevTools solicita mapas de origem em vez do site. Essas solicitações podem ser tratadas como de origem cruzada e talvez não sejam atendidas.

Para fazer com que o site solicite os mapas de origem primeiro, no canto superior direito de Recursos para desenvolvedores, marque Caixa de seleção. Ativar o carregamento pelo destino.

Se você ainda tiver problemas com o carregamento dos mapas de origem, tente carregá-los manualmente, conforme descrito a seguir.

Carregar um mapa de origem manualmente

Se você encontrar falhas no carregamento ou, por exemplo, quiser depurar seu código original em um site em produção que não tem mapas de origem, carregue-os manualmente:

  1. Gere mapas de origem usando ferramentas compatíveis.
  2. Hospede os mapas de origem localmente.
  3. Abra o DevTools na sua página e ative os mapas de origem.
  4. Abra o arquivo implantado (processado) em Sources, clique com o botão direito do mouse no Editor e selecione Add source map no menu.

    Selecionando "Adicionar mapas de origem" no menu.

  5. Na caixa de texto, especifique o URL do mapa de origem e clique em Adicionar.

    Especificar o URL do mapa de origem.

  6. Verifique se o mapa de origem apareceu em Recursos para desenvolvedores e o arquivo original (mapeado do implantado) na árvore de arquivos.

    Um mapa de origem carregado manualmente faz o arquivo original aparecer na árvore de arquivos.

  7. Continue para depurar o arquivo original.