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

Tengo un proyecto muy simple en VSCode, un índice.archivo html que enlaza a una sola aplicación.archivo js.

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

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

En Visual Studio esto "simplemente funcionaría", porque enciende su propio servidor web, IIS Express. En VSCode no estoy seguro de cómo configuré arriba lanzamiento.json y/o tareas.json para crear un nodo simple.servidor web js e índice de servicio.HTML.

He visto algunos ejemplos de depuración de aplicaciones javascript, por ejemplo este lanzamiento.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.

Author: Bjarte Aune Olsen, 2015-06-26
Source

4 answers

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

Como se 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 IntelliSense para ECMAScript 6, que muestra métodos no visibles en otras soluciones "como IntelliSense" que he probado, como SublimeCodeIntel o la última versión de WebStorm.

 17
Author: Macovei Vlad,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-20 20:23:14

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

> npm install -g live-server

A continuación, abra VSCode, haga clic con el botón derecho en cualquier archivo de la carpeta raíz de su proyecto y seleccione "Abrir en consola". Luego escriba 

> live-server

Para iniciar un servidor con su proyecto como carpeta raíz. Live-server abrirá su navegador predeterminado y también monitorea su carpeta de proyecto para cualquier cambio de archivo, y vuelve a cargar la página html cada es hora de que hagas algún cambio.

Debo mencionar que mi solución usando live-server no me permite depurar mi aplicación en VSCode, solo ejecutarla en el navegador. Estoy depurando en Chrome.

 15
Author: Bjarte Aune Olsen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-28 20:56:24

VSCode usará node 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 la aplicación.js debe ser golpeado una vez que visite su sitio que se está ejecutando local a través de nodo. Aquí hay una buena demostración https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs

 1
Author: Isidor Nikolic,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-26 17:28:39

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

En el lanzamiento.json solo tienes que pu el valor url del servidor que estás utilizando y luego puedes depurar tu html + js con tu editor visual studio code

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://127.0.0.1:8081",
            "webRoot": "${workspaceFolder}"
        }
    ]
}
 0
Author: yaguat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-31 16:55:44