Una guía para las herramientas web de Google

Feb 2, 2026

Cómo

[dieciséis]

Página 1 de 5:

Ver y cambiar HTML, CSS & AMP; Js

Ver y cambiar HTML, CSS & AMP; Js
Usando el depurador
Trabajando con el modo de dispositivo
Comienza con el diseño del material.
Llegar a los agarres con aplicaciones web progresivas.

Big G, aka Google, proporciona a los desarrolladores una gran cantidad de herramientas destinadas a facilitar el diseño web. En este artículo, pasamos por algunas de las mejores herramientas de Google, y le muestran cómo usarlas en su diseño web y flujo de trabajo de desarrollo.

Estamos cubriendo un rango de diferentes Herramientas de diseño web Aquí, así que hemos dividido el contenido en páginas para que sea más fácil navegar. Use el menú desplegable de arriba para saltar a la sección que le interesa. ¿Quiere diseñar un sitio con un proveedor diferente? Nuestros guías para Alojamiento web y la parte superior Creador de sitios web has cubierto

[sesenta y cinco]

Mientras los sitios web no sean controlados, su contenido puede ser visto por cualquier persona. Los devtools de Chrome hacen esto simple: en esta página, le mostramos cómo ver y cambiar HTML, CSS y Javascript. En página 2 , Miramos más de cerca a cómo usar el depurador de Google para solucionar errores de codificación de forma rápida y sencilla. Página 3 Pone el foco en el modo de dispositivo de Google, que puede usar para probar las versiones móviles de sus páginas a través de su máquina de escritorio. En página 4 Presentamos los conceptos básicos que debe conocer para comenzar a implementar los principios de diseño de materiales en sus diseños. Finalmente, Página 5 Mira las aplicaciones web progresivas, la última gran cosa en la industria del diseño web.

Ver y cambiar HTML, CSS & AMP; Js

Siempre que el código de un sitio web no haya sido minificado, puede ser visto por cualquier persona que utilice las herramientas de desarrollador de Chrome. En primer lugar, verifique la versión de Chrome: los siguientes pasos funcionan en la versión 70.0.3538.67 que se ejecuta en una estación de trabajo Ubuntu de 64 bits. A continuación, abra el menú de hamburguesa y haga clic en Más Herramientas y GT; Herramientas de desarrollo.

El navegador responde abriendo un panel en el lado izquierdo de su pantalla. Debe ser redimensionado en el primer paso: de forma predeterminada, el navegador no asigna suficientes propiedades de pantalla. Cuando se hace, la pantalla se ve similar a la que se muestra en la imagen de arriba.

De forma predeterminada, las herramientas de desarrollador se inician con la pestaña de consola cargadas. Contiene la salida emitida por invocaciones de la función de registro de consola. Los errores de representación también se muestran allí, si encuentra líneas rojas, algo está en el markup o el código de su página. Un clic en la pequeña 'URL' en el lado derecho lo lleva a la línea, lo que hizo que aparece el mensaje.

Inspeccionar el marcado

Si su interés se centra en el marcado, use la pestaña Elementos que se muestran en la figura. Muestra el marcado que el navegador actualmente hace. Puede expandirlo y compacto de manera similar a una vista de árbol: ocultar elementos innecesarios para evitar la sobrecarga sensorial.

los razón de ser de la pestaña es la pantalla de la estructura CSS. Los widgets 'Collect' CSS de varias fuentes, que se muestran cuidadosamente y junto a las demás. En el caso del ejemplo que se muestra en la figura, vemos que los estilos se proporcionaron desde la etiqueta 'DIV' y de la marca 'principal' de la página.

Chrome te permite editar la mayoría de los atributos sobre la marcha. Haga doble clic en cualquiera de los textos negros para transformar la etiqueta en un editor, luego ingrese el valor recién deseado y presione la tecla de retorno. El renderizador recoge estos cambios y los aplica a la DOM sobre la marcha. Esto es especialmente útil cuando se trata de optimizar los problemas de colocación o colocación; Tener que volver a cargar una página a la vista previa, los cambios se vuelven aburridos.

Finalmente, eche un vistazo al cuadro de texto en la parte superior del panel. Le permite filtrar los elementos de marcado que se muestran: por ejemplo, ingrese 'MDC' para limitar la vista a todos los estilos heredados de la biblioteca de diseño de material utilizada más adelante en este artículo. Cuando un filtro está activo, se muestra un fondo amarillo de manera similar a la que se muestra arriba.

Realizar un análisis detallado

En los navegadores web modernos, el DOM no se limita a problemas de presentación 'estáticos'. También gobierna el flujo de eventos y la colocación. Cambie a la pestaña calculada para revelar una lista de propiedades 'dimensionales'. Esto es increíblemente útil al organizar widgets en la pantalla de manera exacta.

Mudarse a la pestaña de los oyentes de eventos proporciona una descripción general de los flujos de eventos. Utilice esta función para eliminar rápidamente problemas relacionados con la interacción del usuario: si un evento no se desencadena, comience por revisar las conexiones del controlador de eventos.

Finalmente, la ventana Propiedades le permite echar un vistazo a los atributos almacenados dentro de los nodos individuales DOM. Si alguna vez ha pasado mucho tiempo cazando el código DOM-Manipulando, el valor es claro.

Página siguiente: Cómo usar el depurador de Google

Página actual: Ver y cambiar HTML, CSS & AMP; Js

Siguiente página Usando el depurador

Una guía para las herramientas web de Google

Ver y cambiar HTML, CSS & AMP; Js

Inspeccionar el marcado

Realizar un análisis detallado

Cómo - Artículos más populares

Cómo Photoshop en el iPhone (sí, es una cosa)

Use Adobe XD para crear micro interacciones

8 Tutoriales de diseño gráfico increíbles

Cómo dibujar Asuka de Neon Genesis Evangelion

Crea retratos ilustrados de fotos

Cómo hacer deliciosas texturas con lápices

Cómo construir mundos para el cine

Cómo obtener más de GIFS

Categorías