Exportar alterações de CSS do inspetor (webkit, firebug, etc)

104

Quando estou trabalhando com CSS, geralmente testo em um navegador - digamos, Chrome - clique com o botão direito em um elemento, clique em Inspecionar Elemento e edite o CSS ali mesmo. O uso das teclas de seta para alterar itens como margem e preenchimento torna o alinhamento muito fácil.

Não é muito difícil pegar essas mudanças e aplicá-las ao arquivo CSS, mas seria legal se eu pudesse apenas clicar com o botão direito do mouse no seletor no inspetor e selecionar "exportar" ou "copiar", e ter o conteúdo disponível em meu prancheta.

Será que algo assim existe?

hookedonwinter
fonte
Não deve ser difícil escrever uma extensão Safari / Chrome para isso. Use o menu de contexto para permitir que o usuário clique com o botão direito em um elemento e, em seguida, pegue a propriedade currentStyle do objeto, talvez envie para a área de transferência?
tbeseda
Talvez eu devesse ter ido pesquisar antes de comentar aqui. Possível duplicata de stackoverflow.com/questions/162644/…
MiffTheFox
Ah legal. Eu adoraria ver algumas respostas para o chrome / web-kit, mas essas são ótimas respostas aí. Obrigado @MiffTheFox
hookedonwinter
Confira Backfire: blog.quplo.com/2010/08/… Ainda não tentei, mas parece promissor.
Bryan Downing
1
@BryanDowning Done! Isso é super incrível. Obrigado pelo ping.
hookedonwinter

Respostas:

77

Eu encontrei a resposta para isso, pelo menos no Chrome v14.

Enquanto estiver na seção Elementos, basta clicar no link "nome do arquivo: número de linho" próximo às regras CSS. O arquivo CSS que aparece conterá todas as modificações.

Este lugar exatamente:

https://cdn.tutsplus.com/net/uploads/2013/06/dev-tools-regular-view.jpg

Nicholas Zographos
fonte
4
observe que isso também funciona para novos seletores de CSS que são adicionados ao Inspetor por meio do +ícone
Jonathan Day
1
Isso só funcionará para alterações que foram adicionadas à folha de estilo do inspetor. Não funcionará para alterações feitas nos conjuntos de regras para seletores de classe existentes.
ian.pvd
49

No Chrome, você pode clicar com o botão direito em um arquivo CSS na guia Fontes e clicar em "Modificações locais"

Isso mostra todas as suas mudanças locais. Cada revisão tem um carimbo de data / hora e você pode reverter para qualquer revisão anterior.

Consulte a seção Edição ao vivo e histórico de revisão deste tutorial.

Chris MacDonald
fonte
1
Parece que você só pode reverter até seu último referh. Portanto, você perderá as alterações se acidentalmente atualizar / fechar a guia etc.
tomblah
Como isso funciona com bundlers modernos como o webpack, onde todo o seu css é agrupado em um arquivo?
mattgabor
Não vejo "Modificações locais". A resposta está desatualizada?
Luke Pighetti
@LukePighetti Eu vejo isso na v79 (12/2019) se eu abrir o arquivo fonte no qual estou interessado> clique com o botão direito> modificações locais. Isso abre uma guia na "gaveta do console" intitulada "alterações", que tem um menu à esquerda com todos os meus arquivos alterados. Você também pode acessá-lo clicando nas reticências do menu> mais ferramentas> alterações.
xr280xr
11

Firediff é um add-on do Firebug que rastreia as alterações feitas no Firebug. Ele registra tudo o que você fará no painel HTML (ótimo), mas também o seu breve uso da extensão Web Developer Toolbar (não tão bom), digamos Shift-Ctrl-F para obter informações sobre o tamanho da fonte em px.

Eu vi uma extensão Firebug no Chrome, mas não testei, eu uso Firediff com Firefox.

FelipeAls
fonte
Plugin legal. Definitivamente me deixa mais perto de onde eu quero. Vou esperar para ver se surge algo melhor (cópia completa em css formatado para a área de transferência, por exemplo).
hookedonwinter
7

Eu construí uma extensão do Chrome que faz exatamente isso.

Chama-se StyleURL - pega todas as alterações CSS feitas no Chrome Inspector e produz CSS válido como diff: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

Aqui está um exemplo em que adicionei "padding-bottom: 50px" a esta página: Diferença de exemplo de StyleURL

É open-source e também no GitHub: https://github.com/Jarred-Sumner/styleurl-extension

Jarred Sumner
fonte
Ferramenta muito útil!
DanTheMann
2
Todos os links que não funcionam aceitam o github. Atualize, parece promissor
Mirosław
Este projeto agora está abandonado. É uma pena :-(
Damon Hill
6

No Chrome, há também a guia Alterações na gaveta do console que exibe todas as modificações de CSS. Não é uma exportação, mas pelo menos é muito conveniente entender rapidamente o que mudou.

Captura de tela da guia Alterações nas ferramentas de desenvolvimento do Chrome

Adrian B
fonte
1
Esta resposta fornece uma solução de navegador integrada para visualizar as alterações, sem a necessidade de instalação de extensões adicionais. Ele rastreia as alterações feitas em qualquer folha de estilo (ou JS) como um diff discriminado com arquivos separados e mostra adições, exclusões e alterações de caracteres individuais linha por linha. Embora não haja exportação, é uma solução melhor hoje do que a melhor resposta atual de 2011.
ian.pvd
Há muito ruído nessas respostas após 9 anos, mas esta é facilmente a melhor resposta. A única coisa que falta é uma maneira rápida de exportar o diff para que você possa processar as alterações automaticamente em um script ou IDE, em vez de ter que fazer lado a lado e ajustar manualmente uma folha de estilo.
Sami Fouad
5

Já sugeri este produto no SO antes (não sou afiliado a eles de forma alguma).

http://www.skybound.ca/

Produto excelente. Parece exatamente o que você está procurando e muito mais.

EDIT: Várias outras respostas aqui mencionaram a capacidade do Google Chrome de vincular seus arquivos locais (o que é muito, muito legal). Confira as outras respostas!

Bryan Downing
fonte
Parece muito legal. Que pena que são $ 80. Obrigado @Bryan, bom achado
hookedonwinter
2
A resposta aqui mudou nos últimos anos. O Chrome DevTools agora permite que você grave suas alterações de volta no arquivo . Tempos emocionantes!
cloudworks de
4

Se você editar CSS externo, poderá arrastar sua última revisão do painel Recursos para qualquer editor de texto que ofereça suporte a DnD (consulte http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/ , a seção "Alterações persistentes" para obter mais detalhes.) Você também pode reverter suas alterações CSS para qualquer versão anterior do recurso de folha de estilo (no menu pop-up do botão direito de qualquer revisão da folha de estilo).

Alexander Pavlov
fonte
4

Conforme mencionado pela cloudworks, a resposta para isso mudou. Isso agora pode ser realizado muito bem pela extensão Chrome DevTools Autosave . Essa ferramenta rastreia as alterações de CSS e JavaScript feitas no console das Ferramentas do desenvolvedor do Chrome e as salva de volta em arquivos locais. Para obter instruções sobre como instalar e configurar a extensão, consulte o guia escrito por @addyosmani em seu blog, aqui .

insira a descrição da imagem aqui

Há também um screencast útil que detalha bem a extensão.

Andrew Craswell
fonte
1

Tanto o Firefox quanto o Chrome suportam este recurso agora, mas vale a pena notar que em algumas plataformas, se nem todo o Chrome não mostra isso por padrão, você precisa habilitar a visualização "Mudanças" para vê-lo (no meu Kubuntu Linux 20.04 não era por padrão), aqui está como você pode habilitá-lo: vá para o botão "Personalizar e controlar DevTools" na barra de Ferramentas do desenvolvedor> "Mais ferramentas"> "Mudanças" , a guia aparecerá no botão:

insira a descrição da imagem aqui

No Firefox não há necessidade de habilitá-lo, mas se você vem do mundo Chrom * pode ser difícil encontrá-lo. Basta verificar a última seção à direita na guia "Inspetor":

insira a descrição da imagem aqui

Mariano Ruiz
fonte
0

Se estiver usando as ferramentas de desenvolvimento de estoque do Firefox, você pode editar o css diretamente na caixa de diálogo de ferramentas - clique no botão da janela de visualização CSS (que é o botão no topo com o {}símbolo) e edite seu css diretamente. Ele será atualizado em tempo real no navegador e, quando terminar, basta copiar e colar diretamente em seu arquivo css. Agradável!

Abraham Brookes
fonte
0

Para adicionar uma resposta específica ao Safari - é possível.

Ao editar CSS na seção Estilos do Inspetor para um arquivo CSS existente, você pode clicar Cmd-S salvar todo o arquivo novamente com as alterações. No entanto, se você estiver usando uma metlinguagem como Sass / pré-processador / gerando seu CSS com empacotamento etc, não acho que isso realmente resolve o problema, embora possa ser possível com mapas de origem CSS.

Quando você edita CSS no topo da seção Estilos, em Style Attributepara adicionar estilos embutidos (não vinculados a um arquivo CSS existente), não parece possível exportar facilmente todas essas alterações. Por enquanto, estou apenas copiando e colando as substituições manualmente para cada elemento.

Os documentos oficiais da Apple são um pouco desatualizados, mas podem ser encontrados aqui: Tutorial do Web Inspector - Editando código para alterar sua página da web .

Taylor Edmiston
fonte
0

No Chrome, no inspetor css, você pode clicar e segurar o botão + e, em seguida, optar por adicionar suas alterações à folha de estilo do inspetor. Não é tão conveniente quanto editar diretamente em seus seletores de css, mas tudo o que você escrever estará em inspector-stylesheet.css

Frazer Kirkman
fonte
-1

Meu produto em breve, o LIVEditor, faz isso exatamente.

Para que você entenda facilmente, pense no inspetor do Firebug embutido em seu editor de texto.

Dessa forma, você não precisa fazer as alterações manualmente novamente em seu editor de código depois de ajustá- lo usando o Firebug ou as ferramentas de desenvolvedor do Webkit.

Edwin Yip
fonte
8
Parece bom. Que pena que é para Windows.
KPM de
Geralmente, os links para uma ferramenta ou biblioteca devem ser acompanhados por notas de uso, uma explicação específica de como o recurso vinculado é aplicável ao problema ou algum código de amostra ou, se possível, todos os itens acima.
Samuel Liew