問題描述

最近在使用 vscode + vue 組合開發(fā)web端。調試的時候發(fā)現(xiàn)兩個問題。第一個問題是vscode沒有辦法在 async await 函數(shù)所在的行設置斷點。第二個問題是除了vue模版那幾個js文件以及 .vue 文件，沒有法辦在自己寫的 js 文件或者模塊設置斷點。

下面根據(jù)這兩個問題尋找解決方法。

問題一：沒有辦法在async await 所在行打斷點

這個問題其實是 sourcemap 的問題。因為vue 一般開發(fā)都是用es6或者tpyescript 寫的代碼。然后使用babeljs 翻譯成一般瀏覽器都能運行的es5。這樣的結果是瀏覽器上運行的代碼和我們開發(fā)寫的代碼是不一樣的。這個時候就需要一個叫 sourcemap 的東西來標記瀏覽器上哪行代碼對應工程中的哪行代碼。

所以不能打斷點應該就是vscode 和 chrome 找不到對應代碼的位置。

上面的126行 var res = await ...... 就不能設置斷點。vscode 會提示你 unverified breakpoint 。

解決辦法要從 babel 的配置文件下手。在項目的根目錄創(chuàng)建一個 babel.config.js 文件。然后配置如下：

重新編譯運行一次。也就是重新運行 npm run serve 。再試試在剛才的地方打斷點。成功了。重點其實是配置文件的第五行。

問題二：沒有辦法在自己寫的js 或者模塊里面打斷點

要解決這個問題我們先來做個實驗。我們在根目錄的 ./src/rpc 文件夾下有一個自己寫的js文件 rpc_user.js

在第一個問題的 126行打個斷點，然后 stepin 無數(shù)次之后最終會到達 我們 rpc_user.js 那個loginWithName 函數(shù)。但是，這個時候vscode 打開的文件名后面一般會跟 “readonly - inlined context source map” 之類的提示。我們先叫他 readonly_rpc_user.js 。 有趣的是如果在這個文件里面打斷點是能成功的。但回到原本的 rpc_user.js 卻不能打斷點。什么問題呢？我們來看看 chrome 瀏覽器上的狀態(tài)。

發(fā)現(xiàn)問題了沒有。Login.vue 文件在 webpack:///src/views/ 里面。而 rpc_user.js 卻在 webpack:///./src/rpc/ 里面。就那么一點點差異。另外，如果直接在chrome 的rpc_user.js 里面打斷點是沒有問題的。也就是說vscode 并不能在本地項目找到 webpack 上對應的文件。知道了問題就好解決了。就是要告訴vscode 什么文件在什么文件夾。

下面我們重新配置一下項目根目錄下 .vscode/launch.json 文件。

vscode 默認生成的 launch.json 是沒有第 13行的。通過修改配置讓vscode 知道 webpack 調試的文件對應項目的本地文件。問題解決。