VSCode怎么調(diào)試Angular程序

這篇文章主要介紹VSCode怎么調(diào)試Angular程序，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

vscode有什么用

Visual Studio Code 是一個(gè)運(yùn)行于 OS X，Windows和 Linux 之上的，針對(duì)于編寫現(xiàn)代 web 和云應(yīng)用的跨平臺(tái)編輯器，它為開發(fā)者們提供了對(duì)多種編程語(yǔ)言的內(nèi)置支持，并且正如 Microsoft 在Build 大會(huì)的 keynote 中所指出的，這款編輯器也會(huì)為這些語(yǔ)言都提供了豐富的代碼補(bǔ)全和導(dǎo)航功能。

準(zhǔn)備工具

在 VS Code 中安裝 Debugger for Chrome 插件。

配置 lanch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "sourceMaps": true,
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceRoot}"
    }
  ]
}

配置完成后，在 Angular 工程目錄輸入命令 ng serve 啟動(dòng)項(xiàng)目，然后就可以打斷點(diǎn)調(diào)試了。

調(diào)試

在 VS Code 中按 F5 進(jìn)入調(diào)試模式，打開 Chrome 刷新頁(yè)面，就進(jìn)入斷點(diǎn)。

以上是“VSCode怎么調(diào)試Angular程序”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！