Recientemente, muchos amigos han dicho que no saben cómo utilizar las herramientas de desarrollo del navegador, hoy veremos más de cerca las herramientas de desarrollo.
Tome Google Chrome como ejemplo
La red en las herramientas para desarrolladores de Google Chrome es lo que solemos utilizar en el aprendizaje, entonces, ¿sabes el significado de cada una de sus funciones?
Dado que a menudo tengo 360 Speed Browser y Google Kernel, este artículo toma como ejemplo la herramienta de desarrollo Network of 360 Speed Browser, que es básicamente la misma que la red de Google.
La red de Google puede ayudarnos aproximadamente a lograr las siguientes funciones
Mira el valor de retorno de la interfaz.
Mire los encabezados de solicitud y los encabezados de respuesta de la interfaz.
Comprueba la velocidad de carga de los recursos.
Verifique el tamaño del recurso, el estado de la caché, el estado de la respuesta (cdn, tiempo de espera, etc.)
El panel de control de Google NETWORK se divide principalmente en 7 grandes secciones.
1. Área funcional
2. Área de filtrado (el embudo en el área funcional debe estar activado)
3. Área de instantáneas (la captura de pantalla debe estar activada en el área funcional)
4. Área de línea de tiempo (la descripción general debe estar activada en el área funcional)
5. Área de visualización principal
6. Área de resumen de información
7, consola
como muestra la imagen
1. Área funcional
1. El punto rojo representa si la función de registro de red está activada. Si es gris, significa que no está activada. El punto rojo significa que está activada. 2.
2. Borrar registros de red
3. La cámara captura la pantalla. Está apagada de forma predeterminada. Después de hacer clic, el icono se vuelve azul y se grabarán instantáneas de la página en diferentes momentos. Solo cuando este botón esté activado se mostrarán las 3 áreas de instantáneas.
4. El embudo representa si la opción de filtrado está activada. Solo cuando este botón esté activado se mostrarán las 2 áreas de filtrado.
5. La lupa representa el botón de búsqueda rápida, que puede encontrar rápidamente qué contiene la página actual.
6. Indica si se debe utilizar un área más grande para mostrar los registros de solicitudes. Me gustan las pantallas más grandes y generalmente se pueden encender.
7. Indica si se debe mostrar el resumen general. Solo cuando este botón esté activado se mostrarán las 5 líneas de tiempo.
8. Agrupar por cuadro, después de marcar esta opción, las solicitudes de red se agruparán por nombre de formulario, como se muestra en la siguiente figura
9. Importante: conservar el registro, si se debe conservar el registro. Si está marcado, el registro no desaparecerá después de que se actualice la página (esta función es muy útil, por ejemplo, después de que la página salta, desea ver qué solicitudes se realizaron antes el salto de página, como verificar las solicitudes de inicio de sesión del sitio web de otras personas, qué se devuelve después de un inicio de sesión exitoso, qué solicitudes se inician después de un inicio de sesión exitoso y a qué dirección se redirige) Función:
(1) Podemos ver algunos saltos a páginas intermedias, lo que nos ahorra la molestia de capturar paquetes.
(2) Se puede comparar con los datos de la página anterior.
10. Deshabilite el caché, cambie el caché, active esta función, el caché del navegador de js, css, imágenes, etc. en el sitio web actual no será válido y todas las solicitudes se reenviarán al servidor. Ctrl+F5 también puede lograr el mismo efecto. Después de activar la desactivación del caché, no necesitamos desactivarlo, se cargará sin caché cada vez.
Efecto de agrupación después de marcar Agrupar por cuadro
11. Fuera de línea es el conmutador de conexión de red, por ejemplo, al probar PWA. O una configuración rápida en el caso de una red débil.
12. La lista desplegable En línea es el umbral de velocidad de la red, que puede establecer la velocidad máxima de la red para carga y descarga, etc. Generalmente, puede mostrar el efecto de visualización de páginas web en diferentes condiciones de red.
2. Área de detección
1. Función: para páginas con más solicitudes, es posible que necesitemos filtrarlas.
2. Función: la barra de herramientas proporciona filtrado de ruta (admite expresiones regulares) y filtrado de tipo (Todos, XHR, js, imágenes, etc.) para una visualización rápida. Mantenga presionada la tecla CTRL para seleccionar varios elementos.
3. La función de Ocultar URL de datos: los desarrolladores de sitios web a menudo incorporan algunas imágenes pequeñas o scripts CSS en HTML en formato BASE64 para reducir la cantidad de solicitudes HTTP. Cuando la opción Ocultar URL de datos está marcada, puede ocultar solicitudes como datos: o blob: en la lista de solicitudes.
4.cuadro de búsqueda de filtro
Además de los filtros anteriores proporcionados por Chrome, también puede usar atributos de filtro en el cuadro de filtro para filtrar los registros de solicitudes de manera muy flexible.
Puedes realizar una búsqueda difusa (solo busca la dirección URL). Si agregas / al principio y al final, significa usar coincidencias regulares (buscar la dirección URL y el contenido devuelto al mismo tiempo). Las versiones anteriores de Chrome pueden tener una opción regexp en el lado derecho del cuadro de entrada del filtro y verifique el patrón regular.
Los atributos de filtro comunes se pueden encontrar en la siguiente tabla.
Versión de texto:
dominio: filtra las solicitudes para el nombre de dominio especificado. No solo admite la finalización automática, sino que también admite la coincidencia *.
has-response-header: filtra las solicitudes que contienen el encabezado de respuesta especificado.
es: Descubra la solicitud de WebSocket a través de is:running.
mayor que: filtra las solicitudes que son mayores que el tamaño de bytes especificado, donde 1000 significa 1k.
método: filtra solicitudes con métodos HTTP específicos, como solicitudes GET, solicitudes POST, etc.
tipo mime: filtra solicitudes de tipos de archivos específicos.
contenido mixto: filtra solicitudes con contenido mixto (no sé lo que significa).
esquema: filtra solicitudes de protocolos específicos, como esquema: http, esquema: https.
set-cookie-domain: filtra las solicitudes que contienen Set-Cookie que especifican atributos de nombre de dominio de cookies.
set-cookie-name: filtra las solicitudes que contienen Set-Cookie que especifican el atributo de nombre de cookie.
set-cookie-value: filtra las solicitudes que contienen Set-Cookie que especifican atributos de valor de cookie.
código de estado: filtra las solicitudes con el código de estado HTTP especificado.
(1) Cómo usar el filtro 1: si queremos filtrar los recursos solicitados de diferentes nombres de dominio en la página web, podemos ingresar [dominio:] en el cuadro de filtro y Chrome completará automáticamente la información relevante del nombre de dominio por nosotros. .
(2) En la página web abierta, ¿cómo comprobar qué solicitudes utilizan caché? Utilice el comando [is:from-cache], correspondiente a [is:running]
3. Área de instantáneas y 4. Área de línea de tiempo
Estas dos áreas proporcionan principalmente una visualización descompuesta del estado de carga de la organización de la página web.
El área de instantáneas le permite ver de manera más intuitiva el proceso de apertura de la página web por parte del navegador y el tiempo que lleva abrir la página web completa.
En el área de la línea de tiempo, puede deslizar la rueda del mouse para ver si el tiempo de carga del archivo no está claro, lo cual es muy útil para encontrar archivos que se cargan lentamente en la página web.
5. Área de visualización principal
1. El área de visualización principal incluye nombre, estado, tipo, iniciador, tamaño, hora, cascada (análisis en cascada)
Nombre: El nombre del recurso solicitado.
Estado HTTP: código de estado
Tipo: tipo MIME de recurso solicitado
Iniciador: el objeto o proceso que inicia la solicitud.
Tamaño: el tamaño de la respuesta devuelto por el servidor (incluido el encabezado y el cuerpo del paquete), que puede mostrar el tamaño descomprimido.
Tiempo: Duración total, desde el inicio de la solicitud hasta recibir el último byte de la respuesta.
Cascada: gráfico de análisis intuitivo de actividades relacionadas con cada solicitud
2. De forma predeterminada, la lista de solicitudes está organizada en orden ascendente según el momento en que se inicia la solicitud de recursos. También podemos optar por ordenar por la columna especificada y hacer clic en el encabezado de la lista correspondiente.
3. Al hacer clic en el Nombre de un recurso, puede ver la información detallada del recurso. La información mostrada depende del tipo de recurso seleccionado. Puede incluir la siguiente información de la pestaña:
Encabezados La información del encabezado HTTP de este recurso.
Vista previa muestra la vista previa correspondiente según el tipo de recurso que seleccionó (JSON, imagen, texto).
La respuesta muestra información de la respuesta HTTP.
Cookies Muestra la información de las cookies en el proceso de Solicitud y Respuesta del recurso HTTP.
El tiempo muestra cuánto tiempo pasa un recurso en cada parte de todo su ciclo de vida de solicitud.
Expliquemos cada función en detalle para las cuatro pestañas anteriores:
① Ver información del encabezado HTTP del recurso
En la pestaña Encabezados, puede ver información básica como URL de solicitud HTTP, método HTTP, código de estado y dirección remota, así como información detallada como encabezados de respuesta, encabezados de solicitud y parámetros de cadena de consulta o datos de formulario.
② Ver información de vista previa de recursos
En la etiqueta Vista previa, se puede mostrar la información de vista previa correspondiente según el tipo de recurso seleccionado (JSON, imagen, texto, JS, CSS). La siguiente figura muestra la información de vista previa cuando el recurso seleccionado está en formato JSON.
③ Ver la información de respuesta del recurso HTTP
En la etiqueta Respuesta, el contenido de la Respuesta (cadena pura) del recurso correspondiente se puede mostrar según el tipo de recurso seleccionado (JSON, imagen, texto, JS, CSS). La siguiente imagen muestra el contenido de la respuesta cuando el recurso seleccionado está en formato CSS.
④ Ver información de cookies de recursos
Si el recurso seleccionado tiene información de Cookies durante los procesos de Solicitud y Respuesta, automáticamente se mostrará la etiqueta de Cookies, donde podrá ver toda la información de Cookies.
Nombre: El nombre de la cookie.
Valor: el valor de la cookie.
Dominio: El nombre de dominio al que pertenece la cookie.
Ruta: URL a la que pertenece la cookie.
Expire/Max-Age: tiempo de supervivencia de las cookies.
Tamaño: el tamaño en bytes de la cookie.
HTTP: indica que las cookies solo pueden ser configuradas por el navegador y no pueden ser modificadas por JS.
Segura: Indica que las cookies sólo pueden transmitirse a través de conexiones seguras.
⑤ Analizar la información del consumo de tiempo de cada parte del recurso en el ciclo de vida de la solicitud.
La etiqueta de sincronización puede mostrar la información del tiempo invertido de cada parte del recurso durante todo el ciclo de vida de la solicitud, lo que puede implicar el tiempo invertido en los siguientes procesos:
Cola El tiempo dedicado a hacer cola. Puede deberse a que el motor de renderizado considera que la solicitud es un recurso (imagen) de prioridad relativamente baja, el servidor no está disponible o se excede el número máximo de solicitudes simultáneas del navegador (el número máximo de conexiones simultáneas de Chrome es 6).
Detenido El tiempo que transcurre desde que se establece la conexión HTTP hasta que se puede enviar la solicitud (en realidad, transmitir datos). Incluyendo el tiempo dedicado a procesar el proxy, si hay una conexión establecida, este tiempo también incluye el tiempo de espera para que se reutilice la conexión establecida.
Negociación de proxy El tiempo dedicado a conectarse al servidor proxy.
Búsqueda de DNS La hora en que se realizó la búsqueda de DNS. Cada nuevo nombre de dominio en la página web pasa por una consulta DNS. Si el navegador tiene caché en la segunda visita, este tiempo será 0.
Conexión inicial/Conexión El tiempo que lleva establecer una conexión, incluido el protocolo de enlace TCP y el tiempo de reintento.
SSL Tiempo necesario para completar el protocolo de enlace SSL.
Solicitud enviada La hora en que se inició la solicitud.
La espera (tiempo hasta el primer byte (TTFB)) es el tiempo entre que se inicia la solicitud de red inicial y se recibe el primer byte del servidor. Incluye el tiempo de conexión TCP, el tiempo para enviar la solicitud HTTP y el tiempo para obtener la primera palabra del mensaje de respuesta: tiempo de festival.
Descarga de contenido El tiempo que lleva obtener los datos de respuesta.
Si el tiempo dedicado a esta parte de TTFB supera los 200 ms, debería considerar optimizar el rendimiento de la red. Puede consultar el plan de optimización del rendimiento de la red y los documentos de referencia relacionados que se encuentran en el interior.
Cómo ver el originador (fuente de la solicitud) y las dependencias de un recurso (mantenga presionada la tecla Mayús)
Al mantener presionada la tecla Mayús y mover el cursor sobre el nombre del recurso, puede ver qué objeto o proceso inició el recurso (fuente de la solicitud) y qué recursos se activaron durante la solicitud del recurso (recursos dependientes).
El primer recurso marcado en verde encima del recurso es el iniciador (fuente de solicitud) del recurso. Puede haber un segundo recurso marcado en verde que sea el iniciador del recurso, y así sucesivamente.
Los recursos marcados en rojo debajo de este recurso son los recursos dependientes de este recurso.
6. Área de resumen de información
Información como [Número de solicitudes], [Cantidad de transferencia de datos], [Información del tiempo de carga] y otra información se muestran en el área de resumen de información.
El evento DOMContentLoaded se activa después de que el DOM de la página está completamente cargado y analizado, y no espera a que se carguen CSS, imágenes y subtramas. El evento DOMContentLoaded está marcado con una línea vertical azul en la descripción general y la hora exacta se muestra en texto azul en el resumen.
El evento de carga se activa después de que todos los DOM, CSS, JS y las imágenes de la página estén completamente cargados. El evento de carga también se marcará con una línea vertical roja en la tabla de descripción general y solicitudes, y la hora exacta también se mostrará en texto rojo en el resumen.
Combinado con los pasos de carga del documento DOM, el tiempo de activación del evento DOMContentLoaded/evento de carga es el siguiente:
Analizar la estructura HTML.
Cargue scripts externos y archivos de hojas de estilo.
Analizar y ejecutar código de script. // Algunos scripts bloquearán la carga de la página
Se construye el árbol DOM. //evento DOMContentLoaded
Cargue archivos externos como imágenes.
La página está cargada. //cargar evento
7. Área de control de la consola
Esta área era originalmente una columna separada en F12, pero debido a que está estrechamente relacionada con la red, se combinó en una. Haré una sección separada para presentarla más adelante.
En el proceso de aprendizaje de Python, muchos amigos no pueden continuar aprendiendo porque no tienen buenos materiales de aprendizaje o encuentran problemas que no se pueden resolver a tiempo, por lo que el editor ha preparado herramientas de software relevantes y tutoriales básicos de Python para todos., varias prácticas de Python Los códigos fuente de los casos, cientos de libros electrónicos de Python y hojas de ruta de aprendizaje de Python están empaquetados y disponibles de forma gratuita.
Simplemente escanee el código QR en la tarjeta de presentación al final del artículo y podrá hacer cualquier pregunta de estudio.
Bien, ese es el final del intercambio de hoy, nos vemos la próxima vez ~