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