調(diào)試JavaScript的技巧有哪些

本篇內(nèi)容介紹了“調(diào)試JavaScript的技巧有哪些”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1. 自動斷點

有時候在執(zhí)行 JavaScript 代碼的時候，可能來不及設(shè)置斷點，代碼就被執(zhí)行了，其實可以通過在代碼中寫上 debugger(代碼中第 8  行)，讓代碼執(zhí)行到 debugger 的位置自動暫停。

function a() {     console.log('enter a');     b(); }  function b() {     console.log('enter b');     debugger;     c(); }  function c() {     console.log('enter c'); }  a();

2. 手動斷點

斷點是程序員調(diào)試代碼時非常好用的利器，通過斷點調(diào)試可以看到當(dāng)前執(zhí)行環(huán)境中各個變量的值，以及調(diào)用堆棧，通過單步執(zhí)行來查看各個步驟下代碼的運行狀態(tài)。如圖所示(Chrome  調(diào)試面板 -> sources -> 點擊代碼行號即可添加斷點)：

3. 打印調(diào)用堆棧

可以通過調(diào)試面板查看當(dāng)前代碼的調(diào)用堆棧，也可以通過 console.trace() 打印函數(shù)調(diào)用堆棧，下面代碼第 13 行。

4. 以表格的方式打印對象

下面是一個對象，可以通過 console.table( obj ) 來打印這個對象。

let pkg = {     "name": "mini_tools",     "version": "1.0.0",     "description": "",     "main": "index.js",     "dependencies": {         "jquery": "^1.12.4"     },     "devDependencies": {},     "scripts": {         "test": "echo \"Error: no test specified\" && exit 1"     },     "author": "",     "license": "ISC" };  console.table(pkg);

打印結(jié)果如圖所示：

“調(diào)試JavaScript的技巧有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！