Cómo depurar el paquete web Vue.js en WebStorm 2017

Algunas personas piensan que los proyectos de Vue son difíciles de depurar porque usan webpack. Todo el código está mezclado y se ha agregado una gran cantidad de código marco, no sé por dónde empezar. Entonces, la depuración de vue webpack debería comenzar con webpack.

1. Empecemos por la situación general.

-sourcemap

La configuración del paquete web proporciona la opción devtool. Si se establece en "#source-map", se generará un archivo .map al depurar en el navegador Chrome. código fuente. No explicaré el significado de cada opción en detalle aquí. Si está interesado, puede consultar este artículo.

El valor predeterminado oficial es "#cheap-module-eval-source-map"

devtool: '#cheap-module-eval-source-map'

Después de configurarlo, al depurar el proyecto vue, puede ver el código correspondiente cuando el código está marcado con el depurador , lo cual es muy conveniente.

02.debugger

O busque el archivo correspondiente directamente. Utilice "ctrl(comando) p " en el navegador Chrome e ingrese el nombre del archivo para encontrar el código fuente correspondiente.

comando p

Punto de interrupción:

Punto de interrupción

Cabe señalar que el punto de interrupción aquí apuntará a la siguiente línea. Además, una línea de código no se considera ejecutada hasta que se ejecuta la línea que la sigue.

03.-vue-cli

Andamio del proyecto de la página de inicio de vue, recomendado.

vue-cli puede ayudarnos a construir el proyecto automáticamente. Primero instale npm globalmente

npm install -g vue-cli

Luego cree un nuevo proyecto

p>

p>

vue init webpack my-project

Presione Enter para completar. (Para obtener más elementos de configuración, consulte el enlace vue-cli que aparece arriba)

El siguiente es un proyecto vue con un paquete web descargado de Internet (recuerde instalarlo con npm antes de ejecutarlo)

04.vue-cli webpack

Desde el interior de la carpeta bulid, puede ver aproximadamente: webpack.dev.conf: para el modo de desarrollo webpack.prod.conf: para el modo de producción

La herramienta de desarrollo proporcionada en el modo de desarrollo es "#cheap-module-eval-source-map". El modo de producción controla si la herramienta se utiliza en función de la variable ProductionSourceMap en la carpeta de configuración.

Si es verdadero, devtool es '#source-map'

Otro uso es consistente. Muy conveniente.

3. Depuración en línea

Durante el desarrollo diario, utilizamos la carga en caliente del paquete web, que puede ahorrar el paso de montaje y depuración, lo cual es muy conveniente. Pero la implementación en el servidor después del lanzamiento pierde esta ventaja local.

Usar el método de montar archivos será más problemático. Dado que el archivo generado por el paquete web contiene información del número de versión y es posible que deba esperar diferentes períodos de tiempo para verificar la cantidad de código al publicar un paquete, esta solución no es práctica. Pero es un buen problema si monta archivos cargados en caliente en un puerto.

-Recarga en caliente

Antes de eso, primero analicemos cómo funciona la recarga en caliente del paquete web.

Obtenga el paquete de datos del proyecto y podrá encontrar este archivo: __webpack_hmr

__webpack_hmr

Este es el evento de inserción del servidor de carga en caliente del paquete web, que pertenece al tipo de fuente de evento. La función es algo similar a websocket. Su función aproximada es crear un enlace a una transmisión ininterrumpida, el servidor envía datos actualizados y los agrega al final de la transmisión, la interfaz lee los últimos datos agregados y luego actualiza dinámicamente el contenido de la página.

A continuación, veremos los datos actualizados disponibles arriba. Actualice un archivo aleatorio, active la carga en caliente y luego tome un paquete y busque dos archivos .hot-update.json y uno .hot-update.js

Carga de archivos de actualización en caliente

No sé qué hacen específicamente, así que no entraré en detalles aquí. Debe actualizarse con precisión en función de los datos en json.

Entonces, la actualización en caliente en realidad monitorea los datos en el servidor. Si hay un cambio, el servidor enviará los datos y la interfaz reemplazará los datos en la página a través de dicho proceso.

-AutoResponder

Lo siguiente que vamos a mencionar es la prueba de montaje en línea. Aquí se recomienda un software: fiddler

fiddler tiene una función llamada AutoResponder, que permite. Señalas una dirección a otra dirección. La razón por la que uso este software es que puede hacer coincidir expresiones regulares, lo cual es muy conveniente.

AutoResponder

La sección anterior decía que la carga en caliente del paquete web utiliza este tipo de archivos __webpack_hmr xxxxxxxxxx.hot-update.json xxxxxxxxxx.hot-update.js