editor CSS com visualização em tempo real e localização do seletor

9

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

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

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

OUTRA EDIÇÃO: Encontrou este link . Quase o mesmo problema.

    
por dAnjou 31.08.2011 / 22:19

8 respostas

5

Ok, todo mundo ouça! Geany é simplesmente INCRÍVEL! Tem um plugin que adiciona uma prévia do navegador. Você pode colocá-lo na barra lateral, no "bottombar" ou em uma janela extra. E agora o dois bônus extras características assassino bad ass. 1. Esse navegador usa o WebKit. Isso significa que tem esse inspetor incrível! 2. O navegador é recarregado quando você salva um documento aberto.

Além disso, tem muitos outros recursos impressionantes, mas você mesmo deve experimentar. Eu por um só me apaixonei. Aqui você tem uma captura de tela:

    
por dAnjou 16.09.2011 / 01:25
12

Existem algumas opções.

Atualmente, simplesmente uso as Ferramentas do desenvolvedor do Google Chrome ( Vídeo de ação ), pois permite uma ampla gama de inspeção, relatórios detalhados e superação. Depois de fazer as minhas alterações, eu apenas copiei o CSS atualizado e escrevi as seções relevantes do arquivo CSS, atualize, continue conectando.

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

Eu 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, há uma ferramenta recentemente lançada chamada WebPutty , que foi projetada para aliviar o problema descrito. Embora eu não tenha usado isso pessoalmente, ele é desenvolvido pela empresa Joel Spolsky Fog Creek Software (Joel também é co-fundador do StackOverflow) Então, eu estaria disposto a apostar que é um produto relativamente estável, simples e eficaz.

    
por Marco Ceppi 07.09.2011 / 21:11
5

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á viu, transcrevo aqui para sua conveniência:

  

Sua pergunta parece ser um pouco ambígua.

     

Primeiro de tudo e relacionado à alternativa para o Dreamweaver, eu encontrei   todas as sugestões de todas as outras respostas são excelentes, mas quando   procurando uma alternativa ao Dreamweaver, o aplicativo mais próximo   Para mim, foi o projeto Amaya. Qual parece ser mais rico do 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:

     

     

Capturas de tela adicionais podem ser acessadas clicando no link a seguir:    link

     

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

     

Depois de jogar com editores WYSIWYG, eu preferi 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 dizer   qualquer coisa, desculpe.

     

Por favor, deixe-nos saber como você fez se você 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 que outros aplicativos, se você   considere que outros softwares são simples Text Editors e Amaya é como   um editor WYSIWYG.

     

Eu testei o que você disse no seu comentário e descobri que Amaya não   até mesmo notado que algo mudou nos arquivos / pastas   estrutura / nome. O que não se ajusta às suas necessidades relacionadas a isso.

     

Na próxima tela, você pode ver que eu renomei a pasta "resources" para   "resources1" e Amaya ainda está mostrando isso como "recursos" e há   nenhuma maneira de forçá-lo a atualizar. Mesmo depois de reiniciar o software e   carregando o projeto novamente, Amaya não vai notar.

     

     

Vou seguir de perto sua pergunta esperando que alguém venha e   soltar 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 estável editor da web que apresenta uma janela de visualização em tempo real, que não pode ser vista no modo de divisão. Você só pode ver o código ou a visualização WYSIWYG, não os dois ao mesmo tempo.

Imagens colocadas aqui para sua conveniência:

Tela de visualização:

Tela de código:

Esta ferramenta inclui muitas ferramentas úteis, mas alguns dos complementos ou plugins podem ser não-livres (pagos). O que reduz a atração a ele.

O Aptana Studio 3, que eu recomendo nesta resposta: / 59632 / basic-web-development-ide-editor-like-dreamweaver / 59636 # 59636 "> IDE / Editor de Desenvolvimento Web Básico como o Dreamweaver? é, para mim, a melhor ferramenta para programação, já que posso viver visualizar usando um navegador da web em minha área de trabalho estendida de exibição dupla. Qual pode não ser o seu caso.

Isso é o que eu posso sugerir. Desculpe se isso não se encaixa em suas necessidades e ...

Boa sorte!

    
por Geppettvs D'Constanzo 09.09.2011 / 18:32
4

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

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

    
por dAnjou 14.09.2011 / 22:50
2

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

Clique com o botão direito 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 cssUpdater , embora eu não tenha usado.

Quanto à "localização do seletor", não sei ao certo o que você quer dizer, mas há selectBug , que você pode baixar aqui .

    
por scottl 08.09.2011 / 03:26
0

O Aptana Studio é um ótimo IDE, mas se não estiver errado, ele não terá a Visualização em tempo real. De qualquer forma, se você estiver interessado: link

P.S: Tem um conjunto de teclas de acesso para a Pré-visualização, por isso não é assim tão grande.

    
por Lilian A. Moraru 07.09.2011 / 18:59
0

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 é salvo para que você possa copiá-lo e colá-lo em um arquivo .css adequado quando estiver satisfeito.

    
por Tarek Fadel 07.09.2011 / 20:25
0

apenas algumas semanas atrás, um novo jogador cresceu neste campo. Estou falando sobre o suporte de código de código aberto da Adobe Brackets. Toda a informação que você precisa, aqui: link

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

    
por Rho 18.09.2013 / 12:32