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:
- O navegador reflete o css / js / html / etc sempre que você salvar, sem recarregar a página
- Ele pode lidar com qualquer modelo / linguagem / estrutura (Stylus, Less, CoffeeScript, Jade, Haml, etc.)
- 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.
