¿Qué son Chrome Devtools?
¿Qué son Chrome Devtools?
Crome devitools es un conjunto de herramientas diseñadas para ayudarlo en desarrollo frontal. Puede mejorar su sitio web abordando errores de estilo y evaluando los cambios en tiempo real. Aprenda cómo utilizar Chrome DevTools para usar esta herramienta como un sandbox para experimentar con los estilos y el código del sitio web. No está obligado a hacer más configuración porque Chrome DevTools está integrado dentro de su navegador web. Estas herramientas de desarrollador son muy recomendables ya que lo ayudan a editar el estilo de su sitio web, completar las operaciones relacionadas con el DOM, la depuración de JavaScript y mejorar la velocidad del sitio web.
Ahora, comprendamos algunas cosas antes de avanzar hacia el uso de Chrome Devtools:
- Ejecutar los navegadores web Javascript, CCS, y Html, Estos son los tres idiomas que Chrome Devtools tiene la intención de usar.
- Cualquiera puede manipular el código del sitio web usando Chrome DevTools. Las modificaciones aplicadas solo se verán en su navegador y desaparecerán a medida que pronto actualice esa página web. Estos devdools le ayudan a determinar qué cambios se requieren. Deberá acceder al código de back-end para que esos cambios sean permanentes.
Por qué deberías usar Chrome Devtools
Al permitir a los usuarios editar sitios web directamente en el navegador web, Google Chrome Devtools ahorra su tiempo y no podemos negar este hecho. Para justificar la declaración, consulte la lista a continuación de los aspectos de Chrome Devtools que pueden ayudarlo a mejorar su desarrollo web:
- Eficiencia: Chrome DevTools está integrado en su navegador web, proporcionándole la instalación para editar sitios web o contenido sin cambiar las pestañas.
- Paneles: Usando Chrome DevTools, puede jugar con varios elementos de página y extraer la información, pero tenga en cuenta que cualquier modificación que haga se perderá si cierre su pestaña sin almacenarlos.
- Mejoramiento: También puede ejecutar auditorías a través de las cuales puede obtener un informe relacionado con el rendimiento. En el navegador web, obtendrá sugerencias para mejorar la velocidad de carga del sitio.
- Depurar JavaScript: El usuario puede identificar los errores deteniendo su código de sitio web en ejecución y identificando el instante exacto cuando el script no se ejecuta correctamente.
Cómo abrir Chrome Devtools
Se puede acceder a las herramientas para desarrolladores de Chrome utilizando accesos directos de teclado:
- Prensa "Ctrl+Shift+J"Para abrir Chrome Devtools en Windows, Chromebook, y Linux.
- Para Mac OS, golpea el "CMD+Shift+J" o "CMD+Shif+C" atajo.
Usando el menú de Chrome:
Explorar "Más herramientas">"Herramientas de desarrollo"En el menú Chrome. Te llevará a la ventana Chrome Devtools:
La ventana Herramientas de desarrollador tiene tres pestañas en la parte superior, más otros seis que puede ver haciendo clic en el signo >> junto a ellas:
Estos son los nombres de la pestaña que se muestran en nuestro panel: elementos, consola, fuentes, red, rendimiento, memoria, aplicación, seguridad, faro, editor de cookies y AdBlock:
Pestaña Elementos en Chrome Devtools
El panel Chrome DevTools se abre con el "Elementos"Pestaña Por defecto. Muestra el CSS HTML y en línea utilizado para desarrollar la página web que está viendo:
Pestaña de consola en Chrome Devtools
La pestaña de la consola maneja JavaScript. Proporciona detalles relacionados con los elementos presentes en una página web. Puede utilizar la consola para escribir código JavaScript para la interacción de la página web y enviar mensajes a usted mismo. Estos mensajes aparecerán en la ventana de la consola cuando el JavaScript se ejecutará:
Pestaña Fuentes en Chrome Devtools
La pestaña de fuentes muestra y le permite inspeccionar todos los archivos que se utilizan para crear el sitio web:
Pestaña de red en Chrome Devtools
La pestaña de red muestra todas las cargas para la URL actual que está viendo. Obtiene información detallada sobre los objetos de carga, incluida la duración de la búsqueda DNS, la conexión inicial, SSL, etc. Consulte la imagen dividida a continuación para saber sobre los atributos de objetos cargados:
Pestaña Aplicación en Chrome Devtools
La pestaña de la aplicación muestra el contenido del almacenamiento de su navegador, incluidas bases de datos en el navegador como almacenamiento local, SQL web, etc. También le permite tener un control de grano fino sobre sus cookies:
Pestaña de seguridad en Chrome Devtools
La pestaña de seguridad proporciona información de seguridad básica, como el estado TLS de un sitio web y su certificado HTTPS:
Tab de faro en Chrome Devtools
Lighthouse ayuda al usuario de Chrome DevTools a generar informes sobre la estructura y la funcionalidad del sitio web, lo que ayuda a los desarrolladores a mejorar el rendimiento:
Cómo usar Chrome DevTools para inspeccionar etiquetas de página
Las etiquetas H1 y H2 son algunas de las partes más significativas del SEO en la página. Una vez que descubra las páginas con una imagen no optimizada como H2 o páginas con cuatro etiquetas H2, comprenderá la complejidad de este asunto.
Puede usar el Chrome DevTools para inspeccionar las etiquetas de la página. Para hacerlo, presione "CTRL-F" o "CMD+F"Para buscar en la pestaña Elementos y escribir"H2"Para ver las etiquetas de su página:
Cómo usar Chrome DevTools para editar CSS
Chrome Devtools le permite editar el CSS de una página directamente en su navegador. Puede experimentar con fuentes, esquemas de color y todo lo demás definido por CSS:
También puede nuevos estilos a las páginas web usando DevTools:
Conclusión
Crome devitools es un conjunto de herramientas de desarrollador completo que viene preinstalado con el navegador Chrome. Estas herramientas permiten a los usuarios cambiar las páginas web, identificar problemas y crear mejores sitios web en tiempo real. Puede beneficiarse de Chrome DevTools incluso si no es un desarrollador web. Este artículo discutió Chrome DevTools, sus pestañas y cómo usar estos DevTools en su navegador web. Ahora, siéntete libre de explorar Chrome Devtools.