Tabla de contenido
Depuración de nodos DOM (adición, eliminación y modificación)
Simule pseudoestados de elementos para facilitar la depuración
VS Code y devtoolDepuración
Página: directorio de recursos
Scripts de contenido: complementos
Vue herramientas de desarrollo
Componentes (accesorios, datos, calculados, ruta)
Línea de tiempo (graba el tiempo de activación del evento (Ratón\teclado))
Rutas (ver rutas para todas las páginas)
https://developer.chrome.com/docs/devtools
Elementos
Depuración de nodos DOM (adición, eliminación y modificación)
Subtree modifications: cuando se elimina o agrega un nodo secundarioAttributes modifications: Cuando se modifica la propiedadNode Removal: Cuando se elimina el nodo
Estilos
estructura DOM
Agregar y eliminar atributos
Simule pseudoestados de elementos para facilitar la depuración
calculado
Disposición
Oyentes de eventos
si los antepasados muestran eventos ligados a los antepasados,
"pasivo" : cuando el detector de eventos está marcado como "pasivo" ,
Indica que no se llamará al oyente
preventDefault()para evitar el comportamiento predeterminado del evento.En otras palabras, simplemente observa pasivamente los eventos que suceden sin intervenir o prevenir el comportamiento predeterminado del evento.
Este comportamiento es muy útil para optimizar el rendimiento del desplazamiento , ya que le dice al navegador que no espere a que el oyente termine de ejecutarse antes de continuar con el desplazamiento.
"bloqueo" : cuando el detector de eventos está marcado como "bloqueo" ,
Indica que se llamará al oyente
preventDefault()para evitar el comportamiento predeterminado del evento.En otras palabras, interviene activamente en el manejo de eventos, evitando que se produzca el comportamiento predeterminado.
Este comportamiento se usa a menudo para manejar interacciones que requieren un comportamiento personalizado o previenen ciertas acciones no deseadas.
Oyentes del marco ( se recomienda verificar ) Después de verificar, el navegador manejará los eventos de enlace de los marcos principales
Red
Solicitud
Lista de recursos + Cookie de almacenamiento local (modificable), WebStorage (localStorage, sessionStorage)
Depuración de fuentes
VS Code y devtool Depuración
Como editor, la mayor ventaja de VS Code es que puede editar el código fuente mientras realiza la depuración con puntos de interrupción . La función de depuración está completa y tiene algunas funciones avanzadas de punto de interrupción que devtool no tiene .
La eficiencia de depuración del Node.jsprogramaJavaScript es muy alta;
Sin embargo, la depuración Vue, Reacttales proyectos pueden ser relativamente menos eficientes que los navegadores, porque la instancia del navegador abierta durante la depuración puede no ser capaz de conservar las cookies , no puede usar devtool Vuey puede causar algunos obstáculos ;React
La herramienta de desarrollo del navegador es una herramienta de desarrollo para el navegador. Puede revisar elementos de la página web, ver la consola, interrumpir el código fuente, ver la memoria, conservar datos, etc. Se puede decir que todo el contenido relacionado con la página web se puede ver. El desarrollo del sitio web es completamente funcional .
La desventaja es que no es tan rápido y flexible como el punto de quiebre del editor en tiempo real, necesita encontrar manualmente la ubicación del código fuente, lo que equivale a hacer la operación de encontrar el código en el navegador, lo cual es más problemático. Pero puede usar Vuey Reactdesarrollar complementos, lo cual es más conveniente.
Resumir:
VSCode es adecuado para la depuración Node.jsyJavaScript programas con más lógica,
Los navegadores son adecuados para depurar marcos con complementos de devtool , y el método a usar depende del escenario real.
Página: directorio de recursos
Scripts de contenido: complementos
Fragmentos: Pruebas convenientes
Vue herramientas de desarrollo
Instalar
Abra Google App Store, busque vue devtools并安装
La versión beta también está disponible para vue3 y vue2
Abra la consola y habrá una pestaña Vue
Componentes (accesorios, datos, calculados, ruta)
Tiempo de carga
Línea de tiempo (graba el tiempo de activación del evento (Ratón\teclado))
Rutas (ver rutas para todas las páginas)
Esto es muy útil cuando se toma el control de un proyecto antiguo, especialmente cuando el backend empalma el enrutamiento.
configuración
Nombres de componentes Establecer el formato de visualización de los nombres de los componentes
Accesorios editables para permitir la edición de accesorios
Resaltar actualizaciones Si resaltar al actualizar
- Tema (color del tema)
- Desplazamiento paso a paso del menú (Desplazamiento paso a paso en un menú o barra de herramientas. Esta característica se usa normalmente para navegar y seleccionar cuando hay una gran cantidad de opciones en un menú o barra de herramientas).
- Se recomienda activar la supervisión del rendimiento (supervisión del rendimiento),
- Seguimiento de actualizaciones
- Información de depuración
