Artículo de: https://www.cnblogs.com/xifengxiaoma/p/9530737.html
Chrome depuración directamente en el código Vue ventana de depuración por las molestias, pero afortunadamente código de Visual Studio proporciona depurador para Chrome plug-in, y se puede ver a través de la configuración de Chrome directamente en el Código VS punto de interrupción de depuración de código, ventana de depuración en el Código VS la misma consola de valores, este artículo introducirá el proceso de configuración.
1. Abrir el puerto de depuración remota Chrome
En primer lugar, tenemos que empezar a Chrome en la depuración remota está abierto, así Código VS para adjuntar a Chrome.
ventanas
- Haga clic en el icono de acceso directo de Chrome, seleccione Propiedades
- En un gol de campo, y por último añadir
--remote-debugging-port=9222，prestar atención a la utilización del espacio separados
Mac OS
-
Abra la consola
-
执行命令 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
Linux
- Abra la consola
执行命令 google-chrome --remote-debugging-port=9222
2. Instalar el plug-in Chrome depuración
Haga clic en el botón de expansión en la barra lateral izquierda código de Visual Studio y escriba en el buscador depurador para Chrome e instalar el plug-in, escriba, haga clic en Volver a cargar para reiniciar después de la instalación se haya completado.
3. Crear el perfil de depuración
Haga clic en la barra lateral izquierda código de Visual Studio depuración botón en la ventana emergente, haga clic en la depuración de configuración configuración de piñón, a continuación, elija cromo, Código VS se generará directorio .vscode en el directorio raíz del espacio de trabajo, y habrá un archivo lanch.json se abrirá automáticamente
archivo de contenido superposición Lanch.json generado automáticamente por el siguiente perfil.
Nota: WEBPACK mantener configuración coherente del número de puerto en el número de puerto de inicio URL.
{
// Usar IntelliSense para aprender acerca de los posibles atributos.
// Hover para ver las descripciones de los atributos existentes.
// Para obtener más información, visite: https://go.microsoft.com/fwlink/?linkid=830387
"versión": "0.2.0",
"configuraciones": [
{
"type": "cromo",
"solicitud ": "unir",
"name": "adjuntar a Chrome",
"puerto": 9222,
"Webroot": "$ {} workspaceRoot / src",
"url":" http: // localhost: 8080 / # / "
"sourceMaps": true,
"sourceMapPathOverrides": {
" webpack:
4. Modificar configuración webpack
Si se basa en webpack lleno vue proyecto, puede haber un problema que no coincide con el punto de interrupción, sino que también requiere algunas modificaciones:
Index.js 1. Abra el archivo en el directorio de configuración en el directorio raíz
2. devtool dev nodo con el valor 'eval-fuente de ruta'
3. Valor Cachebuster en false la dev nodo
5. Activa la depuración
Después de la configuración anterior:
1. Abrir Chrome a través de un primer paso para abrir el camino para la depuración remota
2. Proyecto vue Ejecutar npm run dev en modo de depuración para iniciar el proyecto
3. Haga clic en el botón Código VS depuración en la barra lateral izquierda, seleccione Adjuntar a Chrome y haga clic en el botón verde de inicio, la depuración de barra de control aparecerá en circunstancias normales.
Ahora se puede depurar un punto de quiebre en el archivo del código vue js.
