Comment déboguer HTML et JavaScript ensemble dans VSCode (code Visual Studio)?
J'ai un projet très simple dans VSCode, un index.fichier html reliant à une seule application.fichier js.
Je veux exécuter et déboguer ce mini site web quand je frappe F5.
Comment configurer VSCode pour ouvrir l'index.html dans le navigateur, puis permettez-moi de définir des points d'arrêt dans l'application.js qui sera déclenchée par mon interaction avec l'application dans le navigateur?
Dans Visual Studio, cela "fonctionnerait", car il déclenche son propre serveur web, IIS Express. Dans VSCode Je ne sais pas comment je définis up de lancement.JSON et / ou tâches.json pour créer un nœud simple.serveur web js et servir l'index.HTML.
J'ai vu quelques exemples de débogage d'applications javascript, par exemple ce lancement.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
}
]
}
Cela va exécuter le fichier js, mais je ne comprends pas comment je peux interagir avec l'application.
4 réponses
Il est maintenant possible de déboguer les pages Web Chrome dans vscode via le débogage à distance Chrome avec une extension publiée par Microsoft. Débogueur pour Chrome
Comme vous pouvez le voir sur cette page, il existe deux modes de débogage, lancer et attacher. J'ai seulement réussi à utiliser le mode Attach, probablement parce que je n'ai pas de serveur en cours d'exécution. Cette extension a tous les outils de débogage importants fonctionnels: variables locales, points d'arrêt, console, pile d'appels.
Une autre raison de revoir vscode est qu'il a maintenant le support IntelliSense pour ECMAScript 6, qui affiche des méthodes non visibles dans d'autres solutions "IntelliSense" que j'ai essayées, comme SublimeCodeIntel ou la dernière version de WebStorm.
Il semble que ce que je veux faire n'est pas possible dans VSCode (encore?). Ma solution pour le moment, est d'utiliser le noeud package live-serveur. Installer avec
> npm install -g live-server
Ensuite, ouvrez VSCode, cliquez avec le bouton droit sur un fichier dans le dossier racine de votre projet et sélectionnez "Ouvrir dans la Console". Puis tapez
> live-server
Pour démarrer un serveur avec votre projet comme dossier racine. Live-server ouvrira votre navigateur par défaut et surveille également votre dossier de projet pour tout changement de fichier, et recharge la page html chaque temps vous faites des changements.
Je devrais mentionner que ma solution utilisant live-server Ne me permet pas de déboguer mon application dans VSCode, seulement l'exécuter dans le navigateur. Je suis de débogage dans le navigateur Chrome.
VSCode utilisera node pour lancer votre application, ce qui signifie que votre application s'exécute sur un PORT. Vous pouvez interagir avec votre application en visitant http://localhost:PORT/ Si vous définissez un point d'arrêt dans l'application.js il devrait être frappé une fois que vous visitez votre site qui est en cours d'exécution locale via node. Voici une belle démo https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs
Vous pouvez utiliser https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
Dans le lancement.json il vous suffit de pu la valeur d'url du serveur que vous utilisez, puis vous pouvez déboguer votre html + js avec votre éditeur 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}"
}
]
}