O Firebug é a ferramenta mais conveniente que encontrei para editar CSS - então, por que não existe uma opção simples de "salvar" para CSS?

Estou sempre fazendo ajustes no Firebug, depois voltando ao meu arquivo .css original e replicando os ajustes.

Alguém veio com uma solução melhor?

EDIT: Estou ciente de que o código está armazenado em um servidor (na maioria dos casos não é o meu), mas eu o uso ao criar meus próprios sites.

O Firebug está apenas usando o arquivo .css que o Firefox baixou do servidor e sabe exatamente quais linhas em quais arquivos estão sendo editados. Não vejo por que não há uma opção "exportar" ou "salvar", que permite armazenar o novo arquivo .css. (Com o qual eu poderia substituir o controle remoto).

Tentei procurar em locais temporários, escolher Arquivo > Salvar ... e experimentar as opções de saída no Firefox, mas ainda não encontrei uma maneira.

EDIT 2: O grupo de discussão oficial tem muitas perguntas , mas nenhuma resposta.

Cheguei aqui procurando exatamente esse recurso, ou seja, poder salvar as CSSpropriedades editadas de volta no arquivo original (na minha máquina de desenvolvimento local). Infelizmente, depois de pesquisar muito e não encontrar nada que atenda às minhas necessidades (OK, existe o CSS Updater, mas você precisa se registrar e é uma extensão paga ...) Desisti do Firefox + Firebug e procurei algo semelhante para o Google Chrome. Adivinha o quê ... Acabei de encontrar este ótimo post que mostra uma boa maneira de fazer isso funcionar (incorporado ao Chrome - não há necessidade de extensões adicionais):

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

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

Aqui está um vídeo explicando isso e muito mais: Google I / O 2011: Chrome Dev Tools Reloaded

Espero que ajude se não for importante para você alterar o navegador enquanto edita seus arquivos CSS. Já fiz a alteração por enquanto, mas adoraria ter essa funcionalidade incorporada no Firebug. :)

[Atualização 1]

Hoje acabei de ver este vídeo: Edição ao vivo do CSS do Firefox no Sublimetext (trabalho em andamento) Parece realmente promissor.

[Atualização 2]

Se você estiver usando o Visual Studio 2013 com o Web Essentials, poderá sincronizar o CSS automaticamente como mostrado neste vídeo:

Web Essentials: integração de ferramentas do navegador

Estive pensando o mesmo por algum tempo agora,
apenas estremecendo quando o seu momento-estilo-livre-css'ing com firebug é explodido em pedaços por
uma recarga acidental ou algo assim ...

Para minhas intenções e propósitos, finalmente encontrei a ferramenta ....: FireDiff .

Ele fornece uma nova guia, provavelmente uma referência estranha de David Bowie, chamada "alterações"; que não apenas permite que você veja / salve o que o firebug, ou seja, você está fazendo,
mas também opcionalmente rastreie as alterações feitas pela própria página ... se ela e / ou você estiver tão inclinado.

Tão grato por não ter que redigitar ou re-imaginar e re-redigitar todas as regras de css que eu faço ...

Aqui está um link para o desenvolvedor (não seja menosprezado pela primeira aparição, talvez também vá direto para o repositório do Mozilla Add-On .

O complemento Web Developer permite salvar suas edições. Gostaria de combinar a edição do Firebug com o recurso Salvar do Web Developer.

Use o botão " Salvar " (clique no menu CSS -> Editar CSS) para salvar o CSS modificado no disco.

Recomendação : use o botão " Stick " para evitar a perda de alterações ao alterar a guia para fazer outra navegação. Se possível, use apenas uma guia para fazer a edição e outra janela do firefox nas pesquisas relacionadas, webmail, etc.

Acabei de lançar um complemento de firebug na sandbox do mozilla, que pode fazer o que você deseja: https://addons.mozilla.org/en/firefox/addon/52365/

Na verdade, ele salva os arquivos css "tocados" sob demanda no servidor da web (através da comunicação com um script php de serviço da web com um arquivo).

Documentação pode ser encontrada na minha página inicial ou na página de complementos

Eu apreciaria qualquer teste, relatório de bugs, comentários, classificações, discussão sobre isso, pois ainda está no início da versão beta, mas já deve funcionar bem.

CSS-X-Fire

Estou surpreso que ele ainda não esteja listado nesta questão, mas provavelmente porque é novo e o autor ainda não teve tempo para promovê-lo.

É chamado CSS-X-Fire e é um plugin para a série de IDEs JetBrains: IntelliJ IDEA, PHPWebStorm, PyCharm, WebStorm, RubyMine .

Como funciona: você instala um desses IDEs e configura a implantação (suporta FTP e SCP). Isso permitirá que você fique sincronizado com o servidor.

Depois disso, você instala este plugin. Quando ele começa, ele pergunta se ele instalará um plugin para o Firefox, a fim de fazer a integração entre o Firebug e o IDE. Se ele não conseguir instalar o plugin, use a técnica de arrastar e soltar para instalá-lo.

Uma vez instalado, ele acompanhará todas as alterações do Firebug e você poderá aplicá-las com um simples clique dentro do IDE.

FireFile

O FireFile é uma alternativa que exige que você adicione um pequeno arquivo php ao lado do servidor para poder fazer o upload do css modificado.

Você pode vincular o firebug ao eclipse com o fireclipse e, em seguida, salvar o arquivo do eclipse

Eu acho que o mais próximo que você vai chegar é entrar no modo de edição no Firebug e copiar e colar o conteúdo do arquivo CSS.

Acabamos de apresentar o Backfire, um mecanismo javascript de código aberto que permite salvar alterações de CSS feitas no Firebug e no Webkit inspector no servidor. A biblioteca inclui um exemplo de implementação em C # de como salvar as alterações recebidas no seu CSS.

Aqui está uma postagem de blog sobre como funciona: http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

E aqui está o código hospedado no Google Code: http://code.google.com/p/backfire/

Sei que isso não responde à sua pergunta, mas, surpreendentemente, a "barra de ferramentas do desenvolvedor" do clone Firebug do Internet Explorer 8 (acessível via F12) oferece a opção de "salvar html". Esta função salva o DOM atual em um arquivo local, o que significa que se você editar o DOM de alguma forma, por exemplo, adicionando um atributo de estilo em algum lugar, isso também será salvo.

Não é particularmente útil se você estiver usando o Firebug para mexer com CSS, como todo mundo faz, mas um passo na direção certa.

Proponho uma solução que envolve uma combinação de Firebug e FireFTP, bem como código que acessa diretamente o sistema de arquivos local ao executar um site localmente.

Aqui estão os cenários:

Trabalhando em um site hospedado em uma máquina remota

Nesse caso, você forneceria os detalhes do FTP e o local do CSS / HTML / Javascript e do Firebug atualizaria esses arquivos quando salvar as alterações. Pode até localizar os arquivos e solicitar que você verifique se o arquivo está correto. Se os nomes dos arquivos forem exclusivos, não deverá ser um problema.

Trabalhando em um site em execução na sua máquina local

Nesse caso, você poderia fornecer ao Firebug o local da pasta local do site e o mesmo comportamento seria usado para corresponder e verificar os arquivos. O acesso ao sistema de arquivos local pode ser realizado através do FireFTP, se necessário.

Trabalhando em um site hospedado remotamente sem acesso ao FTP

Nesse caso, algo como o complemento FireFile teria que ser implementado.

Um recurso adicional seria a capacidade de salvar e abrir arquivos de projeto que armazenam os mapeamentos entre os arquivos locais e os URLs aos quais estão associados, além de salvar os detalhes do FTP como o FireFTP já faz.

Eu sou o autor do CSS-X-Fire, sobre o qual Sorin Sbarnea também publicou neste tópico. Acho que estou um pouco atrasado;)

O CSS-X-Fire emite alterações de propriedade CSS do Firebug para o IDE, onde as alterações podem ser aplicadas ou descartadas.

Há algumas vantagens com esta solução em relação à maioria das outras ferramentas existentes, que apenas conhecem os nomes de arquivos e o conteúdo baixado pelo navegador (veja o comentário de NickFitz na postagem original).

Cenário 1: você tem um site (projeto) com vários temas a partir dos quais o usuário pode selecionar. Cada tema tem seu próprio arquivo CSS, mas apenas um é conhecido pelo Firebug, o atual. O CSS-X-Fire detectará todos os seletores correspondentes no projeto e permitirá que você decida qual deve ser modificado.

Cenário 2: O projeto da Web possui folhas de estilo criadas em tempo de compilação ou durante a implantação. Eles podem ser mesclados a partir de vários arquivos e os nomes dos arquivos podem mudar. O CSS-X-Fire não se importa com os nomes dos arquivos, apenas lida com os nomes do seletor CSS e suas propriedades.

Acima estão exemplos de cenários em que o CSS-X-Fire se destaca. Como ele trabalha com os arquivos de origem e conhece a estrutura da linguagem, também ajuda a encontrar duplicatas desconhecidas do Firebug, pular para código, etc.

CSS-X-Fire é de código aberto sob a licença Apache 2. Página inicial do projeto: http://code.google.com/p/css-x-fire/

FireFile

O Firebug foi criado para detectar um problema para não ser um depurador. mas você pode salvar as alterações se adicionar uma nova ferramenta que integre o firebug com as alterações salvas. é FireFile, clique aqui http://thelistoflist.blogspot.com/2010/04/how-to-save-change-you-make-in-firebug.html .

O FireFile fornece a funcionalidade desejada adicionando um pequeno arquivo PHP ao lado do servidor.

Como o Firebug não está funcionando no seu servidor, mas retirando o CSS do site e armazenando-o localmente e mostrando o site com essas alterações locais.

Use o editor CSS na barra de ferramentas do Firefox Web Developer:

http://chrispederick.com/work/web-developer/

Ele tem coisas boas o suficiente para usar em conjunto com o Firebug e permite que você salve seu CSS em um arquivo de texto.

Use o Backfire.

http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

É uma solução de código aberto que envia as alterações de CSS de volta ao servidor e as salva.

O Backfire usa um único arquivo javascript, e o pacote sourcecode possui um exemplo de implementação de servidor .NET funcional, facilmente transportável para outras plataformas.

Eu também tive esse problema para sempre e finalmente decidi que não deveríamos editar coisas no inspetor da web e criar algo para ele ( https://github.com/viatropos/design.io ).

Uma solução melhor:

O navegador reflete automaticamente as alterações de CSS sem recarregar quando você pressiona salvar no seu editor de texto .

A principal razão pela qual estamos editando css no inspetor da web (eu uso o webkit, mas o FireBug está na mesma linha) é porque precisamos fazer pequenos ajustes e leva muito tempo para recarregar a página.

Existem 2 problemas principais com esta abordagem. Primeiro, você tem permissão para editar um elemento individual que pode não ter um idseletor. Portanto, mesmo se você fosse capaz de copiar / colar o CSS gerado no inspetor da Web, ele teria que gerar um idescopo para o css. Algo como:

#element-127 {
  background: red;
}

Isso começaria a deixar o seu css uma bagunça.

Você pode contornar isso alterando apenas os estilos de um seletor existente (o .spaceseletor de classe na imagem do webkit inspector abaixo).

Ainda assim, o segundo problema. A interface para essa coisa é bem difícil, é difícil fazer grandes mudanças - como se você quiser tentar copiar rapidamente esse bloco de css para esse local ou qualquer outra coisa.

Prefiro ficar com o TextMate.

O ideal seria apenas escrever o CSS no seu editor de texto e fazer com que o navegador refletisse as alterações sem recarregar a página . Dessa forma, você escreveria seu CSS final enquanto fazia as pequenas alterações.

O próximo nível seria escrever em uma linguagem CSS dinâmica, como Stylus, Less, SCSS, etc, e fazer com que atualizasse o navegador com o CSS gerado. Dessa forma, você pode começar a criar mixins comobox-shadow() , que abstraem as complexidades que o inspetor da web definitivamente não poderia fazer.

Há algumas coisas por aí que meio que fazem isso, mas nada realmente simplificando isso na minha opinião.

• LiveReload : envia css para o navegador sem atualizar quando você pressiona salvar, mas é um aplicativo para Mac , por isso seria difícil de personalizar.
• CodeKit : também um aplicativo para Mac, mas atualiza o navegador toda vez que você salva.

Não ter a capacidade de personalizar facilmente a maneira como esses trabalhos são a principal razão pela qual não os usei.

Eu montei https://github.com/viatropos/design.io especificamente para resolver esse problema, e faço assim:

1. O navegador reflete o css / js / html / etc sempre que você salvar, sem recarregar a página
2. Ele pode lidar com qualquer modelo / linguagem / estrutura (Stylus, Less, CoffeeScript, Jade, Haml, etc.)
3. Está escrito em JavaScript, e você pode juntar extensões rapidamente em JavaScript.

Dessa forma, quando você precisar fazer essas pequenas alterações no CSS, poderá definir a cor do plano de fundo, pressionar salvar, ver não, não exatamente, ajustar a tonalidade em 10, salvar, não, ajustar em 5, salvar, parecerá bom.

A maneira como funciona é observando sempre que você salva um arquivo (no nível do SO), processando o arquivo (é aqui que as extensões funcionam) e enviando os dados para o navegador por meio de websockets, que são manipulados (no lado do cliente) a extensão).

Para não ligar nem nada, mas lutei com esse problema por um longo tempo.

Espero que ajude.

O Firebug funciona no CSS computado (aquele que você obtém ao pegar o CSS nos arquivos e aplicar a herança etc., mais as alterações feitas com JavaScript). Isso significa que provavelmente você não pode usá-lo diretamente para incluir em um arquivo HTML, que é específico do navegador / versão (a menos que você se importe apenas com o Firefox). Por outro lado, ele controla o que é original e o que é calculado ... Eu acho que não deve ser muito difícil adicionar um pouco de JS ao Firebug para poder exportar esse CSS para um arquivo de texto.

Fiquei me perguntando por que não posso selecionar e copiar o texto diante dos meus olhos. Especialmente quando outros dizem que você pode simplesmente "selecionar e copiar". Acontece que você pode , basta iniciar o arraste fora texto para de qualquer texto (por exemplo, na sarjeta acima ou à esquerda do texto), como qualquer ratoeira - seja um clique ou arraste - em qualquer texto imediatamente invoca a propriedade editor. Você também pode clicar no texto externo para obter um cursor (mesmo que nem sempre esteja visível), que pode ser movido com as teclas de seta e selecionar o texto dessa maneira.
Infelizmente, o texto copiado para a área de transferência não possui recuos, mas pelo menos evita que você transcreva manualmente todo o conteúdo do arquivo CSS. Apenas faça com que seu programa diff ignore as alterações em espaço em branco ao comparar com o original.

Você pode escrever seu próprio arquivo de script do servidor que usa um parâmetro filename e um parâmetro content.

O script do servidor encontraria o arquivo solicitado e substituiria seu conteúdo pelo novo.

Escrever o Javascript que explora as informações do firebug e recupera os dados úteis seria a parte complicada.

Pessoalmente, prefiro pedir à equipe de desenvolvedores do firebug para fornecer uma função, não deve ser muito difícil para eles.

Finalmente, o Ajax envia o par nome do arquivo / conteúdo para o arquivo php que você criou.

Citado nas Perguntas frequentes do Firebug :

Editando Páginas

• Posso salvar na fonte as alterações que fiz na página da Web que estou vendo?

  Agora você não pode. Como John J. Barton escreveu no grupo de notícias:

  Editar no Firebug é como tirar os picles e adicionar mostarda a um sanduíche de restaurante: você pode apreciar o resultado, mas o próximo cliente no restaurante ainda terá picles e sem mostarda.

  Essa é uma funcionalidade solicitada há muito tempo; portanto, um dia estará disponível diretamente no Firebug. Enquanto isso, você pode tentar o Firediff , uma extensão para firebug de Kevin Decker.

• Como posso gerar todas as alterações feitas no CSS de um site no firebug?

  Esse é um recurso implementado no Firediff de Kevin Decker .

Aqui está uma solução parcial. Depois de fazer as alterações, clique em um dos links para o arquivo relevante. Como é o arquivo original, você precisará atualizá-lo, que fica sob o botão do menu de opções no canto superior direito do painel do firebug. Agora você tem a página css modificada, que pode copiar e colar. Obviamente, você precisará fazer isso para cada arquivo css.

Edit: parece que Mark Biek tem uma versão mais rápida

Uma maneira muito fácil de "editar" sua página é acessar o site pelo navegador da Internet. Salve a página como html apenas na área de trabalho. Vá para a área de trabalho e clique com o botão direito do mouse no novo arquivo de página da web e selecione abrir com, escolha o bloco de notas e edite a página a partir daí, se você souber que html será fácil. Depois que toda a sua edição estiver concluída, salve o arquivo e reabra sua página da Web, as alterações deverão estar lá se forem feitas corretamente. Você pode usar sua nova página editada e exportar ou copiá-la para o local remoto

Na verdade, o Firebug é uma ferramenta de depuração e análise: não é um editor e, obviamente, não é considerado um. O outro motivo já foi mencionado: como você deseja alterar o CSS, armazenado em um servidor ao depurar uma página da web?