Share
Recientemente, en Webdesigntuts + analizamos un flujo de trabajo HTML / CSS más rápido con las herramientas de desarrollo de Chrome, y en el Consejo rápido de hoy te pondremos en marcha con un complemento gratuito mencionado en este tutorial. Prometo esta voluntad seriamente acelere su flujo de trabajo, listo para comenzar?
Hoy vamos a recorrer la configuración completa de DevTools Autosave, pero antes de comenzar, echemos un vistazo a lo que hace exactamente esta ingeniosa extensión de Google Chrome..
Está muy bien mover un encabezado alrededor de unos pocos píxeles en las Herramientas para desarrolladores de Chrome, volver a su editor de texto, actualizar el CSS, guardar el archivo y volver al navegador para una actualización rápida para asegurarse de que todo se vea bien. Pero si eres como yo, a menudo te encontrarás modificando varias declaraciones para múltiples selectores en las Herramientas de desarrollo, solo para volver a tu hoja de estilo y haber perdido la pista de las reglas exactas que deben cambiarse..
Como sugiere su nombre, DevTools Autosave actualiza automáticamente su hoja de estilo con todos los cambios que realice en las Herramientas para desarrolladores de Chrome sobre la marcha, y si usa las Herramientas para desarrolladores en gran medida, esto puede acelerar considerablemente el desarrollo del sitio. Por supuesto, también puede volver a su editor de texto y actualizar su hoja de estilo como de costumbre, lo que lo convierte en una adición potente y flexible a su flujo de trabajo..
Ah, y por cierto, esta extensión no es solo para CSS y HTML ... DevTools Autosave también tiene JavaScript cubierto!
Antes de comenzar, echemos un vistazo rápido a cómo DevTools Autosave puede ser diferente a otras extensiones de Chrome que haya usado antes.
Normalmente, instalar una extensión de Chrome es tan simple como ir a Chrome Web Store y hacer clic en el botón 'Agregar a Chrome'. DevTools Autosave es un poco diferente en la forma en que la extensión se basa en un servidor instalado localmente (en este caso, Node.js) para comunicar los cambios realizados en Chrome a sus archivos locales CSS, HTML y JS..
Para lograr todo esto, necesitamos usar el símbolo del sistema (o la ventana de Terminal). Si nunca antes has usado el indicador de comando, no hay nada que temer, es muy fácil de usar y te guiaré en cada paso.
Para empezar, dirígete a Chrome Web Store e instala la extensión..
Después de seleccionar agregar la extensión a Chrome, se le pedirá que confirme la acción. Una vez instalada, aparecerá una notificación en la parte superior derecha de la ventana de su navegador para informarle que la extensión está bloqueada, cargada y funcionando como se requiere entre bambalinas..
El siguiente paso es dirigirse a Node.js para descargar e instalar la última versión (en el momento de escribir v0.8.16).
Desembale e instale en su ubicación preferida.
Nota: Node.js en sí mismo es un entorno de desarrollo increíblemente poderoso y su uso está más allá del alcance de este consejo rápido. Si está interesado en aprender más sobre Node.js, visite Node.js para principiantes en Nettuts+.
Ahora que tenemos toda la infraestructura necesaria para ejecutar DevTools Autosave, el siguiente paso es ejecutar Node.js a través del símbolo del sistema.
Si estás usando Windows como yo, presiona el botón Inicio, escribe "Símbolo del sistema" en el campo de búsqueda y selecciona "Símbolo del sistema Node.js".
Alternativamente, si está usando una Mac, navegue a su Carpeta de aplicaciones → Utilidades → Terminal.app
Cuando se le solicite, ejecute el siguiente comando: npm install -g autosave
Ahora verás que la terminal vibra por unos momentos:
Nota: Si su cuenta de usuario no tiene permisos de administrador, es posible que deba agregar sudo comando para instalar cosas: sudo npm instalar -g autosave
Una vez completado, puede ejecutar DevTools Autosave.
El último paso es ejecutar la extensión en sí. Ejecute el siguiente comando en el indicador: guardar automáticamente
Ahora recibirá una confirmación de que DevTools Autosave se está ejecutando localmente, de la siguiente manera:
Y con esos pocos pasos rápidos, estás listo y listo para ir.
La belleza de DevTools Autosave (y por eso lo prefiero a algunas aplicaciones similares) es que una vez que se ejecuta a través del servidor node.js, todo lo demás simplemente trabajos. No hay necesidad de apuntar la extensión a directorios locales (a menos que esté ejecutando un servidor local como WAMP o MAMP), y no hay nada que activar "per". Simplemente active el editor de texto que prefiera, cargue un archivo .css o .js y modifique el contenido de su corazón en Chrome Developer Tools con todos los cambios guardados.
DevTools Autosave se ha convertido en una extensión no visible de mi navegador favorito, y estoy seguro de que estarás de acuerdo.!
¿Utilizará DevTools Autosave? ¿Prefieres algo más? Si es así, asegúrese de dejar un comentario a continuación.
Accentsconagua