Editor de CSS com visualização em tempo real e localização de seletor

O título diz tudo sobre o que estou procurando. Basicamente, deve ser um software que coleta todos os estilos de um site para que eu possa editá-los e salvá-los.

Por favor, leia a pergunta com atenção, porque quero que todas as condições mencionadas sejam cumpridas.

EDIT: Quero ser mais claro aqui ou melhor, descrever o meu fluxo de trabalho desejado. A situação inicial será que você possui as fontes do site em sua máquina local.
Agora eu quero abrir as fontes simples (HTML / CSS) no meu editor / IDE / qualquer que seja (sem WYSIWYG!). E eu quero uma visualização ao vivo ao lado ou em uma janela diferente (não em outra guia!). Quero vê-la enquanto edito a fonte. A visualização deve ser atualizada automaticamente (ou quando eu salvar o arquivo, que seria basicamente o mesmo porque CTRL + S é uma espécie de reflexo: P).
Além disso, ele deve ter um inspetor que funcione como os do Firebug ou Chrom (e | ium). Quando clico em um seletor de CSS nesse inspetor, o cursor deve pular direto para ele no respectivo arquivo de origem.

OUTRA EDIÇÃO: Encontre este https://stackoverflow.com/q/4680109/220652 . Quase o mesmo problema.

Existem algumas opções.

Atualmente, simplesmente uso as Ferramentas do desenvolvedor do Google Chrome ( Action Video ), pois permitem uma ampla variedade de inspeções, relatórios detalhados e substituições. Depois de fazer as alterações, basta copiar o CSS atualizado e escrever as seções relevantes do arquivo CSS, atualizar, continuar conectando.

Aqui editei uma definição na Ferramenta de desenvolvedor do Chrome

Posso seguir o nome do arquivo e o número da linha (depois de copiar as alterações) e apenas colá-los no editor

Além disso, existe uma ferramenta lançada recentemente chamada WebPutty, projetada para aliviar o problema descrito. Embora eu ainda não o tenha usado pessoalmente, ele foi desenvolvido pela empresa de Joel Spolsky , Fog Creek Software (Joel também é co-fundador do StackOverflow). Então, eu gostaria de apostar que é um produto relativamente estável, simples e eficaz.

Esta questão parece já ter sido discutida, mas você está falando mais especificamente sobre um editor de CSS. E tenho certeza de que é por isso que eles não marcaram sua pergunta como duplicada.

No entanto, o que posso sugerir é o uso de várias ferramentas que publiquei em respostas a outras perguntas, como esta: Alternativa do Dreamweaver no ubuntu? , e mesmo quando posso apostar que você já o viu, transcrevo-o aqui para sua conveniência:

Sua pergunta parece um pouco ambígua.

Antes de tudo, e relacionado à alternativa ao Dreamweaver, achei excelentes todas as sugestões de todas as outras respostas, mas, ao procurar uma alternativa ao Dreamweaver, a aplicação mais próxima - para mim - foi o Projeto Amaya . O que parece ser mais rico que outras alternativas e um pouco mais sofisticado que o Kompozer.

Uma captura de tela da web oficial está aqui para você vê-la em ação:

Capturas de tela adicionais podem ser obtidas clicando no próximo link: http://www.w3.org/Amaya/screenshots/Overview.html

Você pode achar um pouco instável, ou pelo menos era para mim, mas também pode atender às suas necessidades.

Depois de jogar com os editores WYSIWYG, preferi a codificação direta com o BlueFish, mas não é um editor WYSIWYG.

E sobre as sugestões para o seu problema com o firebug, não posso dizer nada, desculpe.

Por favor, deixe-nos saber como você fez se der uma chance à Amaya.

Boa sorte!

Edit == Depois de instalar o Amaya, acho que ainda está longe de ser estável, mas de alguma forma parece ter recursos melhores do que outros aplicativos, se você considerar que outros softwares são editores de texto simples e o Amaya é como um editor WYSIWYG.

Eu testei o que você disse no seu comentário e descobri que o Amaya nem percebeu que algo mudou na estrutura / nome dos arquivos / pastas. O que não atenderá às suas necessidades relacionadas a isso.

Na próxima captura de tela, você pode ver que eu renomeei a pasta "resources" para "resources1" e o Amaya ainda a mostra como "resources" e não há como forçar a atualização. Mesmo depois de reiniciar o software e carregar o projeto novamente, o Amaya não notará.

Vou seguir sua pergunta de perto, esperando que alguém venha e solte uma boa alternativa.

Boa sorte!

Além disso, nas respostas de outros usuários às mesmas perguntas, encontrei o " Blue Griffon Web Editor ", que parece ser o único editor estável da web que possui uma janela de visualização em tempo real, que -btw- não pode ser visto no modo dividido . Você pode ver apenas o código ou a visualização WYSIWYG, não os dois ao mesmo tempo.

Capturas de tela colocadas aqui para sua conveniência:

Tela de visualização:

Tela de código:

Essa ferramenta inclui muitas ferramentas úteis, mas alguns dos complementos ou plug-ins podem não ser gratuitos (pagos). O que reduz a atração por ele.

O Aptana Studio 3 , que recomendo nesta resposta: Desenvolvimento básico da Web IDE / Editor como o Dreamweaver? é a melhor ferramenta para programação, pois eu posso visualizar ao vivo usando um navegador da Web na área de trabalho estendida de exibição dupla. O que pode não ser o seu caso.

Isso é o que eu posso sugerir. Desculpe se isso não atende às suas necessidades e ...

Boa sorte!

Ok, todo mundo ouça! Geany é simplesmente INCRÍVEL! Possui um plugin que adiciona uma visualização do navegador. Você pode colocá-lo na barra lateral, no "bottombar" ou em uma janela extra. E agora os dois recursos extras de assassino de bunda ruim. 1. Este navegador usa o WebKit. Isso significa que ele tem esse incrível inspetor! 2. O navegador é recarregado quando você salva um documento aberto.

Além disso, ele tem muitos outros recursos incríveis, mas você deve experimentá-lo. Eu pelo menos me apaixonei. Aqui você tem uma captura de tela:

Desculpe pessoal, mas vou responder minha própria pergunta. Acabei de encontrar o Stylebot . Ele atende a quase todas as condições que tenho. Ele não tem nenhuma conclusão automática, mas eu posso viver com isso.

Aqui está uma captura de tela. A barra lateral é Stylebot. Você tem um modo de edição básico, no qual pode editar rapidamente algumas propriedades simples, um modo avançado, no qual pode editar o CSS simples do elemento selecionado e, com "Editar CSS", pode editar o CSS inteiro da página.

Experimente o Firefox addon Firediff . Ele se integra ao Firebug, adicionando a guia "Changes", que, como sugere o nome do zen, mostra todas as alterações feitas no CSS ou no DOM.

Clique com o botão direito do mouse em uma alteração de CSS na guia "Alterações" para salvar um diff ou um instantâneo de suas alterações.

Há também o cssUpdater , embora eu não o tenha usado.

Quanto à "localização do seletor", não tenho muita certeza do que você quer dizer, mas existe o selectBug , que você pode baixar aqui .

O Aptana Studio é um ótimo IDE, mas se eu não estiver errado, ele não terá a Visualização em Tempo Real. De qualquer forma, se estiver interessado: http://www.aptana.com/products/studio3

PS: Possui um conjunto de teclas de atalho para visualização, portanto não é grande coisa.

Não é um software em si, mas o Stylish Addon (chrome e firefox) atualiza uma página automaticamente quando você salva uma folha de estilo de substituição. Ao contrário do FireBug, ele o salva para que você possa copiá-lo e colá-lo em um .cssarquivo adequado quando estiver satisfeito.

apenas algumas semanas atrás, um novo jogador levantou neste campo. Estou falando do Brackets, editor de código-fonte aberto da Adobe. Todas as informações que você precisa, aqui: https://github.com/adobe/brackets/wiki/Linux-Version

A versão spring30 foi lançada há alguns dias atrás :) Boa sorte!