使用Console.log（）進(jìn)行快速檢查，最好使用標(biāo)籤或Console.Table（）用於對(duì)象； 2。利用瀏覽器Devtools設(shè)置斷點(diǎn)，逐步瀏覽代碼並檢查變量； 3。實(shí)現(xiàn)嘗試...捕獲同步和異步/等待錯(cuò)誤，並監(jiān)視控制臺(tái)選項(xiàng)卡； 4。應(yīng)用Eslint和更漂亮的人來捕獲錯(cuò)誤並保持代碼一致性； 5。插入調(diào)試器；在需要時(shí)暫停執(zhí)行的語(yǔ)句； 6.使用網(wǎng)絡(luò)和元素選項(xiàng)卡調(diào)查網(wǎng)絡(luò)請(qǐng)求和DOM問題 - 重點(diǎn)這些方法可確保有效的JavaScript調(diào)試。

調(diào)試JavaScript代碼是每個(gè)開發(fā)人員每天使用的技能。這是您可以在JavaScript中有效查找和解決問題的方法：

1。使用console.log()進(jìn)行快速檢查

調(diào)試最簡(jiǎn)單，最常見的方法是使用console.log() 。將其插入代碼中的關(guān)鍵點(diǎn)，以檢查可變值，執(zhí)行流或是否調(diào)用函數(shù)。

 console.log（“用戶數(shù)據(jù)：”，userData）;
console.log（“活躍？”，ISACTIVE）;

它很快，幾乎到處都可以工作 - 瀏覽器，node.js等，但不要在生產(chǎn)代碼中留下console.log()語(yǔ)句。

專家提示：使用標(biāo)記的日誌避免混淆：

 console.log（“在步驟3：”，step3value）;

並使用console.table()用於數(shù)組或?qū)ο?- 它在表中很好地格式化了數(shù)據(jù)。

2。使用瀏覽器開發(fā)人員工具

現(xiàn)代瀏覽器（Chrome，F(xiàn)irefox，Edge）具有強(qiáng)大的內(nèi)置Devtools。這是有效使用它們的方法：

• 使用F12或Ctrl Shift I （Mac上的Cmd Option I ）打開DevTools 。
• 轉(zhuǎn)到源（或調(diào)試器）選項(xiàng)卡。
• 通過單擊行號(hào)查找JavaScript文件並設(shè)置斷點(diǎn)。
• 當(dāng)代碼運(yùn)行時(shí)，它會(huì)在斷點(diǎn)處暫停。
• 使用控件逐步瀏覽代碼：
  • 一步
  • 介入
  • 繼續(xù)執(zhí)行
• 實(shí)時(shí)檢查變量和呼叫堆棧。

您也可以：

• 添加條件斷點(diǎn)（僅在滿足條件時(shí)觸發(fā)）。
• 使用debugger;在您的代碼中迫使暫停：

  如果（錯(cuò)誤）{
    調(diào)試器; //如果DevTools打開，則執(zhí)行停止此處
  }

3。優(yōu)雅處理錯(cuò)誤

使用try...catch塊以捕獲運(yùn)行時(shí)錯(cuò)誤：

嘗試 {
  危險(xiǎn)供應(yīng)（）;
} catch（錯(cuò)誤）{
  console.error（“出現(xiàn)問題：”，error.message）;
}

對(duì)於異步代碼（承諾），使用.catch()或try...catch與async/await ：

異步函數(shù)fetchdata（）{
  嘗試 {
    const res =等待提取（'/api/data'）;
    const data =等待res.json（）;
  } catch（錯(cuò)誤）{
    Console.Error（“ Fetch失?。骸保e(cuò)誤）;
  }
}

還要在DevTools中選中“控制臺(tái)”選項(xiàng)卡- JavaScript錯(cuò)誤和警告是實(shí)時(shí)出現(xiàn)的。

4。棉絨和格式化您的代碼

使用諸如ESLINT之類的工具早期捕獲常見錯(cuò)誤（例如，未定義的變量，語(yǔ)法問題）：

 npx eslint your-file.js

並使用更漂亮的代碼格式保持一致 - 有時(shí)錯(cuò)誤隱藏在結(jié)構(gòu)較差的代碼中。

5。使用debugger;從戰(zhàn)略上

插入debugger;您希望執(zhí)行暫停的地方（如果開放DevTools）：

功能processuser（用戶）{
  偵錯(cuò)工具;
  返回user.name.touppercase（）;
}

就像一個(gè)斷點(diǎn)，您可以快速切換。

6。檢查網(wǎng)絡(luò)和DOM問題

有時(shí)該錯(cuò)誤不在JavaScript邏輯中，而是在：

• API呼叫失敗（檢查網(wǎng)絡(luò)選項(xiàng)卡）。
• 找不到元素（ document.getElementById返回null ）。
• 活動(dòng)聽眾未正確附加。

使用“元素”選項(xiàng)卡檢查DOM是否與期望匹配。

基本上，調(diào)試是關(guān)於觀察您的代碼的實(shí)際作用，而與您期望的事情。組合console.log ，DEVTOOLS和結(jié)構(gòu)化錯(cuò)誤處理 - 您會(huì)迅速捕獲大多數(shù)錯(cuò)誤。

以上是您如何調(diào)試JavaScript代碼？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！