Solução de problemas da extensão DevTools

• Certifique-se de abrir o DevTools de uma das maneiras ou cenários com suporte. Consulte Abrindo o DevTools e o navegador DevTools.

Controlando a edição de espelho CSS

Por padrão, a caixa de seleção de edição de espelho CSS está marcada na guia Estilos da ferramenta Elementos na guia DevTools do Edge. Se você alterar os valores CSS usando o DevTools, mas o DevTools não encontrar um arquivo correspondente em um espaço de trabalho (pasta) aberto no Visual Studio Code, serão exibidas mensagens de erro sobre o mapeamento para arquivos de origem para edição do espelho CSS.

Se você estiver alterando o CSS no DevTools:

• Marque a caixa de seleção Edição de espelho CSS e abra uma pasta que contenha arquivos de origem que correspondam à página da Web que você está inspecionando com o DevTools.

• Ou desmarque a caixa de seleção de edição de espelho CSS para evitar tais mensagens de erro.

Veja também:

• A caixa de seleção Edição de espelhamento CSS na atualização .css arquivos na guia Estilos (edição espelho CSS)
• Mapeando arquivos de URL para a pasta aberta em Abrindo DevTools e o navegador DevTools.

Reiniciando o DevTools

Uma maneira poderosa de reiniciar o DevTools é fechar e reabrir a pasta:

1. No Visual Studio Code, selecione Arquivo>Fechar Pasta.

2. Se você iniciou um servidor Web usando o Terminal no Visual Studio Code, reinicie o servidor Web, por exemplo, executando npx http-servero . Ou, em vez disso, você pode iniciar o servidor Web a partir de um prompt de comando fora do Visual Studio Code, para que ele continue em execução. Para obter mais informações, consulte Etapa 6: configurar um servidor localhost em Instalando a extensão DevTools para Visual Studio Code.

3. No Visual Studio Code, selecione Arquivo>Abrir Recente e abra uma pasta que contenha os arquivos de origem da página da Web.

Fechando todas as instâncias do DevTools

Normalmente, fechar as duas guias do DevTools fecha todas as instâncias do DevTools e do navegador DevTools. Se a barra de ferramentas Depurar estiver aberta, clique no botão Parar .

Para redefinir o estado do DevTools, feche todas as instâncias do DevTools. Verifique se o botão Iniciar Instância é mostrado na Barra de> Atividades do Visual Studio Code >Barra Lateral de Ferramentas do Microsoft Edge. Isso indica que nenhuma instância do DevTools está em execução.

Se necessário, feche todas as instâncias do Visual Studio Code, abra o Visual Studio Code e verifique se o botão Iniciar Instância é mostrado na Barra de> Atividades Ferramentas daMicrosoft Edge Barra de Atividades.

Mensagens de erro

A solução para a maioria das mensagens de erro é abrir o DevTools de uma das maneiras recomendadas. Certifique-se de que esteja aberta uma pasta que contenha arquivos de origem da página da Web que o DevTools possa mapear para o caminho do arquivo ou URL que o navegador DevTools está usando.

O navegador DevTools usa a URL ou o caminho do arquivo que você especifica de qualquer uma das várias maneiras:

Se você inserir uma URL ou caminho de arquivo diferente na barra de endereços do navegador DevTools, para que o DevTools forneça edição automática de espelho CSS de arquivos de origem locais, você também deve abrir uma pasta que contenha arquivos que correspondam à página da Web (caminho do arquivo ou URL) especificado no navegador DevTools.

Suponha que você clique no botão Launch Instance e cole um URL de localhost na barra de endereços, como http://localhost:8080, mas não tenha a pasta de arquivos de origem local aberta. Em seguida, na guia Estilos da ferramenta Elementos, tente alterar um valor CSS. Mensagens de erro podem aparecer, como:

• Erro ao espelhar o conteúdo css no documento. Não foi possível espelhar as alterações css no documento. Nenhum mapeamento de espaço de trabalho foi encontrado.

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

• Erro ao abrir o arquivo no editor.

• Erro ao buscar.

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

• Erro ao buscar a lista de destinos disponíveis. Não há alvos disponíveis a serem anexados.

Se você receber erros ao tentar apontar para um caminho de arquivo, em vez de usar um launch.json arquivo, tente clicar com o botão direito do mouse no .html arquivo:

Consulte Abrindo o DevTools e o navegador DevTools.

Excluindo ou recriando launch.json

Além de fechar uma reabertura de uma pasta, se você quiser redefinir um projeto para usar com o DevTools, poderá excluir e, opcionalmente, recriar launch.jsonarquivos . launch.json Define configurações de depuração.

O arquivo a seguir launch.json é muito curto para a extensão DevTools. Ele foi criado pelo Visual Studio Code sem usar a extensão DevTools. O repositório Demos não tem launch.json em demo-to-do, então você pode querer remover o arquivo:

Para recriar um launch.json novo arquivo para o DevTools:

1. Faça uma cópia de backup do launch.json arquivo.

2. No Visual Studio Code >Activity BarExplorer>, clique com o botão direito do mouse em launch.json>Excluir.

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

3. Se você quiser usar um launch.json arquivo para DevTools, certifique-se de ter a pasta desejada aberta na Barra> Visual Studio Code > Atividades Explorer e clique no botão Gerar launch.json. Consulte Abrindo o DevTools clicando no botão Iniciar Projeto em Abrindo DevTools e no navegador DevTools.

launch.json exige um JSON bem formado

Se a Barra> de AtividadesFerramentas do Microsoft Edge contiver um botão Configurar launch.json em vez do botão Iniciar Projeto esperado quando um arquivo gerado launch.json pelo DevTools existir na pasta aberta, isso poderá ser causado pela adição de uma linha com uma vírgula ausente ou aspas vazias. Certifique-se de launch.json que contém JSON bem formado.

Confira também

• Introdução ao uso da extensão DevTools para o Visual Studio Code
• Extensão do DevTools do Microsoft Edge para o Visual Studio Code
• Abrindo o DevTools e o navegador DevTools