---
# System prepended metadata

title: What tools and techniques do you use debugging JavaScript code?

---

# What tools and techniques do you use debugging JavaScript code?

## 一、解答
[參考文件的解答](https://github.com/yangshun/front-end-interview-handbook/blob/master/contents/en/javascript-questions.md#what-tools-and-techniques-do-you-use-for-debugging-javascript-code)
### React
* React Devtools

### JavaScript
* Chrome Devtools
* debugger statement
* Good old console.log debugging

### 其他
**1.ESLint**
* 維持統一代碼風格 (自動修正)
* 避免低級語法錯誤 (ex. 打錯字、少括號....)
* 提醒代碼疏漏 (ex. 定義變數而無使用)
* 優化代碼 (ex. 使用 === 而非 ==)

[安裝ESLint](https://ithelp.ithome.com.tw/articles/10217743)
</br>
**2.Prettier ESLint**
* 代碼修改成統一的風格
* 需要和 Eslint 搭配使用

[安裝Prettier ESLint](https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/661283/)
</br>
**3.Postman**
Postman 是一個可以模擬 HTTP Request 的工具，其中包含常見的 HTTP 的請求方式，例如： GET 、POST、PUT、DELETE，而它的主要功能就是能夠快速的測試你的 API 是否能夠正常的請求資料，並得到正確的請求結果。
[使用postman](https://www.postman.com/)
</br>

**4.CodePen, CodeSandBox, JS Bin, Jsfiddle**
線上程式碼分享、測試與偵錯編輯器工具。可以用來將編輯後的程式碼儲存到電腦,或將URL地址發給其他人,讓其協助除錯程式碼。

[CodePen:](https://codepen.io/trending)
分別提供了 html、css、js 編輯框，以及預覽檢視，簡潔明瞭。

[CodeSandBox:](https://codesandbox.io/)
介面跟vscode很像，提供多種框架模板，可同時除錯多個檔案，存在父子元件、頁面巢狀引用。
檔案可以輸出到github。

[JS Bin](https://jsbin.com)：
介面簡潔、提供主流編譯語言、支援插入各種函式庫，但沒有提供模板。

[Jsfiddle](https://jsfiddle.net/):
老牌線上編輯器工具，一樣提供主流編譯語言、支援插入各種函式庫。

</br>

**5.JSON整理工具**
https://ithelp.ithome.com.tw/articles/10249542



---

## 二、React的除錯工具
### React Devtools
React Developer Tools 是一款由 facebook 開發的 chrome 偵錯工具，透過這個工具可以看到 React 元件的結構，我們還可以直接編輯或是查看元件的 props / state ，讓整個開發流程更順利。
必須先下載安裝才能使用：[下載地址](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?utm_source=chrome-ntp-icon)
</br>
### 主要功能：
1.查看元件屬性
2.修改元件屬性
</br>
### 運作模式：
安裝成功後，按F12可以看到右邊的工具列中會有兩個選項，分別是「Components」、「Profiler」。
react-devtools 會趕在第一次 mount 前注入一個 global variable __REACT_DEVTOOLS_GLOBAL_HOOK__，並利用原生的 custom event 來傳遞是否有使用到 ReactJS 來決定要不要顯示這個Tab。
![](https://i.imgur.com/3DTkj6S.png)

**Components**: 點擊Components可以看到目前頁面上的React組件的結構
![](https://i.imgur.com/XRDZV7h.png)

**Profiler**: profiler可以查看所有component的渲染時間
點選類似長條圖的區塊就會顯示對應的渲染時間，長條圖如果為黃色而且比較長的話就代表渲染時間較長。
![](https://i.imgur.com/JFe5nuT.png)



</br>
**「rendered by」及「source」：**
用來讓開發者知道用的是哪個版本的 React-dom 與來源。
![](https://i.imgur.com/xms2WXm.png)

**使用‘$r’查看component內變數**
在介面內查看 prop/state 的值以外，還可以利用 $r 這個變數來 access component
![](https://i.imgur.com/19roIVq.png)







## 三、JavaScript的除錯工具
### 前端開發的除錯技巧:
1. DOM檢查
1. DOM斷點
1. 除錯事件
1. 記憶體洩露分析
1. 斷點

### JS除錯小技巧:
*  **使用debugger 語句在原始碼中增加斷點**
    一旦到達 debugger 語句，執行中斷。當前作用域的上下文出現在控制檯中，還有所有的區域性變數和全域性變數。將滑鼠游標移到變數上可以檢視變數的值。
    ```
    if (thisThing) {    
    debugger;}
    ```

* **用 console.table 記錄物件、陣列。**

    ```
    var animals = [
        { animal: 'Horse', name: 'Henry', age: 43 },
        { animal: 'Dog', name: 'Fred', age: 13 },
        { animal: 'Cat', name: 'Frodo', age: 18 }
    ];

    console.table(animals);
    ```
    ![](https://i.imgur.com/Sl7xCCy.png)




* **DOM元素的控制檯書籤**

    Chrome開發者工具和Firebug都提供了書籤功能，用於顯示你在元素標籤頁（Chrome）或HTML標籤頁（Firebug）中最後點選的DOM元素。如果你依次選擇了 A 元素、 B 元素和 C 元素，

    $0   表示 C 元素
    $1 表示 B 元素
    $2 表示 A 元素

    如果你又選擇了元素 D ，那麼 $0 、 $1 、 $2 和 $3 分別代表 D 、 C 、 B 和 A 。
    
    ![](https://i.imgur.com/1yepIHn.png)


* **評量迴圈的方法:console.time()、console.timeEnd()**

    使用console.time() 、console.timeEnd()來偵測程式執行的時間

    ```
    console.time('Timer1');

    var items = [];

    for(var i = 0; i < 100000; i++){
       items.push({index: i});
    }

    console.timeEnd('Timer1');
    ```
    輸出結果:
    ![](https://i.imgur.com/mhLL0lF.png)


* **堆疊追蹤-訪問呼叫站**

    透過console.trace('')，控制輸出當前的堆疊資料，可由上而下閱讀輸出的堆疊資料。

    ```
    var car;
    var func1 = function() {
        func2();
    }

    var func2 = function() {
        func4();
    }
    var func3 = function() {
    }

    var func4 = function() {
        car = new Car();
        car.funcX();
    }
    var Car = function() {
        this.brand = 'volvo';
        this.color = 'red';
        this.funcX = function() {
            this.funcY();
        }

        this.funcY = function() {
            this.funcZ();
        }

        this.funcZ = function() {
            console.trace('trace car')
        }
    }
    func1();
    var car; 
    var func1 = function() {
        func2();
    } 
    var func2 = function() {
        func4();
    }
    var func3 = function() {
    } 
    var func4 = function() {
        car = new Car();
        car.funcX();
    }
    var Car = function() {
        this.brand = 'volvo';
        this.color = 'red';
        this.funcX = function() {
            this.funcY();
        }
        this.funcY = function() {
            this.funcZ();
        }
        this.funcZ = function() {
            console.trace('trace car')
        }
    } 
    func1();
    ```
    
    ![](https://i.imgur.com/z9T5JgW.png)

* **最小化程式碼**


    Chrome開發者工具Sources標籤頁中的格式化按鈕（Pretty Print Button）。格式化按鈕 {} 位於原始碼文字區域的下方。格式化按鈕對原始碼進行美化，並改變行號，這使得除錯程式碼更加方便，堆疊跟蹤更加有效。

    ![](https://i.imgur.com/BUGZADP.png)


* **效能審查**

    效能 審查 工具通常是很有用的。這些工具可以用於防止記憶體洩露，還可以檢測到你的網站哪裡需要優化。由於這些工具並不瞭解你的產品，你可以忽略其某些建議。通常來說，效能分析工具能夠有效範圍，可以使你的網站顯著優化。

    **審查工具舉例：**
    **效能面版:**
    藍色線是 JS Heap 就是剛剛我們錄制時頁面使用記憶體的情況，向上爬升鋸齒狀的圖，這就是頁面有記憶體洩漏的問題。
    
    [效能面版範例](https://ithelp.ithome.com.tw/articles/10195197)

    ![](https://i.imgur.com/EDOzzPL.png)

    **Chrome開發者工具的Audit標籤頁**
    **YSlow**


## 四、參考來源
https://ithelp.ithome.com.tw/articles/10195197

https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/274194/

https://raygun.com/learn/javascript-debugging-tips

https://medium.com/unalai/%E9%96%8B%E7%99%BC%E5%BF%85%E5%82%99-%E6%91%B8%E7%B4%A2%E4%B8%8D%E5%AE%8C%E7%9A%84-chrome-devtools-%E5%B0%8F%E6%8A%80%E5%B7%A7%E4%B9%8B%E8%A8%AD%E7%BD%AE%E6%96%B7%E9%BB%9E%E7%AF%87-4d72cb35fa39

https://www.npmjs.com/package/react-devtools

https://medium.com/reactmaker/%E4%BD%BF%E7%94%A8-react-developer-tools-%E4%BE%86%E5%81%B5%E9%8C%AF%E4%BD%A0%E7%9A%84%E7%B6%B2%E9%A0%81-bd44d6d62596

https://ithelp.ithome.com.tw/articles/10243122

https://zh-hant.reactjs.org/blog/2015/09/02/new-react-developer-tools.html

https://raygun.com/learn/javascript-debugging-tools

https://blog.miniasp.com/post/2013/06/29/Useful-tool-JS-Bin-Collaborative-JavaScript-Debugging

https://ithelp.ithome.com.tw/articles/10201503

https://zhuanlan.zhihu.com/p/37490345

https://ithelp.ithome.com.tw/articles/10237501