debugging - sangria - visual studio code autocomplete html

¿Cómo depuro HTML y JavaScript juntos en VSCode(código de Visual Studio)?

Question

Tengo un proyecto realmente simple en VSCode, un archivo index.html que se enlaza a un solo archivo app.js.

Quiero ejecutar y depurar este mini sitio web cuando presiono F5.

¿Cómo configuro VSCode para abrir index.html en el navegador y luego me permite establecer puntos de interrupción en app.js que se activarán por mi interacción con la aplicación en el navegador?

En Visual Studio, esto "simplemente funcionaría", porque activa su propio servidor web, IIS Express. En VSCode no estoy seguro de cómo configuré launch.json y / o tasks.json para crear un servidor web de node.js simple y servir index.html.

He visto algunos ejemplos de aplicaciones de depuración de javascript, por ejemplo este launch.json:

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch Bjarte''s app",
            "type": "node",
            "program": "app.js",
            "stopOnEntry": true,
            "args": [],
            "cwd": ".",
            "runtimeExecutable": null,
            "runtimeArguments": [],
            "env": {},
            "sourceMaps": false
        },
        {
            "name": "Attach",
            "type": "node",
            "address": "localhost",
            "port": 5858,
            "sourceMaps": false
        }
    ]
}

Esto ejecutará el archivo js, ​​pero no entiendo cómo puedo interactuar con la aplicación.

Answer 1

Ahora es posible depurar las páginas web de Chrome en vscode a través de la depuración remota de Chrome con una extensión lanzada por Microsoft. Depurador para Chrome

Como puede ver en esa página, hay dos modos de depuración, Iniciar y Adjuntar. Solo logré usar el modo Adjuntar, probablemente porque no tengo un servidor en ejecución. Esta extensión tiene todas las herramientas de depuración importantes funcionales: variables locales, puntos de interrupción, consola, pila de llamadas.

Otra razón para volver a visitar vscode es que ahora tiene soporte de IntelliSense para ECMAScript 6, que muestra métodos no visibles en otras soluciones "IntelliSense like" que he probado, como SublimeCodeIntel o la última versión de WebStorm.

Answer 2

Parece que lo que quiero hacer no es posible en VSCode (¿todavía?). Mi solución en este momento, es utilizar el paquete de nodo live-server . Instalar con

> npm install -g live-server

Luego abra VSCode, haga clic derecho en cualquier archivo en la carpeta raíz de su proyecto y seleccione "Abrir en la consola". Entonces escribe

> live-server

para iniciar un servidor con su proyecto como carpeta raíz. Live-server abrirá su navegador predeterminado y también monitoreará la carpeta de su proyecto en busca de cambios en los archivos, y volverá a cargar la página html cada vez que realice cambios.

Debo mencionar que mi solución que utiliza el servidor en vivo no me permite depurar mi aplicación en VSCode, solo la ejecuto en el navegador. Estoy depurando en Chrome.

Answer 3

Puede usar https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

En launch.json, solo tienes que obtener el valor de url del servidor que estás utilizando y luego puedes depurar tu html + js con el código de estudio visual de tu editor.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://127.0.0.1:8081",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Answer 4

VSCode usará el nodo para iniciar su aplicación, lo que significa que su aplicación se está ejecutando en algún puerto. Puede interactuar con su aplicación visitando http://localhost:PORT/ Si establece un punto de interrupción en app.js, debe ser golpeado una vez que visite su sitio que se está ejecutando localmente a través del nodo. Aquí hay una bonita demostración https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs