技術領域總是充滿著神祕的未知和挑戰，有趣又令人不能自拔。就像 Java，即使是每天使用它進行開發互動的開發人員，而語言的某些部分仍然未被開發。

瞭解工具可以使工具最大限度的幫助你完成任務。儘管Java的除錯非常麻煩，但在掌握了技巧 (tricks) 的情況下，依然可以用盡量少的的時間解決這些錯誤 (errors) 和問題 (bugs) 。

下面小編列出了14個關於Java的除錯技巧。雖然除錯技巧也可以用在別的檢查工具上，但大部分的技巧還是用在 Chrome Inspector 和 Firefox 上的。

1. ‘debugger;’

‘debugger’ 是 console.log 之外最好的除錯工具，簡單暴力。只要把它寫到程式碼裡，Chrome 執行的時候就會自動自動停在那。甚至可以用條件語句把它包裹起來，這樣就可以在需要的時候才執行它。也是一款非常好用的除錯工具了。

1. if (thisThing) {
2.  debugger;
3.  }

2. 把 objects 輸出成表格

很多的時候，你可能會有一堆物件需要檢視。可以用console.log把每一個物件都輸出出來，也可以用console.table語句直接把所有的物件都直接輸出成為一個表格。demo如下： nainaitea.com

1. var animals = [
2.  { animal: 'Horse', name: 'Henry', age: 43 },
3.  { animal: 'Dog', name: 'Fred', age: 13 },
4.  { animal: 'Cat', name: 'Frodo', age: 18 }
5.  ];
6.  console.table(animals);

輸出結果：

3. 試遍所有的尺寸

雖然把各種各樣的手機都擺在桌子上看起來很酷，但卻很不現實。但是，瀏覽器內卻提供了你所需要的一切。進入檢查面板點選“切換裝置模式”按鈕。這樣，就可以在視窗內調整視窗的大小。

4. 如何快速定位 DOM 元素

在元素面板上標記一個 DOM 元素並在 concole 中使用它。Chrome Inspector 的歷史記錄儲存最近的五個元素，最後被標記的元素記為 $0，倒數第二個被標記的記為 $1，以此類推。

如果你像下面那樣把元素按順序標記為 ‘item-4′, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’ ，你就可以在 concole 中獲取到 DOM 節點：

5. 用 console.time() 和 console.timeEnd() 測試迴圈耗時

當你想知道某些程式碼的執行時間的時候這個工具將會非常有用，特別是當你定位很耗時的迴圈的時候。你甚至可以通過標籤來設定多個 timer 。demo 如下：

1. console.time('Timer1');
2.  var items = [];
3.  for(var i = 0; i < 100000; i++){
4.  items.push({index: i});
5.  }
6.  console.timeEnd('Timer1');

執行結果：

6.獲取函式的堆疊軌跡資訊

在使用Java框架的時候會產生很多的程式碼。

它建立檢視觸發事件而且最終會想知道函式呼叫是怎麼發生的。

因為 Java 不是一個很結構化的語言，有時候很難完整的瞭解到底發生了什麼以及什麼時候發生的。 這個時候就輪到 console.trace（在終端的話就只有 trace ）出場來除錯 Java了 。

假設現在想看 car 例項在第33行呼叫 funcZ 函式的完整堆疊軌跡資訊:

1. var car;
2.  var func1 = function() {
3.  func2();
4.  }
5.  var func2 = function() {
6.  func4();
7.  }
8.  var func3 = function() {
9.  }
10.  var func4 = function() {
11.  car = new Car();
12.  car.funcX();
13.  }
14.  var Car = function() {
15.  this.brand = ‘volvo’;
16.  this.color = ‘red’;
17.  this.funcX = function() {
18.  this.funcY();
19.  }
20.  this.funcY = function() {
21.  this.funcZ();
22.  }
23.  this.funcZ = function() {
24.  console.trace(‘trace car’)
25.  }
26.  }
27.  func1();
28.  var car;
29.  var func1 = function() {
30.  func2();
31.  }
32.  var func2 = function() {
33.  func4();
34.  }
35.  var func3 = function() {
36.  }
37.  var func4 = function() {
38.  car = new Car();
39.  car.funcX();
40.  }
41.  var Car = function() {
42.  this.brand = ‘volvo’;
43.  this.color = ‘red’;
44.  this.funcX = function() {
45.  this.funcY();
46.  }
47.  this.funcY = function() {
48.  this.funcZ();
49.  }
50.  this.funcZ = function() {
51.  console.trace(‘trace car’)
52.  }
53.  }
54.  func1();

第33行會輸出：

在這裡我們可以看見到func1呼叫了func2， func2又呼叫了func4。Func4 建立了Car的例項，然後呼叫了方法car.funcX，等等。

儘管我們感覺我們已經對自己的指令碼程式碼非常瞭解，但是這種分析依然有用。比如優化程式碼。獲取到堆疊軌跡資訊和一個所有相關函式的列表。每一行都是可點選的，並且可以在他們中間前後穿梭。這種感覺非常的棒。

7. 格式化程式碼使除錯 Java 變得容易

有時候你發現產品有一個問題，而 source map 並沒有部署到伺服器。不要害怕。Chrome 可以格式化 Java 檔案，使之易讀。格式化出來的程式碼在可讀性上可能不如原始碼 —— 但至少你可以觀察到發生的錯誤。點選原始碼檢視器下面的美化程式碼按鈕 {} 即可。

8. 快速找到除錯函式

我們來看看怎麼在函式中設定斷點。

通常情況下有兩種方法：

1.  在檢視器中找到某行程式碼並在此新增斷點
2.  在指令碼中新增 debugger

這兩種方法都必須在檔案中找到需要除錯的那一行。

使用控制檯是不太常見的方法。在控制檯中使用 debug(funcName)，程式碼會在停止在進入這裡指定的函式時。

這個操作很快，但它不能用於區域性函式或匿名函式。不過如果不是這兩種情況下，這可能是除錯函式最快的方法。（注意：這裡並不是在呼叫 console.debug 函式）。

1. var func1 = function() {
2.  func2();
3.  };
4.  var Car = function() {
5.  this.funcX = function() {
6.  this.funcY();
7.  }
8.  this.funcY = function() {
9.  this.funcZ();
10.  }
11.  }
12.  var car = new Car();

在控制檯中輸入 debug(car.funcY)，指令碼會在除錯模式下，進入 car.funcY 的時候停止執行：

9. 遮蔽不相關程式碼

如今，經常在應用中引入多個庫或框架。其中大多數都經過良好的測試且相對沒有缺陷。但是，偵錯程式仍然會進入與此除錯任務無關的檔案。解決方案是將不需要除錯的指令碼遮蔽掉。當然這也可以包括你自己的指令碼。 點此閱讀更多關於除錯不相關程式碼（http://raygun.com/blog/java-debugging-with-black-box/）。

10. 在複雜的除錯過程中尋找重點

在更復雜的除錯中，我們有時需要輸出很多行。你可以做的事情就是保持良好的輸出結構，使用更多控制檯函式，例如 console.log，console.debug，console.warn，console.info，console.error 等等。然後，你可以在控制檯中快速瀏覽。但有時候，某些JavaScrip除錯資訊並不是你需要的。

現在，可以自己美化除錯資訊了。在除錯Java時，可以使用CSS並自定義控制檯資訊：

1. console.todo = function(msg) {
2.  console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);
3.  }
4.  console.important = function(msg) {
5.  console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);
6.  }
7.  console.todo(“This is something that’ s need to be fixed”);
8.  console.important(‘This is an important message’);

輸出：

例如：

在console.log()中， 可以用%s設定字串，%i設定數字，%c設定自定義樣式等等，還有很多更好的console.log()使用方法。 如果使用的是單頁應用框架，可以為檢視（view）訊息建立一個樣式，為模型（models），集合（collections），控制器（controllers）等建立另一個樣式。也許還可以像 wlog，clog 和 mlog 一樣發揮小夥伴們的想象力！

11. 檢視具體的函式呼叫和它的引數

在 Chrome 瀏覽器的控制檯（Console）中，大家的注意力都集中在具體的函式上。每次這個函式被呼叫，它的值就會被記錄下來。

1. var func1 = function(x, y, z) {
2.  //....
3.  };

然後輸出：

這是檢視將哪些引數傳遞到函式的一種很好的方法。但在這裡小編要說明，如果控制檯能夠告訴我們需要多少引數，那就好了。在上面的例子中，函式1期望3個引數，但是隻有2個引數被傳入。如果程式碼沒有在程式碼中處理，它可能會導致一個 bug 。

12. 在控制檯中快速訪問元素

在控制檯中執行 querySelector 一種更快的方法是使用美元符。$(‘css-selector’) 將會返回第一個匹配的 CSS 選擇器。$$(‘css-selector’) 將會返回所有。如果你使用一個元素超過一次，它就值得被作為一個變數。

13. Postman 很棒（但 Firefox 更快）

很多開發人員都使用 Postman 來處理 Ajax 請求。Postman 真不錯，但每次都需要開啟新的瀏覽器視窗，新寫一個請求物件來測試。這確實有點兒煩人。

有時候直接使用在用的瀏覽器會更容易。

這樣的話，如果你想請求一個通過密碼保證安全的頁面時，就不再需要擔心驗證 Cookie 的問題。這就是 Firefox 中編輯並重新發送請求的方式。

開啟探查器並進入網路頁面，右鍵單擊要處理的請求，選擇編輯並重新發送。現在你想怎麼改就怎麼改。可以修改頭資訊，也可以編輯引數，然後點選重新發送即可。

現在我傳送了兩次同一個請求，但使用了不同的引數：

14. 節點變化時中斷

DOM 是個有趣的東西。有時候它發生了變化，但你卻並不知道為什麼會這樣。不過，如果你需要除錯 Java，Chrome 可以在 DOM 元素髮生變化的時候暫停處理。你甚至可以監控它的屬性。在 Chrome 探查器上，右鍵點選某個元素，並選擇中斷（Break on）選項來使用：