[原創]VSCode debug jest的配置

      重拾JS的路從修改JS源碼開始，修改JS源碼從源碼自帶的test code開始。源碼的test code使用了jtest框架，從test code剛好可以看到要修改部分的 多種傳值方式，以及函數輸出結構。修改源碼后，順便修改jtest的snapshot, 剛好又可以重新利用test code，進行驗證自己的修改是否達到預期，白盒測試十分輕巧方便！

      第一步，debug jest code, 我使用了VSCode做編輯器，要修改的js源碼比較復雜，有多個工程，每個工程有自己的package.json, babelrc, yarn.lock，總之包管理很復雜。。我修改的部分只是其中一個工程，主要是debug這個工程下的jest文件。用習慣了ideal里本地debug Java的方式，希望在VSCode里也能這樣去debug。（不是專業前端開始，在瀏覽器里進行大型debug用着不順手）。

　　要能debug, 主要需要在VSCode里創建launch.json文件，方法如下：（截圖來自VSCode官網）在VSCode里打開工程目錄，選擇左側工具欄的debug圖標，然后在debug面板上選擇小齒輪圖標。

 VSCode會自動探測你的debug環境，如果探測失敗的話，需要手工選擇。

 

 至此，在你的工程目錄下，就會自動生成launch.json文件，位於.vscode文件夾下，因為我們要調試jest文件，所以launch.json中的內容需要修改為jest的，（參考jest官網給的配置），下面是我的launch.json。

{

// Use IntelliSense to learn about possible attributes.

// Hover to view descriptions of existing attributes.

// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

"version": "0.2.0",

"configurations": [

{

"name": "Debug Jest Tests",

"type": "node",

"request": "launch",

"runtimeArgs": [

"--inspect-brk",

"${workspaceRoot}/node_modules/jest/bin/jest.js",

"--runInBand"

],

//"sourceMaps": true,

"trace": true,

"console": "integratedTerminal",

"internalConsoleOptions": "neverOpen",

"port": 9229

}

]

}

 

到此，就可以在VSCode里debug jest了，選擇你要debug的jest文件，右鍵選擇debug jest即可。

 

參考鏈接：

https://code.visualstudio.com/docs/editor/debugging

https://jestjs.io/docs/en/troubleshooting.html#debugging-in-vs-code

https://blog.csdn.net/qq_17371033/article/details/79503136