Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Chrome DevTools
Webdesign

3 Prácticos Novedades en Chrome DevTools

by
Length:ShortLanguages:

Spanish (Español) translation by Betty (you can also view the original English article)

Chrome DevTools constantemente están marchando hacia adelante y nos proporciona nuevas características útiles que facilitan nuestras vidas como diseñadores web. En este resumen nos va sacar tres de las más recientes adiciones. Vamos a saltar!

1. Inspeccionar y Modificar Valores de Variables CSS

Si estaban usando variables CSS en tu CSS, hasta ahora Cuándo inspeccionar su código con cromo DevTools todo sería ver en la pestaña de Estilos sería algo así como font-size: var(--fontsize), sin indicación de lo que realmente representa esa variable. Entender el código que tienes que encontrar el nombre de la variable en la: sección de tu CSS de la raíz :root, buscar el valor, recordarla, volver a la sección de código que fueron a inspeccionar y tratar de trabajar con él desde allí.

Ahora, DevTools compute variable en la ficha Estilos de CSS así que usted puede inspeccionar su línea de valores, así como ver previsualizaciones de colores. Usted también podrá realizar modificaciones en los valores de la variable de CSS. Aquí está cómo funciona todo.

Nota: Necesitarás Chrome 67 a tratar estas características. Chromium 67 no tiene todavía los incluidos.

Cómo Inspeccionar Valores Inline

En la captura de pantalla a continuación veremos un ejemplo de la nueva funcionalidad de inspección variable. En la ficha Estilos, mira las propiedades de colorfont-size resaltadas en el cuadro rojo. Frente a la variable var(--text) verás un pequeño color Plaza – esta es una vista previa del color definido por esta variable. Por debajo de ella verás el ratón sobre la var(--fontsize), que hace que su valor calculado aparece en un tooltip. Esta funcionalidad cernida se puede utilizar para inspeccionar el valor de cualquier tipo de variable CSS.

chrome inspector Inspecting Values Inline
Inspección en línea de valores

Introducción de la Paleta de Colores Variables

La sección inferior de color picker en cromo DevTools ya nos dio acceso a los diferentes tipos de paletas de color, como colores de "Material", o los colores detectados como en uso de la página actual. Cuando se utiliza el selector de color en las variables CSS una paleta adicional ahora se convierte en disponible, uno que te muestra todos los colores definición como variables en la hoja de estilos.

Para abrir el selector de color, haga clic en el pequeño cuadrado de color escuchar frente a una variable de color. Para acceder a la lista de paletas disponibles haga clic en el interruptor de palanca situado en la parte derecha de la sección de la paleta.

Esto mostrará las paletas de colores disponibles, uno por línea. Aquí verás una línea con la etiqueta "CSS Variables", y si pasa el ratón sobre los colores aquí verás información sobre herramientas que muestra las variables que representan. Seleccione la paleta de "Variables CSS" haciendo clic en esa línea.

Ahora al seleccionar un color diferente de esta paleta, se sustituirá el nombre de esa nueva variable en el código. Por ejemplo, en la imagen de abajo que el nombre de la variable --text ha sido reemplazado por --alternative-text después de hacer clic en un color distinto en la paleta.

Edición de Valores de las Variables

No sólo puede inspeccionar y modificar la variable código CSS para los estilos individuales, también puede hacerlo en el nivel raíz.

Seleccione cualquier elemento, desplácese hacia abajo hasta la parte inferior de la ficha Estilos y encontrar :root, donde se definen todas las variables. Usted puede cambiar cualquier valor de variable y los cambios se actualizarán a través de la página entera.

Para editar un valor de color, haga clic en el cuadro de previsualización de color junto a ella y utilizar el selector de color. Para modificar otros tipos de valores, tales como tamaños de fuente por ejemplo, haga doble clic en les y escriba el nuevo valor.

En el ejemplo siguiente se puede ver estamos usando el selector de color para ajustar el valor de la variable de --text controla el color del texto.

Si desea darle a esta nueva funcionalidad a ir, hemos setup esta pluma para que puedas usar DevTools para jugar con el color de fondo, tamaño color y fuente del texto de una página simple:

2. Buena Impresión / Formato Código Min

Si alguna vez has probado a depurar código sabes puede ser un proceso doloroso. Gracias al Chrome / Chromium 66  no necesita ocuparse de esa cuestión, ya que ahora tiene la capacidad de imprimir bastante / formato minified código para una mejor legibilidad.

Para utilizar esta función vaya a la ficha Fuentes, allí ir a la pestaña de Página, seleccione un archivo de la lista de archivos cargados en el panel izquierdo. Esto mostrará el contenido del archivo en la ventana del centro. En la parte inferior de esta ventana verás un par de llaves {}, y si pasa el cursor sobre ellos, verá una descripción que se lee "Pretty print".

Haz clic en este botón y tu archivo será "bonitamente impresos" y hecho mucho más agradable de depuración:

Usted puede hacer lo mismo archivos de CSS, pero en lugar de la descripción diciendo: "Pretty print" se dice "Formato".

Haga clic en el pequeño botón de {} y tu CSS será agradable y legible, así:

3. Conservar Ajustes Entre Recargas

¿Que te siempre dedicas en algunos ajustes a una página mediante DevTools, pero necesarios para actualizar la página y tuvo que perder todos los ajustes que había estado probando?

A partir de Chrome / Chromium 65 nunca tendrás ese problema otra vez, gracias a la función "Local reemplaza". Con esta función activa, cualquier ajustes que hacer via DevTools pueden guardarse automáticamente en un archivo local en tu disco duro, y cuando se actualice la página se cargará ese archivo de tal modo preservando sus ajustes.

Para encender reemplaza local ir a la pestaña de Fuentes y de allí a la ficha Sobrescrituras. Si no puede ver la ficha, expandir la selección haciendo clic en el >> botón.

La primera vez que Active local anula que un poco verás el botón etiquetado + Seleccionar carpeta para remplazar. Como su nombre indica, esto le permitirá especificar donde se deben guardar sus archivos de anulación local. Pulsa ese botón y seleccione la carpeta que desea utilizar:

Una vez que seleccione una carpeta verás una advertencia de seguridad aparece en la parte superior del navegador. Siga adelante y haga clic en Permitir para proceder:

Ahora intenta realizar un cambio en una página web utilizando DevTools, como cambiar el color del texto en un sitio por ejemplo. Actualice la página y verás que el cambio de color todavía estará presente.

Si nos remontamos en la sección Reemplaza ahora verás un archivo recién agregado. Suponiendo que el tweak que hecho fue un color de texto, será un archivo CSS. Este es el archivo que contiene sus anulaciones locales y como anulaciones locales están activos se cargará este archivo en vez del archivo del sitio verdadero. ¡Genial!

Puede deshabilitar local reemplaza en cualquier momento desmarcando la casilla Habilitar Local Reemplazar. También puede eliminar archivos individuales anulación desde la ficha Sobrescrituras, o manualmente mediante el administrador de archivos del sistema.

Terminando

Allí tenemos: tres grandes novedades de Chrome DevTools que resulta super útil! Ahora son más fáciles de trabajar con variables CSS código se puede ahora hacer legible y utilizando DevTools para ajustes a los sitios de prueba es más potente.

¡Te esperamos a ver lo que el equipo de Chrome DevTools tiene nos depara a continuación!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.