今天小編給大家分享一下實(shí)用的JavaScript調(diào)試技巧有哪些的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，提供做網(wǎng)站、網(wǎng)站建設(shè)，網(wǎng)頁(yè)設(shè)計(jì)，建網(wǎng)站，PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);可快速的進(jìn)行網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展；專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站，是專業(yè)的做網(wǎng)站團(tuán)隊(duì)，希望更多企業(yè)前來(lái)合作!

作為前端開(kāi)發(fā)，我們會(huì)經(jīng)常使用 console.log() 來(lái)調(diào)試程序中的問(wèn)題。雖然這種方式也能解決一部分問(wèn)題，但是它的效率不如能執(zhí)行逐步調(diào)試的工具。本文就來(lái)學(xué)習(xí)一下如何使用 Google Chrome developer tools 輕松調(diào)試 JavaScript 代碼。

多數(shù)瀏覽器都提供了DevTools 供我們調(diào)試 JavaScript 應(yīng)用程序，并且它們的使用方式類似，只要我們學(xué)會(huì)了如何在一個(gè)瀏覽器上使用調(diào)試工具，就很容易在其他瀏覽器上使用它。

以下就以 Greet Me 程序?yàn)槔?，這個(gè)程序非常簡(jiǎn)單，只需輸入名字和愿望，最后會(huì)輸出一句話：

當(dāng)輸入兩個(gè)表單值之后，“愿望”部分沒(méi)有正確打印，而是打印出了NaN。接下來(lái)，就看看 Chrome DevTools 有什么功能可以調(diào)試定位代碼的問(wèn)題。

一、了解 Sources 面板

DevTools 提供了許多不同的工具供我們進(jìn)行調(diào)試，包括 DOM 檢查、分析和網(wǎng)絡(luò)調(diào)用檢查等。這里要說(shuō)的是 Sources 面板，它可以幫助我們調(diào)試 JavaScript?？梢允褂每旖萱I F12 打開(kāi)控制面板，并單擊 Sources 選項(xiàng)卡以導(dǎo)航到 Sources 面板，也可以直接使用快捷鍵 Command+Option+I（Mac）或 Control+Shift+I（Windows、Linux）來(lái)打開(kāi)。

Sources 面板主要由三個(gè)部分組成：

1. 文件導(dǎo)航區(qū)：頁(yè)面請(qǐng)求的所有文件都會(huì)在此列出；

2. 代碼編輯區(qū)：當(dāng)我們從文件導(dǎo)航欄中選取一個(gè)文件時(shí)，該文件的內(nèi)容就會(huì)在此列出，我們可以在這里編輯代碼；

3. Debugger區(qū)：這里會(huì)有很多工具可以用來(lái)設(shè)置斷點(diǎn)，檢查變量值、觀察執(zhí)行步驟等。

如果 DevTools 窗口較寬或未在單獨(dú)的窗口中打開(kāi)，則調(diào)試器部分將顯示在代碼編輯器的右側(cè)：

二、設(shè)置斷點(diǎn)

要開(kāi)始調(diào)試代碼，首先要做的就是設(shè)置斷點(diǎn)，斷點(diǎn)就是代碼執(zhí)行暫停以便調(diào)試它的邏輯點(diǎn)。

DevTools 允許我們以不同的方式來(lái)設(shè)置斷點(diǎn)：

• 在代碼行；

• 在條件語(yǔ)句中；

• 在 DOM 節(jié)點(diǎn)處；

• 在事件偵聽(tīng)器上。

1. 在代碼行設(shè)置斷點(diǎn)

設(shè)置代碼行斷點(diǎn)的步驟：

• 單擊切換到 Sources 選項(xiàng)卡；

• 從文件導(dǎo)航部分選中需要調(diào)試的源文件；

• 在右側(cè)代碼編輯器區(qū)域找到需要調(diào)試的代碼行；

• 單擊行號(hào)以在行上設(shè)置斷點(diǎn)。

這里就在代碼的第 6 行設(shè)置了一個(gè)斷點(diǎn)，代碼在執(zhí)行到這里時(shí)就會(huì)暫停。

2. 設(shè)置條件斷點(diǎn)

設(shè)置條件斷點(diǎn)的步驟：

• 單擊切換到 Sources 選項(xiàng)卡；

• 從文件導(dǎo)航部分選中需要調(diào)試的源文件；

• 在右側(cè)代碼編輯器區(qū)域找到需要調(diào)試的代碼行；

• 右鍵單擊行號(hào)并選擇"Add conditional breakpoint"來(lái)添加條件斷點(diǎn)：

點(diǎn)擊之后代碼行下方就會(huì)出現(xiàn)一個(gè)對(duì)話框，輸入斷點(diǎn)的條件即可：

按回車鍵（Enter）即可激活斷點(diǎn)，這時(shí)就會(huì)在打斷點(diǎn)行的頂部出現(xiàn)一個(gè)橙色的圖標(biāo)：

當(dāng)print()方法中的name變量值為Joe時(shí)，代碼的執(zhí)行就會(huì)暫停。需要注意，只有我們確定調(diào)試的代碼的大致范圍時(shí)，才會(huì)使用條件斷點(diǎn)。

3. 在事件監(jiān)聽(tīng)器上設(shè)置斷點(diǎn)

在事件監(jiān)聽(tīng)器上設(shè)置斷點(diǎn)的步驟：

• 單擊切換到 Sources 選項(xiàng)卡；

• 在debugger區(qū)域展開(kāi)Event Listener Breakpoints選項(xiàng)；

• 從事件列表中選擇事件監(jiān)聽(tīng)器來(lái)設(shè)置斷點(diǎn)。我們的程序中有一個(gè)按鈕單擊事件，這里就選擇 Mouse 事件選項(xiàng)中的click。

提示：當(dāng)我們想暫停在事件觸發(fā)后運(yùn)行的事件偵聽(tīng)器代碼時(shí)可以使用此選項(xiàng)。

4. 在 DOM 節(jié)點(diǎn)中設(shè)置斷點(diǎn)

DevTools 在 DOM 檢查和調(diào)試方面同樣很強(qiáng)大。當(dāng)在 DOM 中添加、刪除或者修改某些內(nèi)容時(shí)，可以設(shè)置斷點(diǎn)來(lái)暫停代碼的執(zhí)行。

在 DOM 上設(shè)置斷點(diǎn)的步驟：

• 單擊切換到 Elements 選項(xiàng)卡；

• 找到要設(shè)置斷點(diǎn)的元素；

• 右鍵單擊元素以獲得上下文菜單，選擇Break on選項(xiàng)，然后選擇Subtree modifications、Attribute modifications、Node removal中的一個(gè)即可：

這三個(gè)選項(xiàng)的含義如下：

• Subtree modifications：當(dāng)節(jié)點(diǎn)內(nèi)部子節(jié)點(diǎn)變化時(shí)斷點(diǎn)；

• Attribute modifications：當(dāng)節(jié)點(diǎn)屬性發(fā)生變化時(shí)斷點(diǎn)；

• Node removal：當(dāng)節(jié)點(diǎn)被移除時(shí)斷點(diǎn)。

如上圖，我們?cè)谳敵鱿⒌?p 的 DOM 發(fā)生變化時(shí)設(shè)置了一個(gè)斷點(diǎn)。當(dāng)點(diǎn)擊按鈕后，問(wèn)候消息輸出到 p 中，子節(jié)點(diǎn)的內(nèi)容發(fā)生了變化，就會(huì)發(fā)生中斷。

注意：當(dāng)我們懷疑是DOM更改導(dǎo)致了錯(cuò)誤時(shí)，就可以使用該選項(xiàng)，當(dāng) DOM 更改中斷時(shí)，相關(guān)的 JavaScript 代碼執(zhí)行將自動(dòng)暫停。

三、逐步調(diào)試

現(xiàn)在我們知道了設(shè)置斷點(diǎn)的方式。在復(fù)雜的調(diào)試情況下，我們可能需要使用這些調(diào)試的組合。調(diào)試器提供了五個(gè)控件來(lái)逐步執(zhí)行代碼：

下面就分別來(lái)看看這些控制都是如何使用的。

1. 下一步（快捷鍵：F9）

此選項(xiàng)使我們能夠在JavaScript代碼執(zhí)行時(shí)逐行執(zhí)行，如果中途有函數(shù)調(diào)用，單步執(zhí)行也會(huì)進(jìn)入函數(shù)內(nèi)部，逐行執(zhí)行，然后退出。

2. 跳過(guò)（快捷鍵：F10）

此選項(xiàng)允許我們?cè)趫?zhí)行代碼時(shí)跳過(guò)一些代碼。有時(shí)我們可能已經(jīng)確定某些功能是正常的，不想花時(shí)間去檢查它們，就可以使用跳過(guò)選項(xiàng)。

下面就是單步執(zhí)行l(wèi)ogger()函數(shù)時(shí)，會(huì)跳過(guò)函數(shù)的執(zhí)行：

3. 進(jìn)入（快捷鍵：F11）

使用該選項(xiàng)可以更深入地了解函數(shù)。單步執(zhí)行函數(shù)時(shí)，當(dāng)感覺(jué)某個(gè)函數(shù)的行為異常并想檢查它時(shí)，就可以使用這個(gè)選項(xiàng)來(lái)進(jìn)入函數(shù)內(nèi)部并進(jìn)行調(diào)試。

下面就是單步執(zhí)行 logger() 函數(shù):

4. 跳出（快捷鍵：Shift+F11）

在單步執(zhí)行一個(gè)函數(shù)時(shí)，我們可能不想再繼續(xù)執(zhí)行并退出它，就可以使用這些選項(xiàng)退出函數(shù)。

下面就是進(jìn)入了 logger() 函數(shù)內(nèi)部，然后立即退出：

5. 跳轉(zhuǎn)（快捷鍵：F8）

有時(shí)，我們希望從一個(gè)斷點(diǎn)跳轉(zhuǎn)到另一個(gè)斷點(diǎn)，而無(wú)需在它們之間進(jìn)行任何調(diào)試，就可以使用這個(gè)選項(xiàng)來(lái)跳轉(zhuǎn)到下一個(gè)斷點(diǎn)：

四、檢查范圍、調(diào)用堆棧和值

當(dāng)進(jìn)行逐行調(diào)試時(shí)，檢查變量的范圍和值以及函數(shù)調(diào)用的調(diào)用堆棧。在Debugger區(qū)可以這三個(gè)選項(xiàng)：

1. 范圍（Scope）

可以在 Scope 選項(xiàng)中查看局部范圍和全局范圍內(nèi)的內(nèi)容以及變量，還可以看到 this 的實(shí)時(shí)指向：

2. 調(diào)用堆棧

調(diào)用堆棧面板有助于識(shí)別函數(shù)執(zhí)行堆棧：

3. 值

檢查代碼中的值是識(shí)別代碼中錯(cuò)誤的主要方法。在單步執(zhí)行時(shí)，我們只需要將鼠標(biāo)懸停在變量上即可檢查值。

下面可以看到變量 name 在代碼執(zhí)行時(shí)的檢查值：

此外，我們可以選擇打碼的一部分作為表達(dá)式來(lái)檢查值。在下面的例子中，選擇了表達(dá)式document.getElementById('m_wish') 來(lái)檢查值：

4. Watch

Watch 部分允許添加一個(gè)或多個(gè)表達(dá)式，并在執(zhí)行時(shí)監(jiān)視它們的值。當(dāng)我們想在代碼邏輯之外進(jìn)行一些計(jì)算時(shí)，這個(gè)功能非常有用。我們可以組合來(lái)自代碼區(qū)域的任何變量，以形成有效的JavaScript表達(dá)式。在逐步執(zhí)行時(shí)，就能看到表達(dá)式的值。

以下是添加 Watch 的步驟：

1. 單擊 Watch 上的 + 按鈕：

1. 添加要監(jiān)控的表達(dá)式。在這個(gè)例子中，添加了一個(gè)希望觀察其值的變量：

另一種觀察表達(dá)式值的方法是從控制臺(tái)的console中添加：

五、禁用和刪除斷點(diǎn)

可以點(diǎn)擊以下按鈕來(lái)禁用所有的斷點(diǎn)：

注意，上述方法不會(huì)刪除斷點(diǎn)，只會(huì)在暫時(shí)停用它們。要再次激活這些斷點(diǎn)，只需再點(diǎn)一次這個(gè)斷點(diǎn)即可。

通過(guò)取消選中的復(fù)選框，可以從“Breakpoints”面板中刪除一個(gè)或多個(gè)斷點(diǎn)。通過(guò)右鍵單擊并選擇“刪除所有斷點(diǎn)”選項(xiàng)，可以刪除所有斷點(diǎn)：

六、使用 VS Code 調(diào)試 JavaScript

Visual Studio code 中一些實(shí)用的插件可以用于 JavaScript 代碼的調(diào)試?？梢园惭b一個(gè)名為“Debugger for Chrome”的插件來(lái)調(diào)試代碼：

安裝之后，單擊左側(cè)的 run 選項(xiàng)并創(chuàng)建配置以運(yùn)行/調(diào)試 JavaScript 應(yīng)用程序。

這樣就會(huì)創(chuàng)建一個(gè)名為 launch.json 的文件，其中包含一些設(shè)置信息：

{
  "version": "0.2.0",
  "configurations": [
      {
          "type": "chrome",
          "request": "launch",
          "name": "Debug the Greet Me app",
          "url": "<http://localhost:5500>",
          "webRoot": "${workspaceFolder}"
      }
  ]
}

可以修改以下參數(shù)：

• name : 任意名稱；

• url：本地運(yùn)行的 URL；

• webRoot：默認(rèn)值為 ${workspaceFolder}，即當(dāng)前文件夾?？赡軐⑵涓臑?項(xiàng)目入口文件即可。

最后一步是通過(guò)單擊左上角的播放圖標(biāo)開(kāi)始調(diào)試：

這個(gè)調(diào)試器類似于DevTools，主要有以下部分：

1. 啟用調(diào)試。按播放按鈕啟用調(diào)試選項(xiàng)。

2. 用于單步執(zhí)行斷點(diǎn)以及暫?；蛲Ｖ拐{(diào)試的控件。

3. 在源代碼上設(shè)置斷點(diǎn)。

4. 范圍面板查看變量范圍和值。

5. 用于創(chuàng)建和監(jiān)視表達(dá)式的監(jiān)視面板。

6. 執(zhí)行函數(shù)的調(diào)用棧。

7. 要啟用、禁用和刪除的斷點(diǎn)列表。

8. 調(diào)試控制臺(tái)讀取控制臺(tái)日志消息。

最后，回到最開(kāi)始的問(wèn)題，這里不再一步步調(diào)試，通過(guò)上述的調(diào)試方法判定，只需要在 wish 變量前面加一個(gè) + 即可：

const message = 'Hello ' 
                        + name 
                        + ', Your wish `' 
                        + + wish 
                        + '` may come true!';

以上就是“實(shí)用的JavaScript調(diào)試技巧有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章題目：實(shí)用的JavaScript調(diào)試技巧有哪些
新聞來(lái)源：http://jinyejixie.com/article28/pgiocp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、定制開(kāi)發(fā)、網(wǎng)站制作、外貿(mào)建站、品牌網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)