Editor CSS con vista previa en tiempo real y localización de selectores

Editor CSS con vista previa en tiempo real y localización de selectores

El título dice todo sobre lo que estoy buscando. Básicamente, debería ser un software que recopile todos los estilos de un sitio web para poder editarlos y guardarlos.

Lea la pregunta detenidamente, porque quiero que se cumplan todas las condiciones mencionadas.

EDITAR:Quiero ser más claro aquí o más bien describir el flujo de trabajo que deseo. La situación inicial será que tenga las fuentes del sitio web en su máquina local.
Ahora quiero abrir las fuentes simples (HTML/CSS) en mi editor/IDE/lo que sea (¡sin WYSIWYG!). Y quiero una vista previa en vivo justo al lado o en una ventana diferente (¡no en otra pestaña!), quiero verla mientras edito la fuente. La vista previa debería actualizarse automáticamente (o cuando guardo el archivo, que esencialmente sería lo mismo porque CTRL+S es una especie de reflejo: P).
Además debería tener un inspector que funcione como los de Firebug o Chrom(e|ium). Cuando hago clic en un selector de CSS en ese inspector, el cursor debería saltar directamente a él en el archivo fuente respectivo.

OTRA EDICIÓN:Encontró estohttps://stackoverflow.com/q/4680109/220652. Casi el mismo problema.

Respuesta1

Hay algunas opciones.

Actualmente simplemente usoHerramientas para desarrolladores de Google Chrome(Vídeo de acción) ya que permite una amplia gama de inspecciones, informes detallados y anulaciones. Después de realizar mis cambios, simplemente copio el CSS actualizado y sobrescribo las secciones relevantes del archivo CSS, actualizo y continúo conectando.

Aquí he editado una definición en la herramienta para desarrolladores de Chrome.

ingrese la descripción de la imagen aquí

Puedo seguir el nombre del archivo y el número de línea (después de copiar los cambios) y simplemente pegarlos en el editor.

ingrese la descripción de la imagen aquí

Más allá de eso hay una herramienta lanzada recientemente llamadamasilla webque está diseñado para aliviar el problema descrito. Si bien todavía no lo he usado personalmente, está desarrollado porjoel spolskyla empresaSoftware de niebla Creek(Joel también es cofundador de StackOverflow). Así que estaría dispuesto a apostar que es un producto relativamente estable, simple y eficaz.

Respuesta2

Parece que esta pregunta ya se ha discutido, pero estás hablando más específicamente de un editor CSS. Y estoy seguro de que es por eso que no han marcado tu pregunta como duplicada.

Sin embargo, lo que puedo sugerirle es el uso de varias herramientas que publiqué en respuestas a otras preguntas, como esta:¿Alternativa a Dreamweaver en Ubuntu?, y aunque apuesto a que ya lo has visto, lo transcribo aquí para tu comodidad:

Tu pregunta parece un poco ambigua.

En primer lugar y relacionado con la alternativa a Dreamweaver, todas las sugerencias de todas las demás respuestas me parecieron excelentes, pero al buscar una alternativa a Dreamweaver, la aplicación más cercana -para mí- era laAmayaProyecto. Que parece ser más rico que otras alternativas y un poco más sofisticado que el Kompozer.

Aquí tienes una captura de pantalla de la web oficial para que la veas en acción:

ingrese la descripción de la imagen aquí

Se pueden acceder a capturas de pantalla adicionales haciendo clic en el siguiente enlace: http://www.w3.org/Amaya/screenshots/Overview.html

Puede que te resulte un poco inestable, o al menos lo fue para mí, pero también puede que se ajuste a tus necesidades.

Después de jugar con los editores WYSIWYG, preferí la codificación directa con BlueFish pero no es un editor WYSIWYG.

Y sobre las sugerencias para tu problema con el firebug no puedo decir nada, lo siento.

Por favor, cuéntanos cómo te fue si le das una oportunidad a Amaya.

¡Buena suerte!

Editar == Después de instalar Amaya, todavía lo encuentro lejos de ser estable, pero de alguna manera parece tener mejores características que otras aplicaciones, si se considera que otros programas son editores de texto simples y Amaya es como un editor WYSIWYG.

Probé lo que dijiste en tu comentario y descubrí que Amaya ni siquiera se da cuenta de que algo cambió en la estructura/nombre de los archivos/carpetas. Lo cual no se ajustará a sus necesidades relacionadas con esto.

En la siguiente captura de pantalla puedes ver que cambié el nombre de la carpeta "recursos" a "recursos1" y Amaya todavía la muestra como "recursos" y no hay forma de forzar su actualización. Incluso después de reiniciar el software y cargar el proyecto nuevamente, Amaya no lo notará.

ingrese la descripción de la imagen aquí

Voy a seguir tu pregunta de cerca con la esperanza de que alguien venga y ofrezca una buena alternativa.

¡Buena suerte!

Además, en las respuestas de otros usuarios a las mismas preguntas encontré el mensaje "Editor web grifo azul", que parece ser el único editor web estable que presenta una ventana de vista previa en tiempo real, que, por cierto, no se puede ver en modo dividido. Solo puede ver el código o la vista previa WYSIWYG, no ambas al mismo tiempo.

Capturas de pantalla colocadas aquí para su comodidad:

Pantalla de vista previa: ingrese la descripción de la imagen aquí

Pantalla de código: ingrese la descripción de la imagen aquí

Esta herramienta incluye muchas herramientas útiles, pero es posible que algunos de los complementos o complementos no sean gratuitos (de pago). Lo que reduce la atracción hacia él.

ElEstudio Aptana 3, que recomiendo en esta respuesta:¿IDE/Editor de desarrollo web básico como Dreamweaver?es -para mí- la mejor herramienta para programar, ya que puedo obtener una vista previa en vivo usando un navegador web en mi escritorio extendido de vista dual. Puede que no sea tu caso.

Eso es lo que puedo sugerir. Lo siento si esto no se ajusta a tus necesidades y...

¡Buena suerte!

Respuesta3

Ok, ¡todos escuchen!Geanyes simplemente IMPRESIONANTE! Tiene un complemento que agrega una vista previa del navegador. Puedes colocarlo en la barra lateral, en la "barra inferior" o en una ventana extra. Y ahora eldoscaracterísticas adicionales adicionales para matar culos malos.1.Este navegador utiliza WebKit. ¡Eso significa que tiene este inspector increíble!2.El navegador se recarga cuando guarda un documento abierto.

Además de esto, tiene muchas otras características increíbles, pero deberías probarlo tú mismo. Por mi parte, me enamoré. Aquí tenéis una captura de pantalla:

Geany

Respuesta4

Prueba el complemento de FirefoxFirediff. Se integra con Firebug agregando la pestaña "Cambios" que, como sugiere el nombre zen, muestra cualquier cambio que realice en CSS o DOM.

Haga clic derecho en un cambio de CSS en la pestaña "Cambios" para guardar una diferencia o una instantánea de sus cambios.

captura de pantalla despedido

También haycssActualizador, aunque no lo he usado.

En cuanto a "localización del selector", no estoy totalmente seguro de lo que quieres decir, pero hayseleccioneError, que puedes descargaraquí.

información relacionada