Google Chrome com edição de CSS em tempo real e salvar as alterações no arquivo original. É possível?

Question

Uma das coisas que mais gosto dos navegadores modernos é como você pode editar o CSS e ver os resultados em tempo real. Muitas vezes, ao projetar elementos front-end, me vejo ajustando muitas propriedades css diretamente no chrome, e somente quando estou feliz com o resultado eu copio de volta todas as alterações para os meus arquivos css originais. Não tenho certeza de como essa prática é comum, mas funciona para mim.

A pergunta: Existe alguma maneira, talvez uma extensão, que pode comparar a página original css no Google Chrome ao editado e gerar todas as alterações? Isso pode soar preguiçoso, mas pode fazer sentido: se você estiver editando CSS por aproximadamente uma hora no chrome, rastrear todas as alterações em todos os divs e classes pode ser demorado, e é aí que uma ferramenta gera as alterações imediatamente pouparia muito tempo.

Edit: Ou talvez isso possa ser feito com alguma magia javascript no console?

    

Answer 1

Você pode se interessar por essa funcionalidade simples integrada ao Google Chrome:

Altere o CSS e o SAVE no sistema de arquivos local usando Ferramentas do desenvolvedor do Google Chrome

Eu tentei agora e funciona muito bem destacando as linhas alteradas. Basta clicar em Salvar e pronto! :)

    

Answer 2

O Chrome agora faz isso automaticamente. Eu estou usando v33 mas isso já existe há algum tempo.

1. Basta fazer uma alteração no arquivo css e salvá-lo no painel Origens.
2. Todas as alterações subsequentes serão salvas automaticamente.

Observe que, se você estiver usando o Workspaces, o arquivo no próprio sistema de arquivos será visto como modificado no painel de fontes, em vez de várias versões do mesmo arquivo.