Atualizar .css arquivos de dentro da guia Estilos (edição de espelho CSS)
A edição de espelho do CSS fornece interação bidirecional para que você possa alterar o CSS de qualquer maneira:
No editor de código, edite o
.cssarquivo, suas alterações são espelhadas na ferramenta Elementos na guia DevTools do Edge .Na ferramenta Elementos na guia DevTools do Edge , suas alterações são espelhadas no
.cssarquivo no editor de código.
A edição de espelho do CSS está habilitada por padrão na extensão. Como resultado, na extensão DevTools, na guia Estilos na ferramenta Elementos , quando você altera seletores, regras ou valores do CSS, o arquivo local .css é editado automaticamente à medida que você altera os valores.
Por exemplo, quando você seleciona um valor de tamanho de ponto para o elemento body e, em seguida, pressiona Seta para cima ou Seta para baixo, se você tiver o .css arquivo aberto, poderá ver o valor alterado automaticamente no arquivo em .css tempo real enquanto altera o valor na guia Estilos :
Sem o CSS espelho edição, a guia Estilos no Microsoft Edge DevTools é excelente para depurar e ajustar seus seletores CSS e regras CSS. No entanto, embora essas alterações sejam imediatamente renderizadas no navegador da Web, elas não são refletidas em seu .css arquivo. Isso significa que, depois de alterar o CSS na guia Estilos , você precisará copiar e colar suas alterações novamente no .css arquivo.
A edição de espelho do CSS é um recurso da extensão Microsoft Edge DevTools que funciona em torno desse problema. Qualquer alteração feita na guia Estilos também altera automaticamente o .css arquivo em sua pasta aberta no Visual Studio Code. Você pode editar qualquer seletor CSS ou criar novos seletores CSS na guia Estilos e todas as alterações são automaticamente espelhadas no arquivo correto .css .
A edição de espelho do CSS também funciona para um .html arquivo que contém um <style> elemento, como a página Sucesso. Isso é demonstrado em Introdução clicando no botão Instância de Inicialização.
A caixa de seleção Edição de Espelho do CSS
Se você usar uma URL (em vez de um caminho de arquivo), o CSS espelho edição exigirá a abertura de uma pasta de arquivos de origem da página da Web em Visual Studio Code que a extensão possa mapear para os recursos da página da Web da URL inseridas na barra de endereços ou em um launch.json arquivo. Se você não tiver os arquivos de origem locais, mas quiser alterar o CSS no DevTools, desmarque a caixa de seleção espelho edição do CSS, para evitar mensagens de erro sobre mapeamento e edição de espelho. Confira Habilitar a edição de espelho do CSS abaixo.
Salvando as alterações no arquivo .css
A extensão não salva automaticamente as alterações feitas no editor. Um círculo branco aparece na .css guia do arquivo no editor; você precisa salvar manualmente as alterações se quiser mantê-las.
Se você fechar o Visual Studio ou a pasta atual ou o arquivo, o .css Visual Studio solicitará que você salve as alterações.
Exemplo de alterações de espelhamento da guia Estilos para um arquivo .css
No exemplo a seguir, index.html é aberto em Visual Studio Code e a extensão Microsoft Edge DevTools está aberta. Selecionamos o ícone flexbox no seletor CSS .searchbar e, em seguida, alteramos o flex-direction para column.
A alteração é refletida na guia DevTools do Edge e na guia DevTools do Edge: Navegador :
Como resultado da edição de espelho do CSS, Visual Studio Code também navega automaticamente até o arquivo correto .css e o número de linha apropriado e insere o flex-direction: column código CSS:
Habilitando a edição de espelho do CSS
Se você tiver arquivos de origem confiáveis e graváveis e desejar que as alterações do CSS em DevTools sejam editadas automaticamente nos arquivos de origem, selecione a caixa de seleção CSS espelho edição. Ele é selecionado por padrão.
Desmarque a caixa marcar de edição do CSS espelho se você estiver experimentando apenas e houver uma URL em vez de um caminho de arquivo na barra de endereços na guia Edge DevTools: Navegador e não tenha arquivos de origem localmente por meio da Barra> de Atividades Explorer> o botão Abrir Pasta e não queira mensagens de erro sobre mapeamento e edição de espelho.
Para habilitar ou desabilitar a edição de espelho do CSS:
Na guia DevTools do Edge , na guia Elementos , acesse a guia Estilos .
Selecione ou desmarque a caixa de seleção de edição espelho CSS:
Ou, abra o Menu de Comando, comece a digitar a palavra espelho e, em seguida, selecione Ferramentas do Microsoft Edge: Alternar espelho edição on|off para arquivos CSS no workspace:
Suporte ao sourcemap
O Espelhamento CSS também dá suporte a abstrações como Sass ou CSS-in-JS quando você configurou seu projeto para produzir origem. Temos um problema de acompanhamento no GitHub e damos boas-vindas a qualquer comentário sobre como isso poderia ser melhorado: Edição de Espelho do CSS com Fontes: Problemas Conhecidos e Comentários.