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