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

194

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

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

insira a descrição da imagem aqui

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

html  css  google-chrome  google-chrome-extension  google-chrome-devtools 
— Jitendra Vyas
fonte
Agora existe uma API para extensões do DevTools para receber notificações sobre os recursos que estão sendo alterados - para que você possa criar uma extensão que se integre ao seu IDE de escolha ou simplesmente publicar o conteúdo do recurso em um servidor WebDAV: developer.chrome.com/extensions/ …
— caseq 9/11/11
9
Acredito que esta pergunta e suas respostas sejam obsoletas, pois o Chrome mudou sua funcionalidade de economia de CSS modificado para o painel "Fontes" . A funcionalidade é bastante confuso, e um pouco enganador: Eu explorei essa funcionalidade do Chrome em alguns detalhes neste post Stack Overflow relacionado modificado de poupança-CSS: stackoverflow.com/questions/16005435/...
— ChaseMoskal
— MEMS
Substituições locais é uma nova maneira de fazer isso, a partir do Chrome 65. Substituições é um recurso diferente dos Espaços de Trabalho.
— Kayce bascos

Respostas:

137

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.

insira a descrição da imagem aqui

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

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

insira a descrição da imagem aqui

  • 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).

— Philip Ramirez
fonte
4
Quero adicionar apenas na parte inferior da folha de estilo do meu tema, qualquer que seja a diferença de CSS que eu tenha encontrado durante a edição ao vivo do meu CSS. É isso aí. Existe uma maneira de criar um 'diff' que seja CSS que eu possa copiar e colar? Veja esta outra pergunta: stackoverflow.com/questions/21871535/… A história de fundo é que estou editando CSS que pertence a um tema, só posso adicionar CSS na parte inferior da folha de estilo e não editar nada acima. O mesmo se aplica se alguém puder adicionar apenas um custom.css a um site com suas substituições de CSS.
— Caroline Schnapp
paul-irish, Interessado em como fazer o diff / patch apenas alterações locais CSS (sem alterações remotas). SaveAs não resolve realmente o problema de flexibilidade e aceleração ...
— Denis Denisov
Agora, o chrome está salvando arquivos locais automaticamente (sem pressionar CTRL + S) como evitar isso?
— Uzair Ali
Nao funciona para mim. Após salvar o arquivo CSS na pasta local, mapear remotamente para local e recarregar, todas as alterações desapareceram. :( editar o arquivo local no painel Elements e salvar o arquivo nas fontes também não persiste em minhas alterações.
— Crispy
2
Parece haver um bug no inspetor do Chrome 46 que, ao recarregar a página, o arquivo local mapeado é reaplicado apenas quando você o altera no painel Fontes. Você pode até alterá-lo em um editor externo, mas é necessário abrir e focar no painel Fontes.
— crocante
28

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.

substitui a demonstração

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.

— Kayce Basques
fonte
5
isso funciona, mas ainda é muito complicado. Eu preferiria que você pudesse habilitar isso apenas para a sessão atual. IMHO, uma caixa de seleção como "Manter alterações de recursos para a sessão atual" se ajustaria melhor ao fluxo de trabalho de desenvolvedores da web. Alterações persistentes não são algo que um desenvolvedor web precisa em seus negócios diários e podem até causar dores de cabeça adicionais se você esquecer de excluir essas substituições e voltar algumas semanas depois. As substituições são boas para usuários finais - não para depuração. Ainda votado.
Eu concordo com o outro comentário. Não é intuitivo e não salva todas as alterações, portanto não é realmente tão útil. Seria melhor escrever apenas uma pequena extensão do Chrome, ouvindo as alterações e salvando-as. Isto é, se houver uma API ou processo no qual possamos conectar ... ainda não a procuramos.
— Carles Alcolea
Desculpe senhor O liveSCSS não está obsoleto e não é mais desenvolvido? Consulte o stackoverflow.com/a/57622797/10189759
— Luk Aron
@ Kayce Basques e o desenvolvimento de extensões do Chrome? Quando você está injetando folhas de estilo (e js), todos esses recursos não estão funcionando, certo? Qualquer solução para esse tipo de desenvolvimento (para acelerar as atualizações de css / js das ferramentas de desenvolvimento do chrome para os arquivos de extensão de origem local). Obrigado
— Andrew
19

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/

— rjmunro
fonte
Acho que o OP quer ver as alterações que ele fez na guia Styles do painel Elements. Essas alterações não estão necessariamente vinculadas a um arquivo de origem específico.
— Ron Inbar
13

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).insira a descrição da imagem aqui
  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.

— Guilherme de Jesus Santos
fonte
Não consegui localizar "Show Navigator"
— NickyLarson em 30/04
@ NickyLarson, editei minha resposta para incluir onde está esse botão.
— Guilherme de Jesus Santos
Leia a pergunta original novamente. Ele não está editando um arquivo CSS. Ele está fazendo alterações na guia Estilos do painel Elementos.
— Ron Inbar
11

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.

— trinta dias
fonte
Nada dentro dos quadros também, para mim. Eu adicionei mais uma captura de tela em questão
— Jitendra Vyas
Não tenho certeza de como seus "Quadros" podem estar vazios. Isso parece quebrado. Tentar fazer isso na construção Canárias (você pode instalá-lo ao lado de sua versão atual): tools.google.com/dlpage/chromesxs
— thirtydot
Canary não pode abrir. Eu também encontrei esta solução justin.my/2011/04/why-my-google-chrome-canary-cannot-run, mas ainda não está funcionando. Eu tenho esta mensagem quando a instalação tem acabado k.min.us/iefbE2.jpg
— Jitendra Vyas
2
A partir deste fim de semana (21/05/2012), acredito que esta solução não funcione mais. Eu costumava fazer a mesma coisa que você mostra para escrever grandes pedaços de novos css (não antigos ou edições). Mas agora, pelo menos para mim, clicar nesse arquivo HTML mostra apenas o HTML bruto, sem mostrar as novas regras CSS. Ainda está funcionando para você e, se não, você tem uma nova solução para fazer isso?
— Nucleon
isso também não está funcionando para mim no Chrome 48. De qualquer forma, ainda assim?
— DMTintner
8

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.

— Tomi Mickelsson
fonte
4

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.

Imagem da ferramenta Diff

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

— RoccoB
fonte
1

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.

— FajitaNachos
fonte
1

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:

insira a descrição da imagem aqui

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

  2. 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.

— Ethan
fonte
1
E se você não conseguir encontrar a folha de estilo do inspetor porque perdeu a pesquisa no dom, basta pressionar Ctrl + P (ou CMD + P) enquanto o DevTools estiver focado e começar a escrever "inspec" ... ele aparecerá, e depois basta entrar. i.imgur.com/WSWcbh8.png
— Carles Alcolea
1

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.

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

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.
insira a descrição da imagem aqui

— JerryGoyal
fonte
1
Mas o OP perguntou especificamente sobre as alterações feitas na guia Estilos ...
— Ron Inbar
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.