如何在VSCode（Visual Studio Code）中一起調試HTML和JavaScript？

我在VSCode中有一個非常簡單的項目，它是鏈接到一個app.js文件的index.html文件。如何在VSCode（Visual Studio Code）中一起調試HTML和JavaScript？

當我打F5時，我想運行和調試這個迷你網站。

如何配置VSCode在瀏覽器中打開index.html，然後允許我在app.js中設置斷點，這些斷點將由我在瀏覽器中與應用程序的交互觸發？

在Visual Studio中，這會「正常工作」，因爲它啓動了它自己的Web服務器IIS Express。在VSCode中，我不確定如何設置launch.json和/或tasks.json來創建簡單的node.js Web服務器並提供index.html。

我見過調試JavaScript的應用程序的一些例子，比如這個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 
     } 
    ] 
}

這將運行js文件，但我不明白我怎麼能與應用程序交互。

來源

2015-06-26 Bjarte Aune Olsen

現在可以使用Microsoft發佈的擴展通過Chrome遠程調試在vscode中調試Chrome網頁。 Debugger for Chrome

正如您從該頁面可以看到的，有兩種調試模式：Launch和Attach。我只設法使用Attach模式，可能是因爲我沒有運行服務器。該擴展具有所有重要的調試工具功能：局部變量，斷點，控制檯，調用堆棧。

重新訪問vscode的另一個原因是，它現在有ECMAScript 6的IntelliSense支持，它顯示了我嘗試過的其他類似「IntelliSense like」解決方案中不可見的方法，如SublimeCodeIntel或最新版本的WebStorm。

來源

2015-12-20 20:23:14

謝謝，這是一個有益的補充。 –

VSCode將使用節點啓動您的應用程序，這意味着您的應用程序正在某個PORT上運行。您可以通過訪問http://localhost:PORT/ 與您的應用程序進行交互。如果您在app.js中設置了斷點，則應在您訪問正在運行本地通過節點的站點時點擊該斷點。這裏是一個很好的演示https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs

來源

2015-06-26 15:48:40

感謝您的回覆，但我不明白如何使用視頻中的信息來運行顯示HTML文件的node.js服務器。我看到的這個和其他指南的問題是他們僅使用JavaScript創建整個網站，但我想創建一個簡單的HTML頁面，只添加一點JavaScript。 –

看來我想要做的是不可能在VSCode（還？）。我現在的解決方案是使用節點包live-server。安裝帶有

> npm install -g live-server

然後打開VSCode，在項目的根文件夾中右擊任何文件，選擇「在控制檯打開」。然後鍵入

> live-server

以您的項目作爲根文件夾啓動服務器。實時服務器將打開您的默認瀏覽器，並監視您的項目文件夾中的任何文件更改，並在每次進行任何更改時重新加載html頁面。

我應該指出，使用活服務器我的解決方案不允許我調試我在VSCode的應用程序，只有在瀏覽器中運行它。我在Chrome中進行調試。

來源

2015-06-28 10:29:38

您可以使用https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

中推出。JSON你只需要PU您正在使用的服務器的URL值，然後就可以調試你的HTML + JS跟你的編輯器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}" 
     } 
    ] 
}

來源

2017-12-31 16:55:44 yaguat

如何在VSCode（Visual Studio Code）中一起調試HTML和JavaScript？

回答

相關問題