Saltar al contenido

9 funciones de las herramientas para desarrolladores de Chrome que debes conocer

9 funciones de las herramientas para desarrolladores de Chrome que debes conocer

Todos conocemos la popularidad del navegador Chrome. Este navegador hizo la vida más fácil para los desarrolladores y ser un desarrollador que utiliza la herramienta de desarrollo incorporada no es nada nuevo para usted. La herramienta para desarrolladores de Chrome facilitó mucho la depuración. La herramienta de desarrollador incorporada le permite editar y depurar la página y darles acceso para trabajar en la aplicación y el navegador web internos.

9-características-de-las-herramientas-para-desarrolladores-de-Chrome-que-necesita-saber

Esto aumenta la productividad de los desarrolladores y facilita el diagnóstico del sitio web. En este artículo, analizaremos las diversas funciones de Chrome DevTools. Discutiremos cuál es el propósito de las distintas pestañas y cómo funcionan.

El acceso a la herramienta de desarrollo es muy sencillo. Puedes presionar Ctrl + Mayús + C, o puede hacer clic derecho en un elemento del sitio y seleccione Cheque de aquí. Verá muchos paneles o pestañas en devTool. Estas pestañas le ofrecen muchas funciones. Analicemos las características de DevTools una por una.

1. Fácil acceso al escritorio o al teléfono 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 computadoras de escritorio. Esto le permite verificar cómo se verá su aplicación en diferentes dispositivos o 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. Puede encontrar varias opciones de resolución de pantalla para verificar la capacidad de respuesta de su sitio web.

2. Pestaña Elemento

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

Esta sección se divide principalmente en dos partes. Los elementos HTML se muestran en el área de la izquierda. Cómo se incrustan los elementos en el árbol DOM. Puede cambiar los cambios en su archivo CSS o HTML tan pronto como vea los cambios en esta pestaña en tiempo real. Puede comprobar qué etiqueta está haciendo qué en su sitio web y dónde está en su pantalla. Esta pestaña le 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 le ayudará a ver el error junto con el número de línea en su código fuente. Esta propiedad es muy útil al depurar el código fuente.

También puede monitorear eventos, establecer puntos de interrupción, formatear la salida, contar declaraciones o medir la ejecución o los tiempos de carga. Esta herramienta se utiliza con mucha frecuencia.

4. Red

Esta pestaña se utiliza principalmente para identificar la solicitud de carga o descarga de un sitio web. Puede registrar todas las actividades de la red en el registro de la red. Puede abrir el panel de red y luego volver a cargar el sitio web. En el registro de la red puede ver que los recursos se muestran cronológicamente en cada línea.

  • Estado: Código de respuesta HTTP.
  • Escribe: El tipo de recurso.
  • Iniciador: Qué provocó la solicitud de un recurso.
  • Tiempo: Tiempo requerido por la solicitud.
  • Cascada: Los diferentes niveles de la solicitud se muestran gráficamente.

También tienes la opción de comprobar el diseño de la página y su comportamiento cuando algunos recursos no están cargados.

5. Desempeño

Como sugiere el nombre, esta pestaña se utiliza para optimizar la velocidad de carga de su sitio web. Puede analizar el rendimiento en tiempo de ejecución del sitio web. La configuración de grabación 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 elegir una ralentización 2X. Tus devtools están estrangulando tu CPU para hacerlo dos veces más lento de lo normal. Esto le ayudará a comprobar el rendimiento del sitio web en dispositivos móviles. En esta pestaña también encontrarás el botón para grabar y recargar. El botón de grabación comenzará a perfilar los diversos eventos en el sitio web durante este período. Después de hacer clic en Detener, encontrará el Resultados y tiempos de los eventos individuales.

6. Memory Detect memory fugas

Esta pestaña muestra el uso de la memoria del perfil que está usando la página del Administrador de tareas de Chrome. Puede rastrear cualquier problema que esté afectando el rendimiento de la página, como: B. Pérdida de memoria e hinchazón. Los sitios web que consumen más memoria dan malas experiencias.

Esta pestaña ofrece principalmente tres formas diferentes de crear un perfil …

  • Instantánea del montón: Esto se usa para tomar la instantánea del montón, que muestra la asignación de memoria entre los objetos JavaScript y los nodos DOM.
  • Registro de tiempo de asignación: Puede rastrear las fugas de memoria en el montón JS de un sitio web.
  • Perfiles de asignación para registros de datos: Muestra la asignación de memoria de las funciones de JavaScript. También puede grabar el perfil con acciones.

7. Aplicación: consultar recursos

Esta pestaña le ayuda a administrar los recursos como cookies, almacenamiento local, caché de aplicaciones, fuentes, hojas de estilo, imágenes, agentes de servicio registrados, recipiente, bases de datos SQL y bases de datos indexadas. También puede realizar algunas otras tareas que se enumeran a continuación …

  • La pestaña Aplicación lo ayuda a verificar y activar el manifiesto de la aplicación web utilizando el área de manifiesto.
  • Puede utilizar el área del agente de servicio para realizar las tareas relacionadas con el agente de servicio, como desconectarse, salir, desconectarse, etc.
  • Puede verificar la caché del trabajador del servicio en el área Almacenamiento de caché.
  • Con Clear Storage puede verificar y borrar todo el almacenamiento, las cachés y el personal de servicio.
  • Utilice el panel Marcos para organizar los recursos mediante varios filtros.
  • Puede ejecutar varias declaraciones en una base de datos Web SQL.

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 el sitio web. Con la ayuda de esta pestaña, se certifica la autenticidad de la página.

9. Auditorías o faro

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

graduación

De todas las explicaciones de las pestañas anteriores, es posible que haya entendido el significado de todas las pestañas. Estas pestañas son muy útiles para depurar su aplicación y solucionar los problemas que contiene. Cada pestaña tiene su propio propósito, y una vez que comience a crear su aplicación, aprenderá más sobre las funciones que contiene.

Vaya a Premium (una experiencia sin publicidad con muchas más funciones)

Source link