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

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

O título diz tudo sobre o que procuro. Basicamente deveria ser um software que coletasse todos os estilos de um site para que eu pudesse editá-los e salvá-los.

Por favor, leia a pergunta com atenção, pois desejo que todas as condições mencionadas sejam atendidas.

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

OUTRA EDIÇÃO:Encontrei istohttps://stackoverflow.com/q/4680109/220652. Quase o mesmo problema.

Responder1

Existem algumas opções.

Atualmente eu simplesmente usoFerramentas para desenvolvedores do Google Chrome(Vídeo de ação), pois permite uma ampla gama de inspeções, relatórios detalhados e substituições. Depois de fazer minhas alterações, apenas copio o CSS atualizado e escrevo as seções relevantes do arquivo CSS, atualizo e continuo conectando.

Aqui editei uma definição na ferramenta para desenvolvedores do Chrome

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

Além disso, existe uma ferramenta lançada recentemente chamadaWeb Puttyque foi projetado para aliviar o problema descrito. Embora eu ainda não o tenha usado pessoalmente, ele foi desenvolvido porJoel SpolskyempresaSoftware Fog Creek(Joel também é cofundador do StackOverflow) Portanto, aposto que é um produto relativamente estável, simples e eficaz.

Responder2

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

Porém, o que posso sugerir é o uso de diversas ferramentas que postei em respostas a outras perguntas, como esta:Alternativa ao Dreamweaver no Ubuntu?, e mesmo que eu possa apostar que você já tenha visto, transcrevo aqui para sua comodidade:

Sua pergunta parece um pouco ambígua.

Em primeiro lugar e relacionado com a 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 aAmayaProjeto. 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ê ver em ação:

insira a descrição da imagem aqui

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

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

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

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

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

Boa sorte!

Editar == 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.

Testei o que você disse no seu comentário e descobri que 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 renomeei a pasta "recursos" para "recursos1" e Amaya ainda a mostra como "recursos" e não há como forçar a atualização. Mesmo depois de reiniciar o software e carregar o projeto novamente, Amaya não notará.

insira a descrição da imagem aqui

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

Boa sorte!

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

Capturas de tela colocadas aqui para sua conveniência:

Tela de visualização: insira a descrição da imagem aqui

Tela de código: insira a descrição da imagem aqui

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

OEstúdio Aptana 3, que recomendo nesta resposta:IDE/Editor de desenvolvimento Web básico como o Dreamweaver?é -para mim- a melhor ferramenta para programação, já que posso visualizar ao vivo usando um navegador da web em minha área de trabalho estendida de visualização dupla. O que pode não ser o seu caso.

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

Boa sorte!

Responder3

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, na “bottombar” ou em uma janela extra. E agora odoisrecursos extras de bônus matadores de bad ass.1.Este navegador usa WebKit. Isso significa que tem um inspetor incrível!2.O navegador é recarregado quando você salva um documento aberto.

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

Geany

Responder4

Experimente o complemento do FirefoxBombeiro. Ele se integra ao Firebug adicionando a guia “Alterações”, que, como o nome zen sugere, mostra todas as alterações feitas no CSS ou DOM.

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

captura de tela do Firediff

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

Quanto à "localização do seletor", não tenho certeza do que você quer dizer, mas háselecioneBug, que você pode baixaraqui.

informação relacionada