9 características de las herramientas para desarrolladores de Chrome que debes conocer

Todos conocemos la popularidad del navegador Chrome. Este navegador ha hecho la vida más fácil para los desarrolladores y ser un desarrollador que utiliza su herramienta de desarrollo integrada no es nada nuevo para usted. La herramienta para desarrolladores de Chrome ha facilitado mucho la depuración. La herramienta de desarrollo incorporada le permite editar la página, depurarla y también darles acceso para trabajar en el navegador web interno y la aplicación. 

Este aumenta la productividad de los desarrolladores y también facilita el diagnóstico del sitio web. En este artículo, vamos a discutir las diferentes funciones de Chrome DevTools. Discutiremos cuál es el propósito de las diferentes pestañas y cómo funciona. 

Acceder a la herramienta para desarrolladores es muy fácil. Puede presionar Ctrl+Shift+C, o puede hacer clic con el botón derecho en Inspeccionar desde aquí. Verá muchos paneles o pestañas en devTool. Estas pestañas le brindan muchas funcionalidades. Discutamos las características de DevTools una por una.

1. Fácil acceso en escritorio o móvil

La segunda pestaña en la esquina izquierda se usa para verificar la vista de su aplicación en dispositivos móviles o de escritorio. Le permite verificar cómo se verá su aplicación en diferentes dispositivos o diferentes tamaños de pantalla. De forma predeterminada, verá el modo de escritorio para su aplicación. Se utiliza principalmente para comprobar la capacidad de respuesta de su sitio web. Encontrará diferentes opciones de resolución de pantalla para comprobar la capacidad de respuesta de su sitio web.

2. Pestaña Elemento

Esta pestaña se usa principalmente para depurar el código HTML y CSS en su sitio web. Siempre que necesite cambiar algo en el estilo de su HTML y CSS y quiera ver cómo se reflejará en su sitio web, puede hacerlo con la ayuda de esta pestaña. La pestaña Elementos le permite interactuar con el DOM, cambiarlo y verlo. 

Esta sección se divide principalmente en dos partes. El panel izquierdo muestra los elementos HTML. Cómo se incrustan los elementos en el árbol DOM. Puede modificar los cambios en su archivo CSS o HTML una vez que vea los cambios en tiempo real usando esta pestaña. Puede verificar qué etiqueta está haciendo qué en su página web y su posición en su pantalla. Esta pestaña lo ayuda a observar más de cerca la estructura DOM e identificar los elementos HTML representados en ella.

3. Consola

Esta pestaña le ayuda a depurar el código JavaScript. Puede ver el mensaje registrado y ejecutar el código JavaScript aquí. Esta pestaña lo ayuda a mostrar el error junto con el número de línea en su código fuente. Esta propiedad es realmente útil para depurar el código fuente. 

Además, puede monitorear los eventos, establecer los puntos de interrupción, diseñar la salida, contar las declaraciones o medir el tiempo de ejecución o carga. Esta herramienta se utilizará muy a menudo. 

4. Red

Esta pestaña se utiliza principalmente para detectar la solicitud de carga o descarga realizada por una página web. Puede registrar toda la actividad de la red en el registro de red. Puede abrir el panel de red y luego recargar la página web. En el registro de red, verá que los recursos se representan cronológicamente en cada fila. 

• Estado:
• Iniciador:
• Tiempo: Tiempo que tarda la solicitud. 
• Cascada: Las diferentes etapas de la solicitud se representan gráficamente. 

También tiene la opción de verificar el diseño de la página y cómo se comporta cuando algunos recursos no están cargados. 

5. Rendimiento

Como su nombre indica, esta pestaña se utiliza para optimizar la velocidad de carga de su sitio web. Puede analizar el rendimiento del tiempo de ejecución de la página web. La configuración de captura le permite capturar la configuración de las métricas de rendimiento. 

Puede encontrar la lista desplegable de limitación en la lista Red y CPU. Para la CPU, puede seleccionar la desaceleración 2X. Su Devtools acelera su CPU para que sea dos veces más lento de lo normal. Esto lo ayudará a verificar el rendimiento del sitio web en dispositivos móviles. También encontrará el botón de grabar y recargar en esta pestaña. El botón de registro comienza a perfilar los diversos eventos del sitio web durante este período. Después de hacer clic en Detener, encontrará el  

6. Rastreo de fugas de memoria

Esta pestaña muestra el uso de la memoria del perfil, la página usa con el administrador de tareas de Chrome. Puede rastrear todos los problemas que afectan el rendimiento de la página, por ejemplo, pérdidas de memoria e hinchazón. Los sitios web que consumen más memoria dan malas experiencias.

Esta pestaña proporciona perfiles principalmente de tres maneras diferentes…

• Instantánea del montón: se utiliza para tomar la instantánea del montón que muestra la distribución de la memoria entre los objetos de JavaScript y los Nodes DOM.
• Tiempo de asignación de registros: puede rastrear las fugas de memoria en un montón JS de un sitio web.
• Perfiles de asignación de registros: muestra la asignación de memoria de las funciones de JavaScript. También puede grabar el perfil con acciones.

7. Aplicación: inspeccionar recursos

Esta pestaña lo ayuda a administrar recursos como cookies, almacenamiento local, caché de aplicaciones, fuentes, hojas de estilo, imágenes, trabajadores de servicios registrados, almacenamiento de sesiones, bases de datos SQL y bases de datos indexadas. También puede realizar algunas otras tareas que se detallan a continuación… 

• La pestaña de la aplicación lo ayuda a inspeccionar y activar el manifiesto de la aplicación web con la ayuda del panel Manifiesto.
• Puede usar el panel del trabajador del servicio para realizar las tareas relacionadas con el trabajador del servicio, como cancelar el registro, detener, desconectarse, etc.
• Puede inspeccionar la memoria caché del trabajador del servicio mediante el panel Almacenamiento de caché.
• Con Borrar almacenamiento, puede inspeccionar y borrar todo el almacenamiento, las cachés y los trabajadores de servicio.
• Use el panel Marcos para organizar los recursos usando varios filtros.
• En una base de datos Web SQL, puede ejecutar varias declaraciones.

8. Seguridad

Utilizará esta pestaña para cualquier tipo de problema de seguridad. Esta pestaña se utiliza para garantizar que HTTPS se implemente correctamente en una página. También puede ver el certificado SSL emitido en la página web. La autenticidad de la página se certifica con la ayuda de esta pestaña. 

9. Auditorías o Lighthouse

Esta pestaña identifica los problemas que afectan el rendimiento de carga de la página del sitio web, la accesibilidad y la experiencia del usuario. Puede resolver estos problemas con la ayuda de esta pestaña. Lighthouse, que es una herramienta automatizada de código abierto, se utiliza para mejorar la calidad de la página web. Con esta pestaña, verifica principalmente los estándares para la aplicación web progresiva, el rendimiento y las mejores prácticas de accesibilidad. 

Conclusión

De todas las explicaciones de las pestañas anteriores, es posible que haya entendido la importancia de todas las pestañas. Estas pestañas son realmente útiles para depurar su aplicación y resolver los problemas en ella. Cada pestaña tiene su propio propósito y una vez que comience a crear su aplicación, conocerá más funciones incluidas en eso.