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

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?

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:

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.

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.

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:

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

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.

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!

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

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 .

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

Com o Workspaces, você pode ter seu CSS salvo à medida que os digita em seu inspetor (no Chrome). O problema é que todas as alterações são salvas automaticamente e não há como desativar esse recurso, conforme apontado em http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ e Desativar o salvamento automático de alterações CSS nas Ferramentas de desenvolvedor do Chrome .

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:

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":

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!

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 .

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

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.