almost 3 years ago

1.先安裝 VS Code 的 Extension Debugger for Chrome
setup1
2.開啟專案目錄後 於偵錯模式下建立 launch.json 檔案, 內容如下

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000", // 前端URL
            "port": 9222,// Chrome port 後續會設定
            "sourceMaps": true,//開啟sourceMaps對應模式
            "userDataDir": "${workspaceRoot}/.vscode/chrome", // 專案目錄的Extension的設定檔路徑
            "diagnosticLogging": true,// 開啟Debugger for Chrome 的log紀錄
            "webRoot": "${workspaceRoot}/src/app/"//實體的開發js目錄
        }
    ]
}

setup2
3.設定桌面的 Chrome 啟動配置
目標(T): "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222
setup3
4.開啟 整合式終端機 於底下 視窗執行啟動 前端 server
setup4
5.執行 VS Code 偵錯模式, 會自動開啟偵錯用的 chrome 視窗
setup5
6.偵錯情境
setup6

← React 使用 create-react-app 配置 mobx todo MVVM 範例 利用三元運算式消除 if else →
 
comments powered by Disqus