Iceworks Debug

使用 VS Code 和 Chrome 對源碼進(jìn)行調(diào)試。

點(diǎn)擊文件右上角的 debug 按鈕啟動 npm run start。

若希望在 VS Code 中進(jìn)行斷點(diǎn)調(diào)試，可在您的工程目錄中插入 .vscode/launch.json 和 .vscode/tasks.json ，并啟動 VS Code Debug。 并安裝 Debugger for Chrome 插件。

PS: 可將 .vscode 目錄添加至 .gitignore 配置中。

launch.json

推薦配置如下，更多配置可參考 VS Code debug 文檔_blano。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome", // 通過 'Debugger for Chrome' 擴(kuò)展啟動 Chrome 預(yù)覽。
      "request": "launch", // 調(diào)試會啟動新的 Chrome 實(shí)例，替換 attach 可選取當(dāng)前 Chrome 實(shí)例，但需要重啟 Chrome。
      "name": "Iceworks Debug", 
      "url": "http://localhost:3333", // 當(dāng)前工程調(diào)試服務(wù)地址
      "urlFilter": "http://localhost:3333/**/*", // 監(jiān)聽當(dāng)前工程調(diào)試服務(wù)所有的 url
      "webRoot": "${workspaceFolder}",
      "userDataDir": "${workspaceFolder}/.vscode/chrome-debug-user-data", // 用于存放 Chrome 的用戶數(shù)據(jù)（安裝的瀏覽器插件等）
      "preLaunchTask": "Iceworks Start Background Tasks",
      "postDebugTask": "Iceworks Stop Background Tasks"
    }
  ]
}

tasks.json

推薦配置如下，更多配置可參考 [VS Code tasks 文檔_blank_nofollow]( https://code.visualstudio.com/docs/editor/tasks#vscode)。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Iceworks Start Background Tasks",
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "problemMatcher": {
        "pattern": {
          "regexp": "ERROR in .*"  // build-scirpt 日志
        },
        "background": {
          "beginsPattern": ".*(@alib/build-scripts|ice\\.js|rax\\.js).*", // build-scirpt 日志
          "endsPattern": ".*http://localhost:3333.*"  // build-scirpt 日志
        }
      }
    },
    {
      "label": "Iceworks Stop Background Tasks",
      "type": "process",
      "command": [
        "${command:workbench.action.tasks.terminate}",  // VS Code 內(nèi)置命令
        "${command:workbench.action.acceptSelectedQuickOpenItem}" // VS Code 內(nèi)置命令
      ]
    }
  ]
}

更改端口號

若需要 debug 的工程調(diào)試鏈接不為 http://localhost:3333 時，可以修改 launch.json 中的 url 和 urlFilter 配置的地址鏈接，以及 tasks.json 中的 endsPattern 為新的調(diào)試地址即可。

Chrome 實(shí)例

默認(rèn)開啟新的 Chrome 實(shí)例進(jìn)行調(diào)試。首次啟動為無數(shù)據(jù) Chrome (無用戶態(tài)，無插件），在調(diào)試過程操作的數(shù)據(jù)將得以保存（歷史，安裝插件等）。

Rax 項(xiàng)目，推薦安裝 Guan Extension。

其他

如果想使用常用登錄態(tài)的 Chrome 進(jìn)行提示，可切換 launch.json 中的 request 配置為 attach，且必須關(guān)閉當(dāng)前 Chrome。