Como desenvolvedores da Web, passamos muito tempo criando nosso código em um ambiente de edição. Em seguida, saltamos para o navegador para usar as ferramentas de desenvolvedor integradas para depurar e ajustar a interface do usuário do produto. O problema com isso é que os resultados dos ajustes e depuração não são refletidos no código-fonte. No Microsoft Edge, estamos trabalhando em algumas soluções que estão abertas para discussão e adoraríamos seus comentários sobre eles
Se você preferir assistir a um vídeo em vez de ler, aqui está uma introdução de três minutos:
O problema atual com ajustes e alterações nas Ferramentas do desenvolvedor h2>
Hoje, as DevTools do navegador fornecem ferramentas visuais altamente sofisticadas que ensinam – por exemplo – a sintaxe CSS enquanto você as usa. Essas ferramentas mudam as coisas de maneira visual. Por exemplo, você pode clicar no ícone”Flexbox”ao lado de qualquer propriedade CSS flexbox e obter um pop-up com uma visualização do resultado dessa alteração de estilo.
Esta é uma excelente experiência de depuração e evita que você precise procurar a sintaxe CSS o tempo todo. No entanto, há uma desconexão, pois o código exibido nesses fluxos de trabalho de depuração não é o que você escreveu em seu editor de código.
O editor de estilos funciona mostrando apenas uma visualização parcial do código para o atual elemento selecionado no navegador. Você não sabe onde e como esse código se encaixa no restante de seu CSS em sua página da Web. Embora você possa rolar para ver o restante do código, não seria melhor também ver o original Arquivo CSS?
Você pode acessá-lo clicando nos links para o próprio arquivo CSS, que o leva para a Ferramenta de Fontes e para longe do editor de Estilos.
p> 
Este é um editor incorporado nas ferramentas de desenvolvedor do navegador que era bacana quando saiu, mas não brilha em comparação com o que esperamos de um editor hoje em dia. A menos que você desencaixe as ferramentas e as use em uma janela própria, você também não terá espaço de tela suficiente para uma experiência de edição conveniente.
Se você usa as ferramentas visuais para ajustar seu CSS ou o editor de fontes, um problema permanece: uma vez que você mudou muito de coisas e você chegou ao resultado desejado, como você obtém essas alterações de volta ao seu código-fonte?
Você sabia que existe uma ferramenta de alterações?
As Ferramentas do desenvolvedor do navegador têm um recurso que ajuda com isso chamado Mudanças que não é muito usado e é amplamente desconhecido. Você pode acessá-lo a partir do menu de comandos ou do menu de contexto e mostra uma visualização diff de todos os arquivos que você alterou nesta sessão. Você pode usar essa ferramenta para copiar e colar as alterações de volta em seus arquivos de origem.
O Firefox usa uma abordagem ligeiramente diferente de uma ferramenta de alterações que atualiza ao vivo com as alterações feitas. Ele também cria um arquivo CSS para você copiar e colar com comentários explicando em quais arquivos colar essas alterações novamente e o que foi removido ou adicionado.
Embora este seja um bom passo na direção certa, é necessário um passo extra para copiar e colar o código de volta ao seu editor.
Um fluxo de espaço de trabalho aprimorado, incluindo Visual Studio CodeEspaços de trabalho nas Ferramentas do desenvolvedor do Chromium existem há muito tempo, mas não são muito úteis. É por isso que queríamos tornar mais óbvio que você pode ter a sincronização ao vivo das alterações entre o DevTools do navegador e um editor de código. Também percebemos que o editor na ferramenta Sources não é o que as pessoas querem usar.
E se você pudesse ter a conveniência do editor que já usa e os benefícios das alterações ao vivo nos arquivos do Workspaces?
A partir da versão 96 do Microsoft Edge, você pode encontrar um novo experimento no DevTools chamado “Arquivos de código aberto no Visual Studio Code“.
Depois de ativar este e reiniciar as ferramentas de desenvolvedor, navegue até um arquivo em seu disco rígido ou um endereço de servidor local como localhost ou 127.0.0.1 fornecerá um prompt solicitando que você identifique a pasta raiz deste arquivo. Você também pode optar por não participar de uma sessão ou nunca ver essa opção a ganho.
Uma vez você escolhe uma pasta, o navegador pede permissão para ter acesso a essa pasta – da mesma forma que você precisava ao usar Workspaces na ferramenta Sources.
Ao fazer qualquer alteração no painel Estilos, o arquivo muda no disco. A diferença é que quando você tem o Visual Studio Code como seu editor no computador, clicar nos links para os arquivos irá abri-los neste editor ao invés da ferramenta Sources. Você permanece no ambiente ao qual está acostumado com todas as personalizações e extensões adicionadas a ele.
Isso é ótimo, pois suas alterações de CSS são permanentes agora. O problema é que eles podem ser muito intrusivos. Qualquer alteração na ferramenta Estilos, como alterar um tamanho em uma unidade, resultará na alteração do arquivo em seu disco rígido. Se você usar qualquer solução de servidor de recarga ao vivo ou mesmo scripts que monitorem uma pasta e acionem um processo de compilação, isso pode ficar confuso rapidamente.
Edição de espelho CSS
Na versão mais recente do Extensão Edge DevTools for Visual Studio Code introduzimos uma maneira diferente de fechar o loop de criação/depuração chamado”CSS Mirror Editing”. Se quiser, assista a este introdução em vídeo de 40 segundos.
Se você habilitar esse recurso, as alterações feitas na ferramenta Estilos também afetarão o código-fonte, mas o arquivo permanecerá inalterado até que você o salve no Visual Studio Code. Você obtém o benefício de não perder suas alterações e mantém controle total sobre os arquivos no disco rígido.
Se você usar o controle de versão, poderá ver todas as alterações feitas como uma visualização de diferenças depois de salvar o arquivo. Isso oferece toda a conveniência do fluxo de trabalho do Workspaces com menos alterações nos arquivos.
O que devemos fazer para melhorar essa experiência?
Parece que temos todos os componentes certos em local para fornecer aos desenvolvedores e experiência de criação e depuração de ponta a ponta. Adoraríamos saber o que você acha dessas abordagens e qual você prefere.
Se você tiver algum feedback, entre em contato com a equipe do Edge DevTools no Twitter em @EdgeDevTools, comente sobre este problema no GitHub sobre CSS Mirror Editing ou use a ferramenta de feedback integrada ao DevTools no navegador.
– Chris Heilmann, gerente de programa principal, Microsoft Edge
