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

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

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

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

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

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

專家提示：使用標(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)試器）選項卡。
• 通過單擊行號查找JavaScript文件并設(shè)置斷點。
• 當(dāng)代碼運行時，它會在斷點處暫停。
• 使用控件逐步瀏覽代碼：
  • 一步
  • 介入
  • 繼續(xù)執(zhí)行
• 實時檢查變量和呼叫堆棧。

您也可以：

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

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

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

使用try...catch塊以捕獲運行時錯誤：

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

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

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

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

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

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

 npx eslint your-file.js

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

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

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

功能processuser（用戶）{
  調(diào)試器;
  返回user.name.touppercase（）;
}

就像一個斷點，您可以快速切換。

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

有時該錯誤不在JavaScript邏輯中，而是在：

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

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

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

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