我們在寫代碼的時候經常需要對代碼功能進行調試驗證，以保證功能的實用性。一般我們習慣在代碼中通過console.log來打印我們的輸出值，然後通過瀏覽器的調試窗口中驗證輸出結果以保證是我們需要的內容。這樣要在瀏覽器和編譯器兩邊來回切換操作起來相當的不方便，用過Visual Studio的朋友應該知道它有個很強大的功能就是調試。它可以幫助我們在調試時快速查看編輯器中的變量信息， 使用數據提示查看變量的名稱和當前值、展開對象並查看其元素以及編輯變量值。也可以在疑問的代碼區域設置斷點來暫停正在運行的程序，通過逐步執行或者逐行執行代碼來詳細檢查代碼，分析變量值、內存行為或者代碼分支是否運行正常。
作為Microsoft另一款強大的編譯器Visual Studio Code，不僅支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，同時還支持插件擴展並針對網頁開發和雲端應用開發做了優化，是一款免費開源的現代化輕量級代碼編輯器，非常使用用來做前端開發。
安裝Debugger for Chrome插件
既然是一款如此優秀的編譯器，具備代碼調試功能也是眾望所歸的。針對前端開發項目Visual Studio Code中提供了 Debugger for Chrome插件，它能夠通過配置直接在VS Code設置斷點來調試Vue代碼, 並且在 VS Code的調試窗口直接看到Chrome中 console.log輸出的值。在軟件左側找到“擴展”選項，再搜索框中輸入Debugger for Chrome查找，然後安裝Debugger for Chrome插件。
vue.config.js配置 devtool 屬性
VS Code 調試你的Vue 組件之前需要更新webpack配置來構建 source map，當我們運行調試器時就可以找到代碼對應的源文件相應的位置，以確保你可以在一個應用中調試。在根目錄打開vue.config.js文件（這個文件要手動新增）配置 devtool 屬性，將其更新屬性devtool: 'source-map'。
生成lanch.json配置
點擊 Visual Studio Code 左側邊欄的 調試 按鈕， 在彈出的調試配置窗口中點擊 “設置 ”圖標， 在彈出的下拉選項中選擇 chrome, Visual Studio Code會自動生成配置文件lanch.json文件並自動打開。默認配置如下圖中所示，這裡我們來修改下配置信息。
修改lanch.json配置
關於配置信息Vue官方也給了我們模板，這裡我用的是Chrome瀏覽器所以只要配置chrome部分信息即可，type：指的是debugger工具的類型，這裡我們安裝的是Debugger for Chrome當然type就是chrome；request：調試啟動方式； name：調試器名稱；url：訪問路徑；webRoot：${workspaceRoot}指向當前打開的文件夾的絕對路徑及文件夾的名字，這裡指向了src目錄；sourceMaps：幫助我們在控制檯中轉換成源碼；sourceMapPathOverrides：將webRoot路徑映射到webpack。
設置斷點
在需要調試的地方設置一個斷點，這裡我們在登出位置設置了一個斷點。然後在 Debug 視圖中點擊那個綠色的play按鈕開啟調試，或者直接按快捷鍵 F5。這裡我們遇到點問題配置中找不到“runtimeExecutable”字段，原因是我沒裝Chrome瀏覽器（用的綠色版）， 添加一個字段"runtimeExecutable": "D:\\\\Program Files\\\\RunningCheeseChrome\\\\chrome.exe",來配置Chrome 安裝路徑或者安裝Chrome瀏覽器也可以。
開啟調試
正常啟動之後瀏覽器會打開一個新窗口，當我們觸發了登出操作時，瀏覽器就是暫停住在當前頁面並提示：Paused in Visual Studio Code。而在 Visual Studio Code 則定位到了斷點位置，我們可以通過F11繼續單步執行代碼，在左側欄就可以看到我們每次執行時的變量信息了。
更多Vue實戰技巧可以參考專欄：Vue實戰系列
閱讀更多 編程手札 的文章
