在編程開發過程中，調試是一個不可避免的環節。而斷點就是調試的利器之一。vscode的斷點功能十分強大，今天我們就來詳細講解一下vscode斷點的使用方法和技巧。
一、斷點的常規使用
1、設置斷點：
function test() {
let a = 1;
let b = 2;
let c = a + b;
}
test();
在代碼編輯器左側的行號區域左擊即可設置斷點，點擊行號區域會出現斷點標記，同時在代碼行上也會出現一個紅圓點標示。如下：
function test() {
debugger;
let a = 1;
let b = 2;
let c = a + b;
}
test();
2、觸發斷點：
在調試模式下點擊左側的“調試”按鈕，然后再點擊彈出的“啟動調試”按鈕即可啟動調試模式。在代碼執行到斷點位置時，程序會自動停下，然后進入到vscode的調試模式中。
3、斷點控制：
調試模式下，vscode提供了常用的斷點控制功能，可以單步執行、跳過、繼續執行和停止調試等。如下圖：
二、斷點高級技巧
1、條件斷點：
條件斷點可以讓斷點只有在滿足特定條件時才會生效。例如，我們希望在a等于3的時候停下來，就可以使用條件斷點。
function test() {
let a = 1;
let b = 2;
let c = a + b;
}
test();
在第2行左鍵單擊，在彈出的菜單中選擇“條件斷點”選項，然后輸入條件表達式“a===3”即可。如下：
function test() {
debugger;
let a = 3;
let b = 2;
let c = a + b;
}
test();
注意：條件表達式必須是一個返回布爾值的表達式。
2、日志斷點：
日志斷點可以在斷點處將日志信息輸出到控制臺，而不是像普通的斷點一樣暫停代碼執行。如下：
function test() {
let a = 1;
let b = 2;
console.log('a:', a, 'b:', b); // 日志斷點
let c = a + b;
}
test();
在執行到第4行時，控制臺會輸出“a: 1 b: 2”。
3、行內斷點：
行內斷點可以快速創建一個斷點，而不需要在左側的行號區域中點擊。
function test() {
let a = 1;
let b = 2;
let c = a + b;debugger; // 行內斷點
}
test();
以上就是高級斷點的用法。這些功能可以使我們在調試過程中更加高效、準確地找到問題所在。
三、總結
本文詳細介紹了vscode斷點的常規用法和高級技巧，這些技巧能夠提高我們的調試效率。但是，在使用斷點的過程中也需要注意，不要濫用斷點，否則會影響程序的性能。最后，希望本文對大家有所幫助。
京公網安備 11010802030320號