、在 Chrome 中調試

調試 是指在一個腳本中找出并修復錯誤的過程。所有的現代瀏覽器和大多數其他環境都支持調試工具 —— 開發者工具中的一個令調試更加容易的特殊用戶界面。它也可以讓我們一步步地跟蹤代碼以查看當前實際運行情況。

在這里我們將會使用 Chrome（谷歌瀏覽器），因為它擁有足夠多的功能，其他大部分瀏覽器的功能也與之類似。

二、“資源（Sources）”面板

你的 Chrome 版本可能看起來有一點不同，但是它應該還是處于很明顯的位置。

• 在 Chrome 中打開 示例頁面。
• 使用快捷鍵 F12（Mac：Cmd+Opt+I）打開開發者工具。
• 選擇 Sources（資源） 面板。

如果你是第一次這么做，那你應該會看到下面這個樣子：

點擊箭頭所指向得切換按鈕 會打開文件列表的選項卡。

讓我們在預覽樹中點擊和選擇 hello.js。這里應該會如下圖所示：

資源（Sources）面板包含三個部分：

1. 文件導航（File Navigator） 區域列出了 HTML、JavaScript、CSS 和包括圖片在內的其他依附于此頁面的文件。Chrome 擴展程序也會顯示在這。
2. 代碼編輯（Code Editor） 區域展示源碼。
3. JavaScript 調試（JavaScript Debugging） 區域是用于調試的，我們很快就會來探索它。

現在你可以再次點擊切換按鈕 隱藏資源列表來給代碼騰出一些空間。

三、控制臺（Console）

如果我們按下 Esc，下面會出現一個控制臺，我們可以輸入一些命令然后按下 Enter 來執行。

語句執行完畢之后，其執行結果會顯示在下面。

例如，1+2 將會返回 3，hello("debugger") 函數什么也不返回，因此結果是 undefined：

四、斷點（Breakpoints）

我們來看看 示例頁面 發生了什么。在 hello.js 中，點擊第 4 行。是的，就點擊數字 "4" 上，不是點擊代碼。

恭喜你！你已經設置了一個斷點。現在，請在第 8 行的數字上也點擊一下。

看起來應該是這樣的（藍色是你應該點擊的地方）：

斷點 是調試器會自動暫停 JavaScript 執行的地方。

當代碼被暫停時，我們可以檢查當前的變量，在控制臺執行命令等等。換句話說，我們可以調試它。

我們總是可以在右側的面板中找到斷點的列表。當我們在數個文件中有許多斷點時，這是非常有用的。它允許我們：

• 快速跳轉至代碼中的斷點（通過點擊右側面板中的對應的斷點）。
• 通過取消選中斷點來臨時禁用對應的斷點。
• 通過右鍵單擊并選擇移除來刪除一個斷點。
• ……等等。

條件斷點 Conditional breakpoints

在行號上 右鍵單擊 允許你創建一個 條件 斷點。只有當給定的表達式為真（即滿足條件）時才會被觸發。

當我們需要在特定的變量值或參數的情況下暫停程序執行時，這種調試方法就很有用了。

五、Debugger 命令

我們也可以使用 debugger 命令來暫停代碼，像這樣：

function hello(name) {
  let phrase=`Hello, ${name}!`;

  debugger;  // <-- 調試器會在這停止

  say(phrase);
}

當我們在一個代碼編輯器中并且不想切換到瀏覽器在開發者工具中查找腳本來設置斷點時，這非常方便。

六、暫停并查看

在我們的例子中，hello() 函數在頁面加載期間被調用，因此激活調試器的最簡單的方法（在我們已經設置了斷點后）就是 —— 重新加載頁面。因此讓我們按下 F5（Windows，Linux）或 Cmd+R（Mac）吧。

設置斷點之后，程序會在第 4 行暫停執行：

請打開右側的信息下拉列表（箭頭指示出的地方）。這里允許你查看當前的代碼狀態：

1. 察看（Watch） —— 顯示任意表達式的當前值。你可以點擊加號 + 然后輸入一個表達式。調試器將隨時顯示它的值，并在執行過程中自動重新計算該表達式。
2. 調用棧（Call Stack） —— 顯示嵌套的調用鏈。此時，調試器正在 hello() 的調用鏈中，被 index.html 中的一個腳本調用（這里沒有函數，因此顯示 “anonymous”）如果你點擊了一個堆棧項，調試器將跳到對應的代碼處，并且還可以查看其所有變量。
3. 作用域（Scope） —— 顯示當前的變量。Local 顯示當前函數中的變量，你還可以在源代碼中看到它們的值高亮顯示了出來。Global 顯示全局變量（不在任何函數中）。這里還有一個 this 關鍵字，目前我們還沒有學到它，不過我們很快就會學習它了。

七、跟蹤執行

現在是 跟蹤 腳本的時候了。

在右側面板的頂部是一些關于跟蹤腳本的按鈕。讓我們來使用它們吧。

—— “恢復（Resume）”：繼續執行，快捷鍵 F8。

繼續執行。如果沒有其他的斷點，那么程序就會繼續執行，并且調試器不會再控制程序。

我們點擊它一下之后，我們會看到這樣的情況：

執行恢復了，執行到 say() 函數中的另外一個斷點后暫停在了那里。看一下右邊的 “Call stack”。它已經增加了一個調用信息。我們現在在 say() 里面。

—— “下一步（Step）”：運行下一條指令，快捷鍵 F9。

運行下一條語句。如果我們現在點擊它，alert 會被顯示出來。

一次接一次地點擊此按鈕，整個腳本的所有語句會被逐個執行。

—— “跨步（Step over）”：運行下一條指令，但 不會進入到一個函數中，快捷鍵 F10。

跟上一條命令“下一步（Step）”類似，但如果下一條語句是函數調用則表現不同。這里的函數指的是：不是內置的如 alert 函數等，而是我們自己寫的函數。

“下一步（Step）”命令進入函數內部并在第一行暫停執行，而“跨步（Step over）”在無形中執行函數調用，跳過了函數的內部。

執行會在該函數執行后立即暫停。

如果我們對該函數的內部執行不感興趣，這命令會很有用。

—— “步入（Step into）”，快捷鍵 F11。

和“下一步（Step）”類似，但在異步函數調用情況下表現不同。如果你剛剛才開始學 JavaScript，那么你可以先忽略此差異，因為我們還沒有用到異步調用。

至于之后，只需要記住“下一步（Step）”命令會忽略異步行為，例如 setTimeout（計劃的函數調用），它會過一段時間再執行。而“步入（Step into）”會進入到代碼中并等待（如果需要）。詳見 DevTools 手冊。

—— “步出（Step out）”：繼續執行到當前函數的末尾，快捷鍵 Shift+F11。

繼續執行代碼并停止在當前函數的最后一行。當我們使用 偶然地進入到一個嵌套調用，但是我們又對這個函數不感興趣時，我們想要盡可能的繼續執行到最后的時候是非常方便的。

—— 啟用/禁用所有的斷點。

這個按鈕不會影響程序的執行。只是一個批量操作斷點的開/關。

—— 啟用/禁用出現錯誤時自動暫停腳本執行。

當啟動此功能并且開發者工具是打開著的時候，任何一個腳本的錯誤都會導致該腳本執行自動暫停。然后我們可以分析變量來看一下什么出錯了。因此如果我們的腳本因為錯誤掛掉的時候，我們可以打開調試器，啟用這個選項然后重載頁面，查看一下哪里導致它掛掉了和當時的上下文是什么。

Continue to here

在代碼中的某一行上右鍵，在顯示的關聯菜單（context menu）中點擊一個非常有用的名為 “Continue to here” 的選項。

當你想要向前移動很多步到某一行為止，但是又懶得設置一個斷點時非常的方便。

八、日志記錄

想要輸出一些東西到控制臺上？console.log 函數可以滿足你。

例如：將從 0 到 4 的值輸出到控制臺上：

// 打開控制臺來查看
for (let i=0; i < 5; i++) {
  console.log("value", i);
}

普通用戶看不到這個輸出，它是在控制臺里面的。要想看到它 —— 要么打開開發者工具中的 Console（控制臺）選項卡，要么在一個其他的選項卡中按下 Esc：這會在下方打開一個控制臺。

如果我們在代碼中有足夠的日志記錄，那么我們可以從記錄中看到剛剛發生了什么，而不需要借助調試器。

九、總結

我們可以看到，這里有 3 種方式來暫停一個腳本：

1. 一個斷點。
2. debugger 語句。
3. 一個錯誤（如果開發者工具是打開狀態，并且按鈕 是開啟的狀態）。

當腳本執行暫停時，我們就可以進行調試 —— 檢查變量，跟蹤代碼來查看執行出錯的位置。

開發人員工具中的選項比本文介紹的多得多。完整的手冊，請搜索chrome-devtools。

本章節的內容足夠讓你上手代碼調試了，但是之后，尤其是你做了大量關于瀏覽器的東西后，推薦你查看上面開發者工具更高級的功能。

對了，你也可以點擊開發者工具中的其他地方來看一下會顯示什么。這可能是你學習開發者工具最快的方式了。不要忘了還有右鍵單擊和關聯菜單喲。

avaScript調試是業內公認的難題。但一旦你掌握技巧，了解了工具本身，便能節省一大把時間。以下16條調試技巧，可供您在下次調試JavaScript代碼時使用！

這些技巧大多數都適用于Chrome和Firefox，許多技巧也可以與其他檢查員一起使用。另外，如果您想更快地找到JavaScript錯誤，請嘗試Raygun Crash Reporting，它會提醒您注意錯誤并提供堆棧跟蹤。

1、調試器

在console.log之后，調試器是我最喜歡的快速調試工具。如果放置調試器，在您的代碼行中，Chrome將在執行時自動在那里停止，您甚至可以將其包裝在條件句中，因此它僅在需要時運行。

2、將對象顯示為表格

有時，您要查看一組復雜的對象。您可以console.log它們并在列表中滾動，也可以使用console.table幫助器。它使您更輕松地查看正在處理的內容！

將輸出：

3、嘗試所有尺寸

雖然桌上有每個移動設備都很棒，但在現實世界中這是不可行的。如何調整視口的大小呢？Chrome為您提供所需的一切。跳到檢查器中，然后單擊切換設備模式 按鈕。觀看您的媒體查詢成真！

4、如何快速找到您的DOM元素

在元素面板中標記一個DOM元素，然后在控制臺中使用它。Chrome瀏覽器檢查器會保留其歷史記錄中的最后五個元素，以便最后標記的元素顯示為$ 0，倒數第二個標記的元素為$ 1，依此類推。

如果按照“ item-4”，“ item-3”，“ item-2”，“ item-1”，“ item-0”的順序標記以下項，則可以在控制臺中訪問這樣的DOM節點：

5、使用console.time（）和console.timeEnd（）進行基準循環

確切地知道執行某項操作要花多長時間可能特別有用，尤其是在調試慢循環時。您甚至可以通過為方法分配標簽來設置多個計時器。讓我們看看它是如何工作的：

將輸出：

6、獲取函數的堆棧跟蹤

您可能知道JavaScript框架可以快速生成大量代碼。

您將擁有很多視圖并觸發許多事件，因此最終您將遇到一種情況，您想知道是什么導致了特定的函數調用。由于JavaScript不是一種結構化的語言，因此有時可能難以掌握發生的情況和時間。

這是當console.trace（或只是在控制臺中的跟蹤）派上用場時才能調試JavaScript的時候。想象一下，您想在car實例中看到函數調用funcZ的整個堆棧跟蹤：

將輸出：

現在我們可以看到func1叫做func2，它叫做func4。然后Func4 創建Car的實例，然后調用函數car.funcX，依此類推。即使您認為自己非常了解腳本，這仍然非常方便。假設您要改善代碼。獲取跟蹤和所有相關功能的詳細列表。每一個都可以單擊，現在您可以在它們之間來回切換。就像一個菜單只適合您。

7、最小化代碼是調試JavaScript的簡便方法

有時您可能在生產中遇到問題，而源映射并沒有完全到達服務器。不要害怕。Chrome可以將您的Javascript文件縮小為更易于閱讀的格式。該代碼不會像您的實際代碼那樣有用-但至少您可以看到正在發生的事情。單擊檢查器中源查看器下方的{}漂亮打印按鈕。

8、快速找到要調試的功能

比方說，你要設置一個斷點在function.The兩種最常見的方式做到這一點是：

1.找到你檢查線路，并添加一個斷點

2.在腳本中添加調試器

在這兩種解決方案，您必須手動瀏覽文件以隔離要調試的特定行。可能不太常見的是使用控制臺。在控制臺中使用debug（funcName），當腳本達到您傳遞的功能時，腳本將停止。

它很快，但是缺點是它不適用于私有或匿名函數。否則，這可能是找到要調試的函數的最快方法。（注意：盡管命名類似，但有一個名為console.debug的函數不是同一回事。）

在控制臺中鍵入debug（car.funcY），當腳本獲得對car.funcY的函數調用時，該腳本將在調試模式下停止：

9、不相關的黑匣子腳本

今天，我們的Web應用程序上經常有一些庫和框架。它們中的大多數都經過了良好的測試，并且相對沒有錯誤。

但是，調試器仍會進入與此調試任務無關的所有文件。解決方案是將不需要調試的腳本黑框。這可能還包括您自己的腳本。在本文中閱讀有關調試黑匣子的更多信息。

10、查找復雜調試中的重要內容

在更復雜的調試中，有時我們希望輸出許多行。要使輸出保持更好的結構，您可以做的一件事是使用更多控制臺功能，例如console.log，console.debug，console.warn，console.info，console.error等。

然后，您可以在檢查器中過濾它們。有時，當您需要調試JavaScript時，這并不是您真正想要的。如果愿意，您可以發揮創意并設置信息樣式。要調試JavaScript時，請使用CSS并制作自己的結構化控制臺消息：

將輸出：

在console.log（）中，您可以將％s設置為字符串，將％i設置為整數，并將％c設置為自定義樣式。您可能會找到使用這些樣式的更好方法。如果使用單個頁面框架，則可能需要一種樣式用于查看消息，而另一種樣式用于模型，集合，控制器等。

11、觀察特定的函數調用和參數

在Chrome控制臺中，您可以關注特定功能。每次調用該函數時，都會使用傳入的值進行記錄。

將輸出：

這是查看將哪些參數傳遞給函數的好方法。理想情況下，控制臺可以告訴您期望多少個參數，但是不能。在上面的示例中，func1需要三個參數，但僅傳入兩個參數。如果代碼中未對此進行處理，則可能導致錯誤。

12、快速訪問控制臺中的元素

在控制臺中執行querySelector的更快方法是使用美元符號。$（'css-selector'）將返回CSS選擇器的第一個匹配項。$$（'css-selector'）將全部返回。如果您多次使用某個元素，則值得將其另存為變量。

13、Postman很棒（但是Firefox更快）

許多開發人員正在使用Postman來處理Ajax請求。Postman非常出色，但是打開一個新的瀏覽器窗口，編寫新的請求對象然后進行測試可能會有些煩人。

有時使用瀏覽器會更容易。當您這樣做時，如果您要發送到密碼安全頁面，則不再需要擔心身份驗證cookie。

這是您在Firefox中編輯和重新發送請求的方式。打開檢查器，然后轉到“網絡”選項卡。右鍵單擊所需的請求，然后選擇“編輯并重新發送”。

現在，您可以更改任何所需的內容。更改標題并編輯參數，然后單擊重新發送。

下面，我兩次提出一個具有不同屬性的請求：

14、中斷節點更改

DOM可能很有趣。有時情況會發生變化，而您不知道為什么。但是，當您需要調試JavaScript時，Chrome可讓您在DOM元素更改時暫停。

您甚至可以監視其屬性。在Chrome Inspector中，右鍵單擊該元素，然后選擇要使用的設置中斷：

15、使用頁面速度服務

有很多服務和工具可用于審核頁面的JavaScript，并幫助您發現速度下降或問題。這些工具之一是Raygun Real User Monitoring。

除了查找JavaScript問題外，這還可能因其他原因而有用-加載外部腳本緩慢，不必要的CSS，圖像過大。它可以幫助您了解導致意外加載時間過長或無法正確執行的JavaScript問題。

您還可以衡量JavaScript性能的改進并隨時間進行跟蹤。

16、到處都有斷點

最后，久經考驗的真正斷點可以成功。嘗試針對不同情況以不同方式使用斷點。

您可以單擊一個元素并設置一個斷點，以在修改某個元素時停止執行。您還可以進入開發人員工具中的“調試器”選項卡或“源”選項卡（取決于瀏覽器），并為任何特定源設置XHR斷點以在Ajax請求上停止。

在同一位置，還可以讓它在發生異常時暫停代碼執行。您可以在瀏覽器工具中使用這些各種類型的斷點，以最大程度地發現錯誤，而不必花費時間在外部工具集上。

*本文翻譯自https://raygun.com/learn/javascript-debugging-tips?utm_medium=newsletter&utm_source=javascriptweekly&utm_campaign=cooperpress&utm_content=article，如有侵權請聯系刪除

了調試Javascript編碼，JavaScript 有很多種調試器可供使用，以下是其中幾個常用的調試器：

• Chrome DevTools：這是一個由 Google 開發的調試器，可以在 Chrome 瀏覽器中使用。它提供了一整套調試工具，包括查看代碼、斷點調試、監視變量、網絡監控等功能。

• Firefox Developer Tools：這是一個由 Mozilla 開發的調試器，可以在 Firefox 瀏覽器中使用。它的功能和 Chrome DevTools 類似，包括查看代碼、斷點調試、監視變量、網絡監控等功能。

• Visual Studio Code：這是一個由 Microsoft 開發的代碼編輯器，內置了一個調試器。它可以用來調試 JavaScript 代碼以及其他語言的代碼，包括 Node.js、TypeScript、Python 等等。

• Node.js 自帶的調試器：如果你使用 Node.js 來運行 JavaScript 代碼，那么可以使用 Node.js 自帶的調試器。它提供了一些命令行工具，可以用來設置斷點、查看變量等等。

以上是幾個常用的 JavaScript 調試器，你可以根據自己的需要選擇使用。也可以自編一個簡單的Javascript代碼調試器，這樣可以方便地插入自編的網頁中。

1、Javascript調試器自編代碼

<!DOCTYPE html>
<html>
<head>
<title>銀河統計</title>
<meta content="text/html; charset=UTF-8">
<style>
<!--
//-->
</style>
</head>
<body>
<img id="myLogo" style="width:120px; padding:0px; margin:5px;" img src="http://www.galaxystatistics.com/webTJX/mobile/logo1.png"/>
<div style="margin-left:1em;">
<a href="#" onclick="eval(document.getElementById('oCode').value)" style="margin-left:2em; font-size:14pt;">點擊運行代碼窗口</a>
<center>
<textarea id="oCode" style="width:94%; height:300px; border:1px solid #555555; text-align:left; padding-left:5px;">
console.clear();
let a1=1; b1=-2; c1=-1;
let a2=2; b2=1; c2=1;
let v=a1*b2-a2*b1;
if (v==0) {
		console.log("無解");
} else {
    x=(b2*c1-b1*c2)/v;
    y=(a1*c2-a2*c1)/v;
    console.log("x="+x+"; y="+y);
}
</textarea><br/>
</center>
<div style="color:#ff5555; width:98%; text-align:center;">文本編輯快捷鍵：Ctrl+A - 全選；Ctrl+C - 復制； Ctrl+X - 剪切；Ctrl+V - 粘貼</div><p/>
</div>
<i>注：Console對象用于JavaScript調試，為了顯示Console.log輸出結果，通過按Control+Shift+i（PC平臺）來打開Console窗口</i>
</body></html>

網頁代碼代碼運行效果如下：

2、console對象常用方法

JavaScript 中的 console 是一個對象，它提供了一些方法用于向控制臺輸出信息。控制臺是一個在瀏覽器 環境中提供的命令行界面，可以用來顯示程序的輸出信息以及調試信息。

Console對象用于JavaScript調試，為了顯示Console.log輸出結果，通過按【Control+Shift+i】（PC平臺）來打開Console窗口。如圖：

常用的 console 方法：

• console..clear()：清空控制臺信息；
• console.log()：向控制臺輸出普通信息，通常用于調試和輸出程序的運行狀態；
• console.error()：向控制臺輸出錯誤信息，通常用于捕捉和顯示程序的錯誤信息；
• console.warn()：向控制臺輸出警告信息，通常用于顯示程序的警告信息；
• console.info()：向控制臺輸出信息，通常用于顯示一些額外的信息。；
• console.table()：以表格形式輸出一個數組或者對象的屬性；
• console.time() 和 console.timeEnd()：用于計算程序執行時間，可以用來優化程序性能；
• console.group() 和 console.groupEnd()：用于將輸出信息分組顯示，方便查看。

以上是 console 對象的一些常用方法，使用這些方法可以方便地在控制臺中輸出調試信息，幫助開發者調試程序和解決問題。

本文介紹的Javascript調試器自編代碼可以隨時插入各類網頁中。以下是進一步精簡的代碼片段：

<div style="margin-left:1em;">
<a href="#" onclick="eval(document.getElementById('oCode').value)">點擊運行代碼窗口</a>
<textarea id="oCode" style="width:94%; height:300px; text-align:left; padding-left:5px;">
console.clear();
//代碼塊
console.log();
}
</textarea><br/>
</center>
<div style="color:#ff5555; width:98%; text-align:center;">文本編輯快捷鍵：Ctrl+A - 全選；Ctrl+C - 復制； Ctrl+X - 剪切；Ctrl+V - 粘貼</div>
</div>

通常將這段代碼復制到網絡統計學網頁后面，這樣就可以隨時調試網頁中介紹的代碼。