2011-01-24 8 views
5

Odio Firefox, realmente lo creo, pero como desarrollador web estoy encadenado a él por el gran conjunto de herramientas que ofrece Firebug. Recientemente, las herramientas de inspección de Chrome y Safari permitieron a los usuarios editar el código estructural de los trozos completos (de una manera muy defectuosa), pero todavía no puede editar hojas de estilo completas. Por lo general, cuando alguien menciona esto, los desarrolladores de Chrome y Safari dicen "PERO PUEDES EDITAR CSS", y eso es cierto, hasta cierto punto. Puede editar el CSS propiedad por propiedad (que tarda una eternidad si tiene muchos cambios) en ambos navegadores, pero no hay forma de ver la hoja de cálculo completa, realizar ediciones dentro de ella e inmediatamente ver los resultados. Hasta la fecha, solo una instalación completa de Firebug en Firefox te permite hacer esto.Edición de hojas de estilo completa sobre la marcha en Chrome o Safari

¿Ha habido algún impulso en cualquiera de los campamentos de Chrome o Safari para construir un complemento que coincida con esta función sin precedentes? Los complementos baratos que le permiten insertar CSS en la página no son la respuesta. Es muy simple:

  1. tener una lista con las hojas de estilo actual que se está haciendo referencia
  2. elegir la que desea editar y haga clic en un botón de edición
  3. Ver todo el código en la hoja de estilo
  4. Haga los cambios y véalos reflejados en la página inmediatamente

¿De verdad es tan difícil construir algo que hace esto? Creo que debe ser, b/c ¿por qué más las comunidades de desarrolladores de dos navegadores lo ignorarían por completo? Si hay algo por ahí que ahora ofrece esta capacidad, me encantaría escucharlo; de lo contrario, tal vez alguien se acercará al plato y lo desarrollará para Chrome o Safari. Parece que los chicos que desarrollaron la aplicación CSS Edit estarían por todas partes.

+4

'I hate Firefox': una vista poco común. ¿Alguna razón en particular? En cuanto a su pregunta real, no * a menudo * me encuentro utilizando la función "cambiar texto CSS real" de Firebug, por lo que no la echo de Chrome. El cambio de "propiedad por propiedad" es solo una segunda naturaleza para mí. Obviamente, sería bueno tener la característica Firebug de la que hablas en Chrome/Safari, pero no creo que sea tan importante para la mayoría de los desarrolladores. – thirtydot

+0

"una vista poco común" - apenas. Firefox, y el motor de renderizado Gecko en particular, está comenzando a mostrar su edad. No es raro escuchar que se lo conoce como el "nuevo IE" entre los desarrolladores de mi equipo, que es un grupo de aproximadamente 400 profesionales. – bjork24

+2

Lo siento, pero eso suena como basura total. Firefox 3.6.13, que ni siquiera es la última versión, obtiene puntajes altos en la prueba Acid3. En realidad estoy intrigado: ¿qué hay de malo en el motor de renderizado que hace que lo odies lo suficiente como para que las primeras palabras de tu publicación sean "Odio Firefox"? – thirtydot

Respuesta

9

¡Gracias a ti lo encontré!

El Live Stylesheets extension para Chrome es lo que estás buscando. Asegúrese de reiniciar Chrome después de la instalación para usarlo.

+0

¡Gracias! ¡Funciona perfectamente! – bjork24

+0

+1, parece perfecto para el extraño momento en que quiero esto en Chrome. – thirtydot

+0

dulce, buena una @Knu! –

3

También puede editar hojas de estilo externas en las DevTools de Chrome (desde Chrome 15 más o menos). Simplemente haga doble clic en el contenido de la hoja de estilo en el panel de Recursos (o haga clic en el botón "Editar" a continuación), edite, Ctrl-S para confirmar una nueva revisión, Esc para cancelar la edición. ¡Y actualiza tu página mientras escribes!

0

Puede editar sus archivos CSS directamente en Chrome sin depender de ninguna extensión.

Aquí es cómo: Edit CSS files on the fly using Chrome DevTools

Una forma diferente de acceder a ella:

  1. Haga clic derecho en la página, seleccione inspeccionar
  2. en los DevTools, haga clic en "Fuentes"
  3. localizar el CSS en el panel "Red" y haga clic en él
  4. cambie el CSS y guárdelo (presionando ctrl + s) enter image description here
Cuestiones relacionadas