Share
En este tutorial, veré las herramientas para desarrolladores de Chrome, específicamente cómo pueden ayudar a acelerar su flujo de trabajo HTML / CSS. También veré brevemente algunas otras herramientas de desarrollo que están disponibles.
Chrome se ha convertido rápidamente en una opción popular entre los diseñadores y usuarios web por su velocidad, facilidad de uso y soporte para adoptar características experimentales tempranas, como las propiedades modernas de CSS3. En la conferencia de I / O de 2012 en Google, se anunció que Chrome ahora tiene más de 310 millones de usuarios activos, casi el doble de los 160 millones de usuarios con los que contaba el año anterior..
Google Chrome se lanzó por primera vez el 2 de septiembre de 2008. Fue presentado como BETA para Microsoft Windows XP y versiones posteriores. En 2009, Google había lanzado versiones Beta para OS X y Linux. Google Chrome 5.0 se anunció el 25 de mayo de 2010. Esto marcó el primer establo lanzado para soportar las tres plataformas..
Una de las razones de su popularidad entre los diseñadores y desarrolladores web son las herramientas de desarrollo que se integran con el navegador. Estas herramientas de desarrollo nos permiten probar y depurar código de manera fácil y eficiente. Sin estas herramientas, su flujo de trabajo podría ser mucho más difícil..
Google describe las herramientas de desarrollo de Chrome como
Las herramientas de desarrollo, incluidas y disponibles en Chrome, permiten a los desarrolladores web y programadores acceder de forma profunda a las partes internas del navegador y su aplicación web. Las herramientas de desarrollo se basan en gran medida en el WebKit Web Inspector, una parte del proyecto de código abierto WebKit.
Bajo el capó, Chrome Developer Tools es una aplicación web que está escrita en HTML, JavaScript y CSS. La aplicación se activa en el tiempo de ejecución de Javascript. Una vez activado, nos permite interactuar con páginas web y jugar con ellas..
En este artículo analizaré específicamente cómo estas herramientas pueden ayudar a acelerar su flujo de trabajo de HTML y CSS. Voy a apuntar a diseñadores que aún no han experimentado necesariamente las herramientas de desarrollo de Chrome, pero estoy seguro de que incluso si estás familiarizado con ellas, también aprenderás algo en el camino..
En primer lugar, deberás abrir Chrome y navegar a una página de tu elección. Se puede acceder a las herramientas dev de una de tres maneras. Puede hacer clic con el botón derecho en una página web y seleccionar "Inspeccionar elemento", puede seleccionar la llave inglesa en la esquina superior derecha de Chrome y seleccionar "Herramientas> Herramientas para desarrolladores". La tercera y última forma es usar una serie de accesos directos que Chrome ha puesto a nuestra disposición:
En Windows y Linux, pulse
En Mac, presione
Si eres un diseñador web, pasarás bastante tiempo en la sección "Elementos" de la aplicación. Esta aplicación le permite ver todo en el modelo de objeto de documento (DOM para abreviar).
Muestra el DOM como un árbol, para que pueda encontrar fácilmente su camino alrededor del documento html. Lo mejor de la herramienta de inspección es que, al pasar el cursor sobre un elemento DOM en el árbol, se resaltará la etiqueta relevante en la página web que está viendo. Al seleccionar la pequeña lupa en la esquina inferior izquierda del inspector, puede seleccionar fácilmente un nodo dom directamente en la página web que está viendo y se resaltará. Esto puede ser un gran ahorro de tiempo si desea comprobar rápidamente el nombre o el tipo de atributo que tiene un elemento en su página..
Puede editar el HTML de los nodos dom, haciendo doble clic en ellos. A partir de esto, puede cambiar atributos tales como valores, ID y clases o incluso el tipo de etiqueta HTML.
Cuando hace clic con el botón derecho en un nodo, aparecerá un menú contextual, que le permite copiar el código html o eliminarlo por completo. También puede copiar el XPath del nodo. XPath es un lenguaje de consulta para seleccionar nodos de un documento. Esto puede ser útil cuando se usan cosas como el lenguaje de consulta de Yahoo (YQL).
Una cosa que también puedes hacer es arrastrar elementos HTML alrededor de la página. Para hacer esto, seleccione un nodo y arrástrelo a otro lugar en el árbol. Esto se reflejará en la página web que está inspeccionando..
En la parte inferior de los elementos, el inspector vive una barra que le permite navegar a lo largo de los elementos principales. Esto deja un rastro de los ancestros de los elementos seleccionados, lo que le permite ver y encontrar elementos principales de forma rápida y sencilla.
Otra pequeña característica útil del panel de elementos es para cuando trabajas con imágenes. Simplemente coloque el cursor sobre la etiqueta de la imagen y será recibido por una pequeña ventana emergente que muestra la imagen, las dimensiones de la imagen renderizada y el tamaño de la imagen original. El tamaño renderizado a veces puede ser más grande que el tamaño de la imagen original, lo que puede ser causado al agregar elementos como bordes o relleno.
Es importante tener en cuenta que el tamaño renderizado se refiere al tamaño del elemento renderizado y no necesariamente al tamaño de la imagen real.
Las herramientas de desarrollo de Chrome son extremadamente útiles cuando se trata de depurar CSS. A veces, los estilos CSS pueden colapsar y causar efectos visuales no deseados. Al poder inspeccionar las reglas de estilo que el navegador está aplicando al elemento, podemos encontrar la raíz del problema y corregir el error..
La sección 'estilo computado' le permite ver qué estilos aplica el motor de renderizado del navegador al elemento. Este es el conjunto final de estilos que se aplican a la página web. Al hacer clic en la pequeña flecha a la izquierda de un estilo computado particular, puede ver de dónde desciende ese estilo. Entonces, si no puedes entender la razón de por qué ese div se está diseñando de manera persistente con un fondo negro, o por qué ese texto simplemente no se pone en negrita. Eche un vistazo en la sección de estilo computado y le permitirá ver lo que ve el navegador.
La sección "Estilos" y las "Reglas CSS coincidentes" funcionan de forma similar entre sí. Ambos le permiten agregar, eliminar y modificar reglas CSS a un elemento. El panel 'element.style' le permite agregar propiedades a ese elemento en particular, independientemente del id o la clase que tenga, piense en estos como estilos en línea. Esto difiere de la sección 'Reglas CSS emparejadas' ya que las reglas que cambia en esta sección se reflejarán en cualquier otro elemento con ese ID o clase en particular.
A veces, puede notar que una regla tiene un estilo tachado. Esto generalmente se debe a que está siendo anulada por otra regla de otra propiedad. Para llegar al fondo de por qué se está anulando, puede usar la sección 'Estilo computado' como se mencionó anteriormente.
Más diseñadores con los que he hablado recientemente se están alejando del enfoque de diseño de un sitio específico en un paquete de edición como Photoshop y Fireworks y se están moviendo hacia un enfoque de "diseño en el navegador". Este nuevo enfoque le permite ver su trabajo como lo ve el navegador.
Las herramientas de edición, como Photoshop, tienen motores de renderización diferentes a los de los navegadores, lo que puede significar que las fuentes y los colores aparecen diferentes. También coloca el diseño in situ y le permite ver cómo aparece en el navegador. Sin mencionar los beneficios que tiene cuando se trata de diseñar responsablemente y para la amplia gama de tipos de dispositivos con los que ahora tenemos que lidiar. Por supuesto, el software como Photoshop todavía juega un papel importante en mi flujo de trabajo, aunque encuentro que lo estoy usando para crear conjuntos de estilos hoy en día, en lugar de diseños reales..
Una característica útil para este nuevo enfoque es la forma en que puede seleccionar colores. Al hacer clic en el icono de engranaje en la esquina superior derecha del panel "Estilos", puede alternar entre diferentes modos de color. Son:
Si, por ejemplo, usa negro y luego ve la página web en vivo y observa que es un poco demasiado oscuro para la estética a la que apunta, entonces simplemente puede hacer clic en el pequeño cuadro de color que se encuentra al lado del valor de la propiedad y aparecerá. un selector de color que le permite derribar un poco el brillo del negro. Esto es realmente útil para cuando se diseña sobre la marcha..
Al ajustar los márgenes, los rellenos y el posicionamiento, podemos ver en tiempo real el ancho que necesitamos para que la división se posicione correctamente. Esto ciertamente ahorra mucho tiempo al tener que ir entre el navegador y el editor de código y luego tener que guardar el documento y actualizarlo.
En la parte superior derecha de los 'estilos' junto al ícono de engranajes vive un ícono de marquesina. Al hacer clic en esto, podemos alternar entre los diferentes estados de un elemento. Estos diferentes estados son
Al activar uno de estos, el estado elegido permanecerá activo y podrá editar sus propiedades..
Una de mis características favoritas del inspector de estilos de herramientas de desarrollo es la capacidad de poder encontrar rápidamente el paradero en la hoja de estilo de la propiedad que está editando. Si mira a la derecha de la propiedad que está editando, verá el nombre de la hoja de estilo y el número de línea en cuanto a la ubicación. Al hacer clic en el enlace, se accede a la 'vista de fuentes'. Esto básicamente muestra su hoja de estilo en su totalidad. Desde aquí puede trabajar en él tal como lo haría en su editor de código. La única diferencia es que ves tus resultados en tiempo real.
También puede guardar su hoja de estilo deslizando el panel lateral. Si hace clic con el botón derecho en su nombre, se abre un nuevo menú contextual en el que puede elegir abrir la hoja de estilo en el navegador y guardarla. Lo mejor de esto es que al hacer clic en 'Modificaciones locales' puede ver un historial de revisión completo de todos los cambios que ha realizado. Entonces, si te has equivocado y quieres volver a algunos cambios que hiciste hace diez minutos, Chrome te respaldará..
De vuelta en la barra lateral de Elementos tenemos el panel de métricas. Con este panel puede ver y realizar cambios en los parámetros del modelo de caja del elemento actual. Esto da una representación visual de estos parámetros que incluyen:
Las herramientas para desarrolladores de Chrome se encuentran entre las herramientas más útiles para acelerar mi flujo de trabajo de diseño web HTML / CSS.
Por supuesto, hay muchos otros usos para ellos, como analizar los tiempos de carga de la página y el rendimiento de los scripts. También hay otras herramientas que realizan trabajos similares, como Firebug para Firefox. La última versión de Firefox también viene con algunas herramientas útiles que aún no se han implementado en el equivalente de Chrome, aunque es de esperar que pronto lo estén. Estos incluyen cosas como la vista '3D'. La vista 3D le permite ver una representación 3D de un sitio web que puede rotar y orientar. Esto facilita la visualización del anidamiento de su contenido. También han introducido el "modo de respuesta" que coloca el sitio web dentro de un marco que puede cambiar de tamaño para ver cómo aparecerá en diferentes tamaños de punto de interrupción..
No estoy necesariamente diciendo que las herramientas de desarrollo de Chrome sean las mejores que existen. Para mí, es el único que he usado y sé cuánto tiempo me ha ahorrado a mí y a mi flujo de trabajo. Es por eso que quería compartir con ustedes algunos de los consejos que he descubierto y espero que también le ahorren un poco de tiempo.!
Accentsconagua