如何在vscode內調試js

原文鏈接： https://www.cnblogs.com/yalong/p/15670527.html

背景：

leetcode 刷題的時候，想調試代碼，於是百度了下用vscode如何調試js代碼，但是網上找的都是用Debugger for Chrome 這個插件，使用起來太麻煩了，不用，於是有了下面這種方式

效果如下：

可以看到就是直接在vscode里就能調試js了，不用麻煩再配合Chrome瀏覽器使用了。

第一步 把代碼目錄添加到工作區：

第一步肯定是先把文件目錄添加到工作區了，如下所示

這里文件夾就是js-test 里面就一個文件test.js
文件內容如下：

let a = 1;
let b = 2;
let c = a + b;
console.log(c)

在文件里可以給js打斷點，如下圖所示

第二步 添加.vscode配置 文件

點擊這個《運行和調試》按鈕 ，如下圖所示

點擊《啟動程序》的下拉,出現如下圖所示

點擊《添加配置(js-test)》, (備注： 這個js-test 就是添加到工作區的文件夾的名字，如果你的文件夾名字是 AA 那么這里就是AA) 出現如下圖所示，點擊Node.js

會出現如下圖所示

只要注意上圖標紅的兩個地方就行

再回到代碼 就可以看到js-test文件下就多了.vscode文件

第三步 開始調試

這時候就可以調試代碼了，切回到test.js 文件， 然后點擊《調試和運行》按鈕，如下圖所示

點擊運行邊上那個按鈕就可以調試了

記得下圖這里要選擇 Launch Program 就是 launch.json 中的 name的值

最終調試界面如下圖所示：

總結

全程沒有添加一行代碼，都是點點點，是不是很方便，

最后再解釋下這幾個調試按鈕的作用

圖上標記了數字，各個數字對應的功能如下：

1. 執行完當前斷點，達到下一個斷點
2. 調試到下一行，就是一行一行的調試
3. 進入函數內部，就是當前斷點部分如果有函數的就，就跳進函數內部
4. 跳出函數
5. 結束本輪調試，重頭開始調試
6. 結束調試