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

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 que pueda 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 mi flujo de trabajo deseado. 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 (¡no 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 debe 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, debe tener un inspector que funcione como los de Firebug o Chrom (e | ium). Cuando hago clic en un selector CSS en ese inspector, el cursor debería saltar directamente a él en el archivo fuente respectivo.

OTRA EDICIÓN: Encontré este https://stackoverflow.com/q/4680109/220652 . Casi el mismo problema.

Hay algunas opciones

Actualmente, simplemente uso las Herramientas para desarrolladores de Google Chrome ( Action Video ), ya que permite una amplia gama de inspección, informes detallados y anulación. Después de hacer mis cambios, solo copie el CSS actualizado y sobreescribo las secciones relevantes del archivo CSS, actualizo y continúo desconectando.

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

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

Más allá de eso, hay una herramienta recientemente lanzada llamada WebPutty que está diseñada para aliviar su problema descrito. Aunque todavía no lo he usado personalmente, está desarrollado por la compañía Fog Creek Software de Joel Spolsky (Joel también es cofundador de StackOverflow). De modo que estaría dispuesto a apostar que es un producto relativamente estable, simple y efectivo.

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

Sin embargo, lo que puedo sugerirle es el uso de varias herramientas que he publicado en respuestas a otras preguntas, como esta: ¿ Alternativa Dreamweaver en ubuntu? , e incluso cuando puedo apostar que ya lo has visto, lo transcribo aquí para tu comodidad:

Su pregunta parece ser un poco ambigua.

Primero que nada y relacionado con la alternativa a Dreamweaver, encontré excelentes todas las sugerencias de todas las otras respuestas, pero cuando buscaba una alternativa a Dreamweaver, la aplicación más cercana, para mí, fue el Proyecto Amaya . Lo que parece ser más rico que otras alternativas y un poco más sofisticado que el Kompozer.

Una captura de pantalla de la web oficial está aquí para que la veas en acción:

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

Puede que le resulte un poco inestable, o al menos lo fue para mí, pero también puede satisfacer sus 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 su problema con el firebug, no puedo decir nada, lo siento.

Háganos saber cómo le fue si le dio una oportunidad a Amaya.

¡Buena suerte!

Editar == Después de instalar Amaya, lo encuentro aún lejos de ser estable, pero de alguna manera parece tener mejores características que otras aplicaciones, si considera que otro software son simples Editores de texto 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, puede ver que cambié el nombre de la carpeta "recursos" a "recursos1" y Amaya todavía lo 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á.

Seguiré de cerca tu pregunta esperando que alguien venga y descarte una buena alternativa.

¡Buena suerte!

Además, en las respuestas de otros usuarios a las mismas preguntas, encontré el " Blue Griffon Web Editor ", que parece ser el único editor web estable que cuenta con 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 ambos al mismo tiempo.

Capturas de pantalla colocadas aquí para su conveniencia:

Pantalla de vista previa:

Pantalla de código:

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

El Aptana Studio 3 , que os recomiendo en esta respuesta: Desarrollo Web Básico IDE / editor 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 doble vista. Que puede no ser tu caso.

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

¡Buena suerte!

Ok, todos escuchen! ¡Geany es simplemente INCREÍBLE! Tiene un complemento que agrega una vista previa del navegador. Puede colocarlo en la barra lateral, en el "bottombar" o en una ventana adicional. Y ahora las dos características extra de asesino malo. 1. Este navegador usa WebKit. ¡Eso significa que tiene este increíble inspector! 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í tienes una captura de pantalla:

Lo siento amigos, pero responderé mi propia pregunta. Acabo de encontrar Stylebot . Cumple casi todas las condiciones que tengo. No tiene ninguna finalización automática, pero puedo vivir con eso.

Aquí hay una captura de pantalla. La barra lateral es Stylebot. Tiene un modo de edición básico donde puede editar rápidamente algunas propiedades simples, un modo avanzado donde puede editar el CSS simple para el elemento seleccionado y con "Editar CSS" puede editar todo el CSS para la página.

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

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

También hay cssUpdater , aunque no lo he usado.

En cuanto a la "localización del selector", no estoy totalmente seguro de lo que quiere decir, pero hay selectBug , que puede descargar aquí .

Aptana Studio es un gran IDE, pero si no me equivoco, no tiene Vista previa en tiempo real. De todos modos, si estás interesado: http://www.aptana.com/products/studio3

PD: tiene un conjunto de teclas de acceso rápido para la vista previa, por lo que no es un gran problema.

No es un software en sí, pero el complemento con estilo (Chrome y Firefox) actualiza una página automáticamente cuando guarda una hoja de estilo de anulación. A diferencia de FireBug, lo guarda para que pueda copiarlo y pegarlo en un .cssarchivo adecuado cuando esté satisfecho.

Hace solo un par de semanas, un nuevo jugador se crió en este campo. Estoy hablando de Brackets, el editor de código fuente abierto de Adobe. Toda la información que necesita, aquí: https://github.com/adobe/brackets/wiki/Linux-Version

La versión spring30 se lanzó hace un par de días :) ¡Buena suerte!