# 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。
**Components**: 點擊Components可以看到目前頁面上的React組件的結構
**Profiler**: profiler可以查看所有component的渲染時間
點選類似長條圖的區塊就會顯示對應的渲染時間，長條圖如果為黃色而且比較長的話就代表渲染時間較長。
</br>
**「rendered by」及「source」：**
用來讓開發者知道用的是哪個版本的 React-dom 與來源。
**使用‘$r’查看component內變數**
在介面內查看 prop/state 的值以外，還可以利用 $r 這個變數來 access component
## 三、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);
```
* **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 。
* **評量迴圈的方法: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');
```
輸出結果:
* **堆疊追蹤-訪問呼叫站**
透過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();
```
* **最小化程式碼**
Chrome開發者工具Sources標籤頁中的格式化按鈕（Pretty Print Button）。格式化按鈕 {} 位於原始碼文字區域的下方。格式化按鈕對原始碼進行美化，並改變行號，這使得除錯程式碼更加方便，堆疊跟蹤更加有效。
* **效能審查**
效能 審查 工具通常是很有用的。這些工具可以用於防止記憶體洩露，還可以檢測到你的網站哪裡需要優化。由於這些工具並不瞭解你的產品，你可以忽略其某些建議。通常來說，效能分析工具能夠有效範圍，可以使你的網站顯著優化。
**審查工具舉例：**
**效能面版:**
藍色線是 JS Heap 就是剛剛我們錄制時頁面使用記憶體的情況，向上爬升鋸齒狀的圖，這就是頁面有記憶體洩漏的問題。
[效能面版範例](https://ithelp.ithome.com.tw/articles/10195197)
**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
Sign in with Wallet
Connect another wallet