Come si esegue il debug di HTML e JavaScript insieme in VSCode (Codice di Visual Studio)?

Question

Ho un progetto molto semplice in VSCode, un file index.html che collega a un singolo file app.js.

Voglio eseguire e eseguire il debug di questo mini sito Web quando raggiungo F5.

Come configurare VSCode per aprire index.html nel browser e quindi consentirmi di impostare i breakpoint in app.js che verranno attivati ​​dalla mia interazione con l'app nel browser?

In Visual Studio questo "funziona" solo perché attiva il proprio server Web, IIS Express. In VSCode non sono sicuro di come avvii launch.json e/o tasks.json per creare un semplice server web node.js e servire index.html.

ho visto alcuni esempi di debug javascript applicazioni, ad esempio questo 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 
     } 
    ] 
} 

Questo verrà eseguito il file js, ma non capisco come posso interagire con l'applicazione.

Answer 1

Ora è possibile eseguire il debug di pagine Web di Chrome in vscode tramite il debug remoto di Chrome con un'estensione rilasciata da Microsoft. Debugger for Chrome

Come potete vedere da quella pagina ci sono due modalità di debugging, Launch e Attach. Sono riuscito a utilizzare la modalità Attach, probabilmente perché non ho un server in esecuzione. Questa estensione ha tutti gli strumenti di debug più importanti: variabili locali, punti di interruzione, console, stack di chiamate.

Un altro motivo per rivisitare vscode è che ha ora il supporto IntelliSense per ECMAScript 6, che mostra i metodi non visibili in altri "IntelliSense come" Le soluzioni che ho provato, come SublimeCodeIntel o l'ultima versione di WebStorm.

Answer 2

VSCode utilizzerà il nodo per avviare l'app, il che significa che l'app è in esecuzione su alcune porte. Puoi interagire con la tua app visitando http://localhost:PORT/ Se imposti un punto di interruzione in app.js, dovrebbe essere visualizzato una volta che visiti il ​​tuo sito che è in esecuzione locale tramite nodo. Ecco una bella demo https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs

Answer 3

Sembra che ciò che voglio fare non sia possibile in VSCode (ancora?). La mia soluzione al momento è quella di utilizzare il pacchetto di nodi live-server. Installare con

> npm install -g live-server 

Poi aperto VSCode, fare clic destro qualsiasi file nella cartella principale del progetto e selezionare "Apri in Console". Quindi digitare

> live-server 

per avviare un server con il progetto come cartella principale. Live-server aprirà il browser predefinito e monitorerà la cartella del progetto per eventuali modifiche ai file e ricaricherà la pagina html ogni volta che apportate modifiche.

Devo menzionare che la mia soluzione che utilizza live-server non mi consente di eseguire il debug della mia app in VSCode, ma solo di eseguirla nel browser. Sto eseguendo il debug in Chrome.

Answer 4

È possibile utilizzare https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Nel lancio.JSON non resta che pu il valore URL del server che si sta utilizzando e quindi è possibile eseguire il debug html + js con il codice di editor di Visual Studio

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