Es bueno tener: extensiones de Chrome para desarrolladores web

Los navegadores han ido evolucionando en los últimos años y, a estas alturas, existen muchas herramientas para desarrolladores que le permiten probar sus proyectos web en profundidad, sobre todo en lo que respecta a HTML, CSS y JavaScript. De esta manera, se reconocen tanto los errores de JavaScript como las etiquetas CSS incorrectas. Sin embargo, las herramientas de desarrollo no pueden hacerlo todo (todavía). Por lo tanto, hay algunas valiosas extensiones de Chrome para facilitarle el trabajo.

Reconoce fuentes con «WhatFont».

Como diseñador y desarrollador web, visita otros sitios web de vez en cuando para inspirarse. Si, por ejemplo, encuentra una fuente en un sitio web que le gustaría usar usted mismo, la extensión «WhatFont» puedo ayudarte.

En lugar de buscar el nombre de la fuente en las hojas de estilo, puede pasar el mouse sobre el texto respectivo cuando usa «WhatFont». Una pequeña información sobre herramientas le indica el nombre de la fuente utilizada. Al hacer clic en el texto, se proporciona información adicional, como el tamaño y el color de la fuente.

Recogiendo colores usando «Eye Dropper».

Los colores se pueden reconocer de forma similar a las fuentes. Para obtener el color exacto de un sitio web, debe copiarlo de la hoja de estilo. Si desea tomar un color de una imagen, todo lo que puede hacer es tomar una captura de pantalla para copiarla en su editor de imágenes.

«Cuentagotas» hace que todo eso sea redundante. La extensión proporciona una pipeta que le permite elegir un color de un sitio web. Mientras hace eso, «Eye Dropper» no se restringe a los elementos a los que se les ha asignado un color a través de CSS. También puede obtener un valor de color de una imagen. El color se da como valor hexadecimal, RGB y HSL, incluido el etiquetado CSS adecuado.

Desactivación de cookies con «Desactivar cookies».

Desactivar JavaScript o apagar el caché de un sitio web: todo esto es sencillo gracias a las herramientas para desarrolladores de Chrome. Solo la rápida activación y desactivación de cookies no es posible en Chrome directamente. Para eso, generalmente necesita sumergirse en la configuración. El desvío es bastante complicado solo para probar cómo reacciona un sitio web a las cookies desactivadas. La extensión «Deshabilitar cookies» ahora le permite habilitar y deshabilitar fácilmente las cookies para un sitio web a través de un botón en la barra de herramientas.

Medición de distancias y tamaños usando «Regla de página» y «Dimensiones».

¿Todos los elementos de su sitio web están colocados correctamente? ¿Todas las distancias y tamaños son correctos? Las siguientes extensiones lo ayudan a medir su sitio.

Él «Regla de página» se puede usar para colocar un rectángulo en un sitio web, ya sea manualmente o ingresando valores numéricos. Aquí, se muestran las distancias a los cuatro bordes de la página, así como el ancho y la altura del rectángulo.

Una alternativa es la extensión «Dimensiones«. Este mide las distancias entre dos elementos adyacentes por sí solo. Para que lo haga, simplemente coloque el puntero del mouse entre los elementos respectivos. Dos líneas le muestran qué distancia se mide. Siempre mide la distancia vertical y horizontal a los elementos adyacentes elementos.

Actualizar automáticamente una página después de los cambios con «LivePage».

Actualizar un sitio web es probablemente una de las acciones más comunes. Se realizan cambios en los archivos HTML, CSS y JavaScript, y luego deben probarse en el navegador. La extensión «LivePage» elimina la tarea de la actualización manual frecuente de usted. Cada vez que se cambia un recurso, como un archivo CSS, en el servidor, la extensión actualiza automáticamente la página.

Creación de capturas de pantalla usando «Captura de pantalla increíble».

Ya sea para la presentación en su cartera o para un cliente: las capturas de pantalla del sitio web siempre son necesarias. «Impresionante captura de pantalla» le permite tomar capturas de pantalla con un solo clic. Aquí, solo se incluye el contenido de la pestaña actual. Además, también puede decidir si desea una captura de pantalla del área visible en el navegador o de todo el sitio web. También es Es posible tomar una captura de pantalla completa de páginas largas y desplazables.

(dpe)