1. Inicio
  2. Pregunta y respuesta
  3. ¿Cómo edito CSS en Chrome como en Firebug para Firefox?

¿Cómo edito CSS en Chrome como en Firebug para Firefox?

2010-09-23 25 views
18

He estado editando CSS usando Firebug en Firefox, pero hace poco noté que Chrome está renderizando mis páginas mucho más rápido (con desplazamiento, elementos interactivos, etc.) y quería cambiar a ellas.¿Cómo edito CSS en Chrome como en Firebug para Firefox?

Encontré Chrome muestra el CSS calculado y qué atributos se anulan en la pila y puedo modificarlos uno por uno, pero lo que me gustó de Firebug fue que podía simplemente editar toda la hoja de estilos en un texto en tiempo real editor. ¿Es esta misma función en algún lugar del panel de desarrolladores de Chrome, o hay una extensión de Chrome que me permite modificar las hojas de estilo de esta manera?

Fuente

2010-09-23 Tom

+4

bienvenidos a las hordas de desarrolladores que esperan esta función en Chrome para que todos podamos hacer un cambio permanente a Chrome. – Jason

Respuesta

9

Pruebe StyleBot. También puede guardar CSS editado.

Fuente

2010-09-24 18:00:22 NARKOZ

+2

Realmente útil. Probé varias extensiones para Chrome y también usé esto. Créeme, esta es la mejor extensión que encontré para editar hojas de estilo en Chrome. Todas las demás extensiones no le permiten editar hojas de estilos locales. También el famoso FireBug es una extensión horrible para Chrome. –

+0

parece que no puedo hacerlo funcionar bajo mac ... ¿alguien una idea de por qué? – Tobias

+2

¿En qué parte de StyleBot puede ver toda la hoja de estilo para agregar/editar reglas? –

0

Usuario Firebug Lite. También está disponible como una extensión de Chrome.

Fuente

2010-09-23 23:29:25 slebetman

+0

¿No vio mi respuesta antes de publicar esto? jaja ... – Jason

+0

He probado Firebug Lite, no tiene un editor de texto CSS en vivo, y muestra un montón de estilos computados que no están presentes en la hoja de estilos. – Tom

+0

@Jason: Cuando comencé a escribir, tu respuesta no estaba allí. Pero antes de presionar el botón de enviar decidí verificar la URL :-P – slebetman

1

¿Ha probado la extensión CSS de la barra de herramientas de desarrollador web-> Herramienta de edición de CSS?

Fuente

2010-09-24 00:00:50

+2

¡No se compara con FireBug! – markus

+0

no permite editar hojas de estilos locales. –

+0

Esta es mi manera FAVORITA de crear estilos. Uso la función "Editar CSS" de WDT en conjunto con Firebug (para ver el marcado) y es la mejor. Mi único problema es que WDT para Chrome es un lanzamiento sub 1.0 y muy defectuoso, así que me queda tener que escribir en Firefox. Además, si está utilizando un preprocesador CSS, realmente no puede aprovechar las herramientas de edición/creación en el navegador mucho en este momento. De hecho acabo de bloguear sobre este tema ayer: http://blog.joelglovier.com/post/30395741197/browser-based-css-authoring-ftw –

2

Puede editar cualquier propiedad o crear una nueva haciendo doble clic en una entrada o espacio vacío en el panel de estilos del panel Elementos. No hay forma de editar todo el archivo css como texto en este momento.

Fuente

2010-09-24 17:51:49 loislo

0

Usted está buscando para este - Live Stylesheets

Fuente

2011-07-17 14:23:23

+0

Esta extensión no funciona en absoluto. No lo uses –

2

utilizo live.js! A medida que edite su archivo css, le mostrará los resultados en tiempo real en su navegador sin tener que actualizar. http://livejs.com/

He pasado innumerables horas probando casi todas las extensiones de Chome que pude encontrar (incluido elbot de estilo) para imitar la edición en vivo de CSS de Firebug en Firefox. Ninguno hasta la fecha tiene ese mismo flujo de trabajo. Live.js es el más cercano.

Fuente

2011-12-13 02:34:17

+1

Después de una prueba rápida: Oh, esto es bueno ... – worldsayshi

10

En las versiones actuales de Chrome (estoy ejecutando 16) no necesita ningún complemento externo. Haga clic derecho en cualquier lugar de su página, elija inspeccione el elemento, luego en la ventana que aparece haga clic en la ficha Recursos, luego en el panel izquierdo, seleccione la hoja de estilos que desea editar. Para comenzar la edición, primero debe hacer doble clic sobre el texto css.

Fuente

2011-12-18 23:18:18 pax

+5

Esto funciona, pero es terrible. Si accidentalmente abandonas la página, todas tus ediciones se pierden, y en los sitios que he intentado editar, es ** terriblemente ** lento. Como 300 baudios lentos. – Mixologic

+1

Es cierto que todas las ediciones se pierden si cierra la página; me ha pasado algunas veces antes de acostumbrarse. Nunca encontré ningún problema de rendimiento, estoy trabajando en una máquina normal de 3 años. Pero me encanta no tener que iniciar complementos de terceros si puedo hacer el trabajo de la caja. – pax

+1

Descubrí que la velocidad tenía algo que ver con el hecho de que tenía png's codificados en base64 en mi CSS. Cada pulsación de tecla volvería a solicitar ese recurso por alguna razón. Entonces, la lista de 'Recursos' en chrome tendría * enorme *. No estoy seguro de lo que estaba pasando allí. Pero editar otros archivos css sin png codificados en base64 funcionó bien. – Mixologic

0

Escribí el LiveCSSEditor hace 4 años exactamente por este motivo. FireBug en Firefox me permitiría escribir CSS a mano libre en la página, pero nada más en Chrome lo haría.

Todavía lo uso hoy y todavía tengo que encontrar una solución mejor. Puede funcionar para usted también. :)

Fuente

2014-03-03 22:58:29

Cuestiones relacionadas

 Cuestiones relacionadas