VS Code 折騰記 - (7) 內置Debug功能深刻(調教angular-cli )

前言

不少小夥伴說用了打包工具(Webpack)以後，斷點調試有點麻煩（須要藉助sourcemap）；

常規的方式無非是debugger,console.log()大法；

可是，VS Code這貨天生支持Debug功能，不用白不用，今天我就說說怎麼調教angular-cli;

題外話（號外）

最近VS Code又更新了,最新的版本是1.10.2,大致更新功能以下：

1. 引入了minimap(這個好啊)。在配置文件裏面啓用"editor.minimap.enabled": true;固然還有一些額外的小地圖參數
2. 內置JSDOC功能，又能夠少掉一個插件, **觸發
3. 複製內容保持格式化，逼格滿滿，適用於複製到文檔什麼的
4. 目錄樹引入了命令控制，能夠自定義綁定按鍵啦，好比新建目錄和文件
5. Debug功能強化,支持列斷點，溜的飛起額
6. 某些編程語言默認執行的配置文件設置
7. terminal輸出的連接能夠直接點擊訪問啦
8. HTML DOM的快速跳轉
9. 支持gulp這些了。這些須要自行去研究文檔哈

剩下的亮點自行去看發行日志啦.....

VS Code Debug(Ctrl + Shift +D)

部分快捷鍵

1. 繼續(F5)
2. 單步跳過(F10)
3. 單步調試(F11)
4. 單步跳出(Shift + F11)
5. 重啓(Ctrl + Shift + F5 )
6. 中止/結束(Shift + F5)

安裝插件

Debugger for Chrome : Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.

簡言之：就是讓你的代碼在chrome上調試，爲何vscode不集成這個，可能控制體積大小什麼的。。

記得ng serve要先行啓動,調試是調試，不包括引導angular-cli的啓動;

配置文件很簡單：

{
  "version": "0.2.0",
  "configurations": [{
    "name": "LaunchChrome",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:4200",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}",
    "userDataDir": "${workspaceRoot}/.vscode/chrome"
  }]
}

複製代碼

配置解釋

• version : 你定義這個配置文件的版本，默認是0.2.0，生成的時候
• configuration：配置域
• name：配置文件的名字，好比你能夠叫作Debug Angular-cli
• type：調試的類型，vscode天生支持node,好比go,php,chrome這些就依賴插件啦
• request : 配置文件的請求類型，有launch和attach兩種，具體看官方文檔
• url:這個是chrome插件帶的，指定訪問的連接
• webRoot：也是chrome插件帶的，指定根目錄或者執行文件
• ${workspaceRoot}:就是你打開vscode讀取的項目目錄
• sourceMaps:默認是啓用的，對於打包的調試，小夥伴們必須開啓
• userDataDir：臨時目錄,專門保存調試過程產生的東西

啓動調試

1. 正確的狀況下就會彈窗一個新的chrome頁面，

2. 打斷點很簡單，就直接在你須要斷點的頁面，點行號靠左的地方，有個小紅點的地方，點擊出來紅色就是打上了(小紅點再點擊一次就是取消)，如圖：

   

3. 打開相應的頁面，執行到響應的代碼塊就會觸發debug了。。而後vscode就能夠看到你想瞅瞅的數據了。。調試過程（單步什麼的）,對應的本地文件會顯示數據變更在你的

總結

VS Code的Debug功能至關好用，如果想引導程序啓動再打開chrome這種也能夠實現，

就是須要寫的配置文件來調起

除了天生支持node內置debug,如下的都須要藉助插件才能夠

1. C#
2. Python
3. Chrome
4. C/C++
5. Go