Por que não consigo salvar alterações de CSS no Firebug? [fechadas]

143

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.

Dean Rather
fonte
Aqui está um post que fiz para o grupo um pouco para trás: groups.google.com/group/firebug/browse_thread/thread/...
NickFitz
Você já tentou cssUpdater.com ? Com ele editado no FireBug, pressione o botão "Sincronizar agora" para transferir todas as suas alterações para o (s) arquivo (s) CSS original (s).
Jhonte
2
O Firebug tem uma maneira específica de fazer isso. Depois de fazer algumas alterações no css adicionando regras na exibição css do lado direito, clique no endereço do elemento de estilo referenciado na extrema direita e escolha Edição ao vivo no menu suspenso do menu superior (NOT SOURCE EDIT), clique em no Live Edit e copie / cole no conteúdo do seu coração.
21712 Chris Como:
Recarregamento automático no navegador na alteração de arquivo local. Dessa forma, eu posso ficar no meu editor. Mas apenas funciona localmente.
Nils Lindemann #

Respostas:

27

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

insira a descrição da imagem aqui

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

Leniel Maccaferri
fonte
1
Há outra opção: com o chrome canary, você pode ativar um mapeamento direto dos arquivos js e css. Consulte este artigo para obter instruções sobre como habilitar o experimento no espaço de trabalho do canário devcoma.blogspot.it/2013/01/…
Matteo Conta
@Contam muito bom. As coisas estão realmente evoluindo! Obrigado pela atualização. :)
Leniel Maccaferri
@LenielMacaferi [Atualização 2]: Eu nunca consegui que o essencial da Web atualize o css real. Existe alguma configuração que eu precise definir?
Arvand 4/16
104

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 .

Morten Bergfall
fonte
Uma ferramenta tão pequena, com tantas horas de trabalho salvas, somos todos vencedores hoje ;-) Um brinde ao autor do FireDiff, parece que ele não atravessa as águas do SO. Fazer: autor correio, expressar gratidão
Morten Bergfall
O autor é Kevin Decker. Poderia ser este usuário: stackoverflow.com/users/238459/kevin-decker
Jonathan Parker
Sim, é esse usuário, pois o link para o site é o mesmo.
Jonathan Parker
1
Doce mãe de deus. isso é incrível.
Jason
3
OMG - Eu tenho um total nerd explodido!
Glicerina
15

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

texto alternativo

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.

Cinza
fonte
1
Eu uso o plug-in de desenvolvedor da web. Mas tentei procurar a opção e não a encontrei. Como eu salvo as novas folhas de estilo?
22668 Dean Rather
Quando edito o CSS no Firebug, as alterações não são sincronizadas com a barra de ferramentas WebDeveloper "Edit CSS". Como você os sincroniza?
Gerold Meisinger 12/12
13

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.

Tobias Strebitzer
fonte
13

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.

Janela CSS-X-Fire 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.

sorin
fonte
Bom achado! Mas me pergunto se existe algum canal semelhante entre o Firebug e outros IDEs ou editores de Mac que o IntelliJ.
Henrik
@ hced Seu desejo foi realizado, verifique o FireFile.
sorin 30/05
10

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

Craig Angus
fonte
1
Você pode vincular o FireBug ao eclipse? Surpreendente! FireBug e Eclipse são as principais ferramentas que eu uso no desenvolvimento. Eu vou olhar para isso. Obrigado!
Dean Rather
9

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.

Mark Biek
fonte
Essa era a solução que eu estava procurando ... Adoro respostas óbvias que nunca havia notado antes. Cthulu amaldiçoa o StackOverflow em todas as suas formas, pela loucura que impede.
OhkaBaka
2
BAH ... isso não funciona .... essa é a fonte original ... e eliminou todas as minhas alterações.
OhkaBaka
7

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/

Rahul
fonte
Parece incrível. E para o WebKit Web Inspector também? Yay!
Jocap 28/10
3

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.

Rahul
fonte
3

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.

Jonathan Parker
fonte
Parece ótimo, eu vou experimentar!
Dean Rather
3

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/

Ronnie Kolehmainen
fonte
2

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.

Ólafur Waage
fonte
2

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.

Mathletics
fonte
2

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.

Martin Kool
fonte
2

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

Inspetor Webkit

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.

Lance Pollard
fonte
1

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.

Ryszard Szopa
fonte
1
Isso não é inteiramente verdade. O Firebug mostra todos os estilos que se aplicam a um elemento, incluindo de onde eles vieram, e apenas os informa se eles foram substituídos por uma regra mais específica / posterior / importante. Permite alterar / adicionar regras em qualquer nível. Você também tem a opção de visualizar apenas os estilos calculados, mas a visualização padrão é mostrar todos os estilos.
SpoonMeiser
1

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.

Leon
fonte
1

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.

mrk
fonte
1

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 .

James
fonte
0

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

esplêndido
fonte
Que tal combinar: use a solução de Mark Biek para copiar e colar, mas use a solução de Eduardo Molteni e cole-a nas ferramentas do desenvolvedor e salve. É o que vou fazer por enquanto. Seria bom se isso foi adicionado ao FB!
Rob
0

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

mjk
fonte
1
É verdade, mas acho que a questão é como salvar arquivos CSS com as alterações feitas no Firebug aplicadas a eles.
Henrik
-4

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?

MADMap
fonte
Não sei por que você recebeu votos negativos, mas +1 de mim: uma das principais razões pelas quais as pessoas continuam pedindo esse recurso quase impossível é que elas não apreciam a diferença entre um depurador e um editor.
10409 NickFitz
4
O Firebug foi criado para resolver um problema para não ser um depurador. Se houver outro problema que precise ser resolvido, por que ele não pode ser adicionado ao Firebug?
Jonathan Parker
3
Claro, o Firebug é um depurador, mas por que permite editar CSS, por exemplo? Quem disse que um depurador não deve salvar o resultado da saída alterada? Minha impressão é que o Firebug é tantas coisas para tantas pessoas. Para alguns, usar o depurador e entrar e sair de funções etc. é a principal coisa - ainda, para outros, sua capacidade de alterar o CSS com atualizações ao vivo é o principal.
Henrik