超实用的JavaScript调试技巧(实用软件Json文件查看器)
本篇文章給大家?guī)砹岁P(guān)于javascript中的相關(guān)知識，其中主要介紹了JavaScript的調(diào)試技巧，包括了Sources面板、設(shè)置斷點等相關(guān)問題，希望對大家有幫助。
相關(guān)推薦：javascript視頻教程
作為前端開發(fā)，我們會經(jīng)常使用 console.log() 來調(diào)試程序中的問題。雖然這種方式也能解決一部分問題，但是它的效率不如能執(zhí)行逐步調(diào)試的工具。本文就來學習一下如何使用 Google Chrome developer tools 輕松調(diào)試 JavaScript 代碼。
多數(shù)瀏覽器都提供了DevTools 供我們調(diào)試 JavaScript 應(yīng)用程序，并且它們的使用方式類似，只要我們學會了如何在一個瀏覽器上使用調(diào)試工具，就很容易在其他瀏覽器上使用它。
以下就以 Greet Me 程序為例，這個程序非常簡單，只需輸入名字和愿望，最后會輸出一句話：
當輸入兩個表單值之后，“愿望”部分沒有正確打印，而是打印出了NaN。代碼在線調(diào)試：https://greet-me-debugging.vercel.app/。接下來，就看看 Chrome DevTools 有什么功能可以調(diào)試定位代碼的問題。
一、了解 Sources 面板
DevTools 提供了許多不同的工具供我們進行調(diào)試，包括 DOM 檢查、分析和網(wǎng)絡(luò)調(diào)用檢查等。這里要說的是 Sources 面板，它可以幫助我們調(diào)試 JavaScript。可以使用快捷鍵 F12 打開控制面板，并單擊 Sources 選項卡以導航到 Sources 面板，也可以直接使用快捷鍵 Command+Option+I（Mac）或 Control+Shift+I（Windows、Linux）來打開。
Sources 面板主要由三個部分組成：
-
文件導航區(qū)：頁面請求的所有文件都會在此列出；
-
代碼編輯區(qū)：當我們從文件導航欄中選取一個文件時，該文件的內(nèi)容就會在此列出，我們可以在這里編輯代碼；
-
Debugger區(qū)：這里會有很多工具可以用來設(shè)置斷點，檢查變量值、觀察執(zhí)行步驟等。
如果 DevTools 窗口較寬或未在單獨的窗口中打開，則調(diào)試器部分將顯示在代碼編輯器的右側(cè)：
二、設(shè)置斷點
要開始調(diào)試代碼，首先要做的就是設(shè)置斷點，斷點就是代碼執(zhí)行暫停以便調(diào)試它的邏輯點。
DevTools 允許我們以不同的方式來設(shè)置斷點：
-
在代碼行；
-
在條件語句中；
-
在 DOM 節(jié)點處；
-
在事件偵聽器上。
1. 在代碼行設(shè)置斷點
設(shè)置代碼行斷點的步驟：
-
單擊切換到 Sources 選項卡；
-
從文件導航部分選中需要調(diào)試的源文件；
-
在右側(cè)代碼編輯器區(qū)域找到需要調(diào)試的代碼行；
-
單擊行號以在行上設(shè)置斷點。
這里就在代碼的第 6 行設(shè)置了一個斷點，代碼在執(zhí)行到這里時就會暫停。
2. 設(shè)置條件斷點
設(shè)置條件斷點的步驟：
-
單擊切換到 Sources 選項卡；
-
從文件導航部分選中需要調(diào)試的源文件；
-
在右側(cè)代碼編輯器區(qū)域找到需要調(diào)試的代碼行；
-
右鍵單擊行號并選擇"Add conditional breakpoint"來添加條件斷點：
點擊之后代碼行下方就會出現(xiàn)一個對話框，輸入斷點的條件即可：
按回車鍵（Enter）即可激活斷點，這時就會在打斷點行的頂部出現(xiàn)一個橙色的圖標：
當print()方法中的name變量值為Joe時，代碼的執(zhí)行就會暫停。需要注意，只有我們確定調(diào)試的代碼的大致范圍時，才會使用條件斷點。
3. 在事件監(jiān)聽器上設(shè)置斷點
在事件監(jiān)聽器上設(shè)置斷點的步驟：
-
單擊切換到 Sources 選項卡；
-
在debugger區(qū)域展開Event Listener Breakpoints選項；
-
從事件列表中選擇事件監(jiān)聽器來設(shè)置斷點。我們的程序中有一個按鈕單擊事件，這里就選擇 Mouse 事件選項中的click。
提示：當我們想暫停在事件觸發(fā)后運行的事件偵聽器代碼時可以使用此選項。
4. 在 DOM 節(jié)點中設(shè)置斷點
DevTools 在 DOM 檢查和調(diào)試方面同樣很強大。當在 DOM 中添加、刪除或者修改某些內(nèi)容時，可以設(shè)置斷點來暫停代碼的執(zhí)行。
在 DOM 上設(shè)置斷點的步驟：
-
單擊切換到 Elements 選項卡；
-
找到要設(shè)置斷點的元素；
-
右鍵單擊元素以獲得上下文菜單，選擇Break on選項，然后選擇Subtree modifications、Attribute modifications、Node removal中的一個即可：
這三個選項的含義如下：
-
Subtree modifications：當節(jié)點內(nèi)部子節(jié)點變化時斷點；
-
Attribute modifications：當節(jié)點屬性發(fā)生變化時斷點；
-
Node removal：當節(jié)點被移除時斷點。
如上圖，我們在輸出消息的 p 的 DOM 發(fā)生變化時設(shè)置了一個斷點。當點擊按鈕后，問候消息輸出到 p 中，子節(jié)點的內(nèi)容發(fā)生了變化，就會發(fā)生中斷。
注意： 當我們懷疑是DOM更改導致了錯誤時，就可以使用該選項，當 DOM 更改中斷時，相關(guān)的 JavaScript 代碼執(zhí)行將自動暫停。
三、逐步調(diào)試
現(xiàn)在我們知道了設(shè)置斷點的方式。在復(fù)雜的調(diào)試情況下，我們可能需要使用這些調(diào)試的組合。調(diào)試器提供了五個控件來逐步執(zhí)行代碼：
下面就分別來看看這些控制都是如何使用的。
1. 下一步（快捷鍵：F9）
此選項使我們能夠在JavaScript代碼執(zhí)行時逐行執(zhí)行，如果中途有函數(shù)調(diào)用，單步執(zhí)行也會進入函數(shù)內(nèi)部，逐行執(zhí)行，然后退出。
2. 跳過（快捷鍵：F10）
此選項允許我們在執(zhí)行代碼時跳過一些代碼。有時我們可能已經(jīng)確定某些功能是正常的，不想花時間去檢查它們，就可以使用跳過選項。
下面就是單步執(zhí)行l(wèi)ogger()函數(shù)時，會跳過函數(shù)的執(zhí)行：
3. 進入（快捷鍵：F11）
使用該選項可以更深入地了解函數(shù)。單步執(zhí)行函數(shù)時，當感覺某個函數(shù)的行為異常并想檢查它時，就可以使用這個選項來進入函數(shù)內(nèi)部并進行調(diào)試。
下面就是單步執(zhí)行 logger() 函數(shù):
4. 跳出（快捷鍵：Shift+F11）
在單步執(zhí)行一個函數(shù)時，我們可能不想再繼續(xù)執(zhí)行并退出它，就可以使用這些選項退出函數(shù)。
下面就是進入了 logger() 函數(shù)內(nèi)部，然后立即退出：
5. 跳轉(zhuǎn)（快捷鍵：F8）
有時，我們希望從一個斷點跳轉(zhuǎn)到另一個斷點，而無需在它們之間進行任何調(diào)試，就可以使用這個選項來跳轉(zhuǎn)到下一個斷點：
四、檢查范圍、調(diào)用堆棧和值
當進行逐行調(diào)試時，檢查變量的范圍和值以及函數(shù)調(diào)用的調(diào)用堆棧。在Debugger區(qū)可以這三個選項：
1. 范圍（Scope）
可以在 Scope 選項中查看局部范圍和全局范圍內(nèi)的內(nèi)容以及變量，還可以看到 this 的實時指向：
2. 調(diào)用堆棧
調(diào)用堆棧面板有助于識別函數(shù)執(zhí)行堆棧：
3. 值
檢查代碼中的值是識別代碼中錯誤的主要方法。在單步執(zhí)行時，我們只需要將鼠標懸停在變量上即可檢查值。
下面可以看到變量 name 在代碼執(zhí)行時的檢查值：
此外，我們可以選擇打碼的一部分作為表達式來檢查值。在下面的例子中，選擇了表達式document.getElementById('m_wish') 來檢查值：
4. Watch
Watch 部分允許添加一個或多個表達式，并在執(zhí)行時監(jiān)視它們的值。當我們想在代碼邏輯之外進行一些計算時，這個功能非常有用。我們可以組合來自代碼區(qū)域的任何變量，以形成有效的JavaScript表達式。在逐步執(zhí)行時，就能看到表達式的值。
以下是添加 Watch 的步驟：
-
單擊 Watch 上的 + 按鈕：
-
添加要監(jiān)控的表達式。在這個例子中，添加了一個希望觀察其值的變量：
另一種觀察表達式值的方法是從控制臺的console中添加：
五、禁用和刪除斷點
可以點擊以下按鈕來禁用所有的斷點：
注意，上述方法不會刪除斷點，只會在暫時停用它們。要再次激活這些斷點，只需再點一次這個斷點即可。
通過取消選中的復(fù)選框，可以從“Breakpoints”面板中刪除一個或多個斷點。通過右鍵單擊并選擇“刪除所有斷點”選項，可以刪除所有斷點：
六、使用 VS Code 調(diào)試 JavaScript
Visual Studio code 中一些實用的插件可以用于 JavaScript 代碼的調(diào)試。可以安裝一個名為“Debugger for Chrome”的插件來調(diào)試代碼：
安裝之后，單擊左側(cè)的 run 選項并創(chuàng)建配置以運行/調(diào)試 JavaScript 應(yīng)用程序。
這樣就會創(chuàng)建一個名為 launch.json 的文件，其中包含一些設(shè)置信息：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Debug the Greet Me app",
"url": "<http://localhost:5500>",
"webRoot": "${workspaceFolder}"
}
]
}
登錄后復(fù)制
可以修改以下參數(shù)：
-
name : 任意名稱；
-
url：本地運行的 URL；
-
webRoot：默認值為 ${workspaceFolder}，即當前文件夾。可能將其更改為 項目入口文件即可。
最后一步是通過單擊左上角的播放圖標開始調(diào)試：
這個調(diào)試器類似于DevTools，主要有以下部分：
-
啟用調(diào)試。按播放按鈕啟用調(diào)試選項。
-
用于單步執(zhí)行斷點以及暫停或停止調(diào)試的控件。
-
在源代碼上設(shè)置斷點。
-
范圍面板查看變量范圍和值。
-
用于創(chuàng)建和監(jiān)視表達式的監(jiān)視面板。
-
執(zhí)行函數(shù)的調(diào)用棧。
-
要啟用、禁用和刪除的斷點列表。
-
調(diào)試控制臺讀取控制臺日志消息。
最后，回到最開始的問題，這里不再一步步調(diào)試，通過上述的調(diào)試方法判定，只需要在 wish 變量前面加一個 + 即可：
const message = 'Hello '
+ name
+ ', Your wish `'
+ + wish
+ '` may come true!';
登錄后復(fù)制
相關(guān)推薦：javascript學習教程
以上就是超實用的JavaScript調(diào)試技巧的詳細內(nèi)容，更多請關(guān)注風君子博客其它相關(guān)文章！
總結(jié)
以上是生活随笔為你收集整理的超实用的JavaScript调试技巧(实用软件Json文件查看器)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php写接口多页面,PHP开发很火的随机
- 下一篇： luxe巨幕和imax区别