vscode與chrome除錯配置與常見問題

這篇文章將介紹如何配置 Visual Studio Code 和 Chrome 來完成直接在 VS Code 斷點除錯程式碼。
核心：
VScode不能直接除錯VUE程式碼，我們使用vscode 通過呼叫chrome瀏覽器許可的9222遠端除錯埠，實現對VUE程式碼的除錯
1）準備工作：安裝vscode，Chrome。
2）開啟右鍵點選 Chrome 的快捷方式圖示，選擇屬性，在目標一欄，最後加上–remote-debugging-port=9222 注意要用空格隔開。
3）點選 Visual Studio Code 左側邊欄的擴充套件按鈕， 然後在搜尋框輸入Debugger for Chrome並安裝外掛，再輸入，安裝完成後點選 reload 重啟 vscode。
4）點選 Visual Studio Code 左側邊欄的 除錯 按鈕， 在彈出的除錯配置視窗中點選 設定 小齒輪， 然後選擇 chrome, VS Code 將會在工作區根目錄生成.vscode 目錄，裡面會有一個 lanch.json 檔案並會自動開啟，告訴vscode可以通過連線chrome瀏覽器的9222埠對http://localhost:8080/#/ 網頁進行除錯；

{
    // 使用 IntelliSense 瞭解相關屬性。 
    // 懸停以檢視現有屬性的描述。
    // 欲瞭解更多資訊，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}/src",
            "url":"http://localhost:8080/#/",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*":"${webRoot}/*"
            }
        }
    ]
}

5）開啟根目錄下的 config 目錄下的 index.js 檔案：
將dev 節點下的devtool 值改為 ‘eval-source-map’，確保此值會被webpack讀到(做了這件事之後，我們的偵錯程式就有機會將一個被壓縮的檔案中的程式碼對應回其原始檔相應的位置。這會確保你可以在一個應用中除錯，即便你的資源已經被 webpack 優化過了也沒關係)。
6）啟動node伺服器：npm start ，等待其啟動、自動開啟chrome完畢，在除錯頁，按F5,Attach to Chrome，開始除錯。

常見報錯原因：

1) 無法連線到執行中的程式，將在10000毫秒後超時 - （原因：找不到有效的匹配目標: http://localhost:8080/#/)。
可能原因：
（1） lanch.json配置裡url不正確，必須與chrome開啟頁面位址列路徑保持一致。
（2） chrome裡未開啟與配置裡url(http://localhost:8080/#/)對應標籤頁。
2）由於未找到生成程式碼，已忽略斷點。
可能原因：
（1）vscode自動生產的目錄.vscode及該檔案下的 lanch.json位置不正確。該資料夾應位於vue專案根目錄，與src同級目錄。
參考：https://segmentfault.com/a/1190000013392459
https://go.microsoft.com/fwlink/?linkid=830387
https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html