Recursos para desenvolvedores: visualizar e carregar manualmente mapas de origem

Sofia Emelianova

Use a guia Recursos para desenvolvedores para verificar se o DevTools carrega os mapas de origem corretamente. Se necessário, é possível carregá-los manualmente.

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

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

Abrir os recursos para desenvolvedores 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é > Mais ferramentas > Recursos para desenvolvedores.

2. Na tabela, verifique os valores nas seguintes colunas:

   • Status para verificar se o carregamento do mapa de origem foi concluído ou falhou.
   • Error para ler a mensagem de erro, se houver.

Filtrar recursos por URL ou erro

Para focar nos mapas de origem do seu interesse, insira o texto na caixa de texto localizada na parte superior da página para filtrar os mapas de origem que não contêm esse texto em URLs ou mensagens de erro.

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 podem não ser aprovadas.

Para criar os mapas de origem das solicitações do site primeiro, no canto superior direito de Recursos para desenvolvedores, marque Ativar carregamento pelo destino.

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

Carregar um mapa de origem manualmente

Se você encontrar falhas de carga ou, por exemplo, quiser depurar seu código original em um site em produção que não tem mapas de origem, é possível carregá-los 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 nele com o botão direito do mouse no Editor e selecione Add source map no menu.

   

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

   

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

   

7. Prossiga para a depuração do arquivo original.