definición

Depuración: el código se ejecuta en una determinada plataforma, expone el estado del tiempo de ejecución de cierta manera y lo pasa a la herramienta de desarrollo para la visualización e interacción de la interfaz de usuario, lo que ayuda a los desarrolladores a solucionar problemas, resolver el proceso y comprender el estado de ejecución del código, etc. Esto es depuración.

La depuración consiste en pasar información de tiempo de ejecución a las herramientas de desarrollo a través de un canal determinado (como WebSocket), para mostrar e interactuar con la interfaz de usuario, para ayudar a los desarrolladores a solucionar problemas y comprender el estado de ejecución del código, etc.

herramienta de depuración

(Herramientas para depurar páginas web, Node.js, código React/Vue)

1. Lo que tienen en común

Los principios de Chrome DevTools, VSCode Debugger y Vue/React DevTools tienen algo en común: la parte de backend es responsable de obtener información de tiempo de ejecución, la parte de frontend es responsable de la representación y la interacción, y también hay un protocolo de depuración que se usa para especificar diferentes formatos de datos y diferentes canales, como WebSocket y el reenvío en segundo plano de los complementos de Chrome.

2. Diferencias

VSCode Debugger tiene una capa adicional de adaptador de depurador para la reutilización entre idiomas Vue/React DevTools inyecta código back-end en la página y luego realiza una comunicación bidireccional a través del fondo.

3. Cuatro elementos

Frontend, backend, protocolo de depuración, canal, estos son los cuatro elementos de las herramientas de depuración.

Depuración JS de páginas web

Reaccionar como un ejemplo

1, herramientas de desarrollo de Chrome

funcionar:

Haga clic con el botón derecho en inspección -> haga clic en el panel de código fuente (fuentes) -> presione un punto de interrupción -> actualice para depurar