Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
A edição de espelho 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 Edge DevTools .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 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 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 de corpo e pressiona Seta para cima ou Seta para baixo, se você tiver o .css arquivo aberto, poderá ver o valor alterar automaticamente no .css arquivo em tempo real enquanto altera o valor na guia Estilos :
Sem edição de espelho CSS, 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 renderizadas imediatamente no navegador da Web, elas não são refletidas no .css arquivo. Isso significa que, depois de alterar o CSS na guia Estilos , você precisará copiar e colar as alterações de volta no .css arquivo.
A edição de espelho CSS é um recurso da extensão DevTools do Microsoft Edge que contorna esse problema. Qualquer alteração feita na guia Estilos também altera automaticamente o .css arquivo na 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 CSS também funciona para um .html arquivo que contém um <style> elemento, como a página Sucesso. Isso é demonstrado em Comece agora, clicando no botão Launch Instance.
A caixa de seleção CSS Mirror Editing
Se você usar uma URL (em vez de um caminho de arquivo), a edição de espelho CSS exigirá a abertura de uma pasta de arquivos de origem de página da Web no Visual Studio Code que a extensão pode mapear para os recursos da página da Web da URL inserida 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 Edição do espelho CSS para evitar mensagens de erro sobre mapeamento e edição do espelho. Consulte Habilitando a edição de espelho 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 espelhamento de alterações da guia Estilos para um arquivo .css
No exemplo a seguir, index.html está aberto no Visual Studio Code e a extensão DevTools do Microsoft Edge está aberta. Selecionamos o ícone do flexbox no seletor CSS e, em .searchbar seguida, alteramos o flex-direction para column.
A alteração se reflete na guia DevTools do Edge e no DevTools do Edge: Guia Navegador :
Como resultado da edição de espelho CSS, o Visual Studio Code também navega automaticamente para 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 CSS
Se você tiver arquivos de origem graváveis e confiáveis e quiser que as alterações de CSS no DevTools sejam editadas automaticamente nos arquivos de origem, marque a caixa de seleção de edição de espelho CSS. Ele é selecionado por padrão.
Desmarque a caixa de marca de edição de espelho CSS se você estiver apenas experimentando e houver uma URL em vez de um caminho de arquivo na barra de endereços no Edge DevTools: guia do navegador e não tiver arquivos de origem localmente por meio da Barra> de Atividades do Explorer> do botão Abrir Pasta e não quiser mensagens de erro sobre mapeamento e edição de espelho.
Para habilitar ou desabilitar a edição de espelho CSS:
Na guia DevTools do Edge , na guia Elementos , vá para a guia Estilos .
Marque ou desmarque a caixa de seleção de edição de espelho CSS:
Ou abra o Menu de Comando, comece a digitar a palavra espelho e selecione Ferramentas do Microsoft Edge: Ativar|desativar a edição no espelho para arquivos CSS no espaço de trabalho:
Suporte ao mapa de origem
O espelhamento CSS também dá suporte a abstrações como Sass ou CSS-in-JS quando você configura seu projeto para produzir mapas de origem. Temos um problema de rastreamento no GitHub e agradecemos qualquer feedback sobre como isso pode ser melhorado: CSS Mirror Editing with Sourcemaps: Problemas conhecidos e comentários.