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


9

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.


2
Firebug y la barra de herramientas del desarrollador web pueden editar CSS directamente, este último también puede guardarlo.
Lekensteyn

1
@Lekensteyn: Sí, pero Firebug no puede guardar y Web Developer no puede ubicar selectores. Entonces no son lo que estoy buscando. Lo siento.
dAnjou

Respuestas:


12

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

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


¿Cómo se copia exactamente el CSS? ¿Y puedes hacerlo por archivo? Parece que WebPutty no puede manejar sitios web locales, pero gracias por la pista.
dAnjou

1
@jAnjou Intenté proporcionar algunas capturas de pantalla para mostrarle cómo sería el flujo de trabajo.
Marco Ceppi

Ah ok Entonces, este flujo de trabajo es casi el mismo que con Stylebot. La mayor diferencia: Stylebot guarda el CSS para que pueda volver a cargar la página o ir a otras páginas de ese sitio web. De todos modos, este es un voto positivo.
dAnjou

5

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:

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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: 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 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!


5

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:

Geany


Solo desearía que abriera que permitiera la ventana del navegador en una nueva "Pestaña". Eso haría que las pruebas que no sean CSS sean mucho mejores.
Nemo

No estoy seguro de si te entiendo, pero puedes tener una vista previa del navegador en otra pestaña en casi cualquier otro IDE. Pero eso es exactamente lo que no quería.
dAnjou


Ah ... hmm. Desafortunadamente, en Geany no es posible tener la vista previa del navegador (que es un navegador con todas las funciones) en una pestaña al lado de las pestañas del editor. Pero puedes tenerlo en una ventana adicional. Por lo tanto, puede usarlo con varios monitores o con un monitor de pantalla ancha (medio navegador, medio editor).
dAnjou

4

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.

ingrese la descripción de la imagen aquí


2

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.

captura de pantalla de firediff

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


Firediff no parece funcionar aquí en Natty y Fx 6.0.2. Hice algunos cambios aquí y allá, pero no hay cambios en la pestaña "Cambios". Estoy casi seguro de que cssUpdater sería lo que estoy buscando, pero no está disponible para Linux. Por "ubicación del selector" me refiero a los selectores CSS. Cuando hago clic derecho en algún lugar del sitio web y hago clic en "Inspeccionar elemento", Firebug o el inspector Chrom (e | ium) me muestran el elemento respectivo y su CSS.
dAnjou

Funciona, lo estoy usando en Natty y la última versión de Firefox en este momento. Asegúrese de que se muestren todos los cambios (haga clic en la pequeña flecha hacia abajo en la pestaña de cambios).
scottl

Ok, ahora Firediff funciona de repente, pero es un poco desordenado y el flujo de trabajo con él no es realmente agradable.
dAnjou

0

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 veo cómo Aptana cumple con alguna de mis condiciones (?).
dAnjou

0

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.


No entiendo. ¿Puede localizar selectores?
dAnjou

0

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!

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.