Resolução de problemas da extensão DevTools

• Certifique-se de que abre as DevTools de uma das formas ou cenários suportados. Veja Abrir DevTools e o browser DevTools.

Controlar a edição de espelho CSS

Por predefinição, a caixa de verificação espelho edição do CSS está selecionada, no separador Estilos, na ferramenta Elementos, no separador DevTools do Edge. Se alterar os valores CSS com DevTools, mas o DevTools não encontrar um ficheiro correspondente numa área de trabalho (pasta) aberta no Visual Studio Code, são apresentadas mensagens de erro sobre o mapeamento para ficheiros de origem para CSS espelho edição.

Se estiver a alterar o CSS no DevTools, também:

• Selecione a caixa de verificação CSS espelho a editar e abra uma pasta que contenha ficheiros de origem que correspondam à página Web que está a inspecionar com as DevTools.

• Em alternativa, desmarque a caixa de verificação de edição do CSS espelho, para evitar essas mensagens de erro.

Veja também:

• A caixa de verificação Edição do Espelho CSS em Atualizar ficheiros .css a partir do separador Estilos (edição de espelho CSS)
• Mapear ficheiros de URL para a pasta aberta em Abrir DevTools e no browser DevTools.

Reiniciar As DevTools

Uma forma avançada de reiniciar o DevTools é fechar e reabrir a pasta:

1. Em Visual Studio Code, selecioneFechar Pasta deFicheiros>.

2. Se tiver iniciado um servidor Web com o Terminal no Visual Studio Code, reinicie o servidor Web, como ao executar npx http-server. Em alternativa, pode iniciar o servidor Web a partir de uma linha de comandos fora do Visual Studio Code, para que continue em execução. Para obter mais informações, veja Passo 6: Configurar um servidor localhost em Instalar a extensão DevTools para Visual Studio Code.

3. No Visual Studio Code, selecione Abrir Ficheiro>Recente e abra uma pasta que contenha ficheiros de origem de página Web.

Fechar todas as instâncias de DevTools

Normalmente, fechar os dois separadores DevTools fecha todas as instâncias do DevTools e do browser DevTools. Se a barra de ferramentas Depurar estiver aberta, clique no botão Parar .

Para repor o estado de DevTools, feche todas as instâncias de DevTools. Certifique-se de que o botão Iniciar Instância é apresentado na Barra de Atividade> Visual Studio Code > Barra Lateraldas Ferramentas do Microsoft Edge. Isto indica que nenhuma instância de DevTools está em execução.

Se necessário, feche todas as Visual Studio Code instâncias e, em seguida, abra Visual Studio Code e certifique-se de que o botão Iniciar Instância é apresentado na Barra de Atividades> Barra Lateraldas Ferramentas do Microsoft Edge.

Mensagens de erro

A solução para a maioria das mensagens de erro é abrir DevTools de uma das formas recomendadas. Certifique-se de que está aberta uma pasta que contém ficheiros de origem de páginas Web que as DevTools podem mapear para o caminho do ficheiro ou URL que o browser DevTools está a utilizar.

O browser DevTools utiliza o URL ou o caminho do ficheiro que especificar de qualquer uma das várias formas:

Se introduzir um URL ou caminho de ficheiro diferente na Barra de endereço do browser DevTools, para que o DevTools forneça um CSS automático espelho edição de ficheiros de origem local, também tem de abrir uma pasta que contenha ficheiros que correspondam à página Web (caminho do ficheiro ou URL) que especificar no browser DevTools.

Suponha que clica no botão Iniciar Instância e, em seguida, cola um URL de localhost na barra de Endereço, como http://localhost:8080, mas não tem a pasta de ficheiros de origem local aberta. Em seguida, no separador Estilos da ferramenta Elementos, tente alterar um valor CSS. Podem ser apresentadas mensagens de erro, tais como:

• Erro ao espelhar o conteúdo css para documentar. Não foi possível espelho alterações css ao documento. Não foi encontrado nenhum mapeamento da área de trabalho.

• Não é possível abrir o ficheiro no editor.

• Erro ao abrir o ficheiro no editor.

• Erro ao obter.

• Não foi possível anexar ao destino principal.

• Erro ao obter a lista de destinos disponíveis. Não existem destinos disponíveis para anexar.

Se receber erros ao tentar apontar para um caminho de ficheiro, em vez de utilizar um launch.json ficheiro, experimente clicar com o botão direito do rato no .html ficheiro:

Veja Abrir DevTools e o browser DevTools.

Eliminar ou recriar launch.json

Além de fechar uma nova pasta, se quiser repor um projeto para utilizar com o DevTools, pode eliminar e, opcionalmente, recriar launch.json. launch.json define as configurações de depuração.

O ficheiro seguinte launch.json é demasiado curto para a extensão DevTools. Foi criado por Visual Studio Code sem utilizar a extensão DevTools. O repositório Demos não tem launch.json na demonstração de tarefas, pelo que poderá querer remover o ficheiro:

Para recriar um novo launch.json ficheiro para DevTools:

1. Faça uma cópia de segurança do launch.json ficheiro.

2. Na Barra de> Atividade do Visual Studio Code >Explorer, clique com o botão direito do rato em launch.json>Eliminar.

   Barra> de AtividadeAs Ferramentas do Microsoft Edge mostram agora um botão Iniciar Instância e um botão Gerar launch.json.

3. Se quiser utilizar um launch.json ficheiro para DevTools, certifique-se de que tem a pasta pretendida aberta na Barra de Atividade> do Visual Studio Code >Explorer e, em seguida, clique no botão Gerar launch.json. Consulte Abrir DevTools ao clicar no botão Iniciar Projeto em Abrir DevTools e no browser DevTools.

launch.json requer JSON bem formado

Se asFerramentas do Microsoft Edge da Barra> de Atividade contiverem um botão Configurar launch.json em vez do botão Iniciar Projeto esperado quando existe um ficheiro gerado launch.json por DevTools na pasta aberta, tal pode ser causado pela adição de uma linha com uma vírgula em falta ou aspas vazias. Certifique-se de que launch.json contém JSON bem formado.

Confira também

• Começar a utilizar a extensão DevTools para Visual Studio Code
• Extensão DevTools do Microsoft Edge para Visual Studio Code
• Abrir DevTools e o browser DevTools