Como salvar as alterações de CSS do painel Estilos das Ferramentas do desenvolvedor do Chrome?

Como salvar as alterações de CSS do painel Estilos das Ferramentas do desenvolvedor do Google Chrome ?

No site da ferramenta, é mencionado que podemos ver todas as alterações no painel de recursos

Mas estou trabalhando localmente em um arquivo CSS, mas as alterações não são exibidas no painel Recurso para mim

A propósito, você conhece algum complemento, ferramenta para salvar alterações de CSS das ferramentas do desenvolvedor do Chrome? Eu sei que para o Firebug existem muitos https://stackoverflow.com/search?q=firebug+CSS+changes+save

Você pode salvar suas alterações de CSS no próprio Chrome Dev Tools. Agora, o Chrome permite adicionar pastas locais ao seu espaço de trabalho. Depois de permitir o acesso do Chrome à pasta e adicionar a pasta à área de trabalho local, você pode mapear um recurso da Web para um recurso local.

• Navegue até o painel Origens das Ferramentas do desenvolvedor, clique com o botão direito do mouse no painel esquerdo (onde os arquivos estão listados) e selecione Adicionar pasta à área de trabalho . Você pode acessar rapidamente uma folha de estilo no painel Fontes, clicando na folha de estilo no canto superior direito de cada regra CSS para um elemento selecionado no painel Elementos.

• Depois de adicionar a pasta, você precisará conceder acesso ao Chrome para a pasta.

• Em seguida, você precisa mapear o recurso de rede para o recurso local.

• Depois de recarregar a página, o Chrome agora carrega os recursos locais para os arquivos mapeados. Para simplificar, o Chrome mostra apenas os recursos locais (para que você não confunda se está editando o recurso local ou de rede). Para salvar suas alterações, pressione CTRL + Sao editar o arquivo.

ps

Pode ser necessário abrir o (s) arquivo (s) mapeado (s) e começar a editar para que o Chrome aplique a versão local (data 201604.12).

O escritor de tecnologia e desenvolvedor DevTools defende aqui.

A partir do Chrome 65, o Local Overrides é uma maneira nova e leve de fazer isso. Esse é um recurso diferente dos Espaços de Trabalho.

Configurar substituições

1. Vá para o painel Origens .
2. Vá para a guia Substituições .
3. Clique em Selecionar pasta para substituições .
4. Selecione em qual diretório você deseja salvar suas alterações.
5. Na parte superior da sua janela de exibição, clique em Permitir para dar ao DevTools acesso de leitura e gravação ao diretório.
6. Faça as suas alterações. No GIF abaixo, você pode ver que a background:rosybrownalteração persiste no carregamento da página.

Como as substituições funcionam

Quando você faz uma alteração no DevTools, o DevTools salva a alteração em uma cópia modificada do arquivo no seu computador. Quando você recarrega a página, o DevTools exibe o arquivo modificado, em vez do recurso de rede.

A diferença entre substituições e áreas de trabalho

As áreas de trabalho foram projetadas para permitir o uso do DevTools como seu IDE. Ele mapeia o código do repositório para o código da rede, usando mapas de origem. O benefício real é que, se você está minificando seu código ou usando um código que precisa ser transpilado, como o SCSS, as alterações feitas no DevTools (geralmente) são mapeadas de volta ao seu código-fonte original. As substituições, por outro lado, permitem modificar e salvar qualquer arquivo na web. É uma boa solução se você quiser experimentar rapidamente as alterações e salvá-las nos carregamentos da página.

Novas versões do Chrome têm um recurso chamado áreas de trabalho que soluciona esse problema. Você pode definir quais caminhos no servidor da Web correspondem a quais caminhos no seu sistema e, em seguida, editar e salvar com apenas ctrl-s.

Veja: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

Eu sei que é um post antigo, mas salvo dessa maneira:

1. Vá para o painel Origens.
2. Clique em Mostrar navegador (para mostrar o painel do navegador à esquerda).
3. Clique no arquivo CSS que você deseja. (Ele será aberto no editor, com todas as alterações feitas)
4. Clique com o botão direito do mouse no editor e salve suas alterações.

Você também pode ver Modificações locais para ver suas revisões, recurso muito interessante. Também trabalhe com scripts.

Você está procurando na seção errada de "Recursos".

Não está em "Armazenamento local", está em "Quadros":

A captura de tela acima mostra uma diferença entre os estilos originais e as novas modificações feitas nos devtools. Você pode clicar com o botão direito do mouse no item no painel esquerdo e salvá-lo em disco.

A extensão Tincr Chrome é mais fácil de instalar (não é necessário executar o servidor do nó) E também vem com o LiveReload como funcionalidade pronta para uso! Fale sobre edição bidirecional! :)

Site Tin.cr

Link da Chrome Web Store

Artigo do blog de Andy

Agora que o Chrome 18 foi lançado na semana passada com as APIs necessárias, publiquei minha extensão do Chrome na loja virtual do Chrome. A extensão salva automaticamente as alterações em CSS ou JS nas ferramentas Developer no disco local. Vá conferir.

Para sua informação, se você estiver usando estilos embutidos ou modificando o DOM diretamente (por exemplo, adicionando um elemento), os espaços de trabalho não resolverão esse problema. Isso ocorre porque o DOM está vivendo na memória e não há um arquivo real associado ao estado ativo do DOM.

Para isso, eu gosto de tirar um instantâneo "antes" e "depois" do dom do console: copy(document.getElementsByTagName('html')[0].outerHTML)

Em seguida, coloco-o em uma ferramenta diff para ver minhas alterações.

Artigo completo: https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a

Para responder à última parte da sua pergunta sobre quaisquer extensões que possam salvar alterações, há um hotfix

Ele permite que você salve as alterações das Ferramentas de Desenvolvimento do Chrome diretamente no GitHub. A partir daí, você pode configurar um gancho pós-recebimento no GitHub para atualizar automaticamente seu site.

Desde que você não cole o CSS em element.style:

1. Vá para um estilo que você adicionou. Deve haver um link dizendo inspector-stylesheet:

2. Clique nele e ele abrirá todo o CSS que você adicionou no painel de fontes

3. Copie e cole - sim!

Se você têm vindo a utilizar element.style:

Você pode simplesmente clicar com o botão direito do mouse no seu elemento HTML, clicar em Editar como HTML e, em seguida, copiar e colar o HTML com os estilos embutidos.

ATUALIZAÇÃO 2019: Como outras respostas estão um pouco desatualizadas, adicionarei uma atualizada aqui. Na versão mais recente, não há necessidade de mapear a pasta chrome para o sistema de arquivos.

Então, suponha que eu tenha uma pasta da Web que contenha arquivos HTML, CSS, JS na área de trabalho que eu queira atualizar quando fizer alterações no chrome: =

1) Você precisaria de um servidor local em execução, como o nó etc., ou a extensão vscode cria o servidor para você: extensão VSCode do servidor ativo , instale-o, execute o servidor.

2) carregue a página html no chrome executando o servidor local.

3) Abra devTools-> Fontes-> Sistema de Arquivos-> Adicionar pasta ao espaço de trabalho

4) Adicione a pasta usada na execução do servidor local. Nenhum mapeamento adicional é necessário no Chrome mais recente! Ta-da!

Mais sobre ele Editar arquivos com áreas de trabalho

Observe que as alterações feitas na guia de estilos NÃO refletirão nos arquivos do sistema de arquivos. Em vez disso, você precisa ir para devtools-> source-> your_folder e, em seguida, fazer suas alterações lá e recarregar a página para ver o efeito.