Chrome 使用 Developer Tools 來抓出臭蟲

回想當年
早期寫 JavaScript 時因為缺少工具所以都只能仰賴人工的判斷來作除錯，雖然這是個訓練眼力與系統化的分析思考能力的好機會，但是卻讓開發人員在開發 JavaScript 的時候老是需要花很多時間。
不過現在不一樣了，打從 Web 2.0 之後 JavaScript 在系統開發上已經變成標配而不再是選配。所以企業開始要求，使用者開始喜歡，開發人員開始學習，於是各家瀏覽器跟軟體開發商就不斷的推出許多媲美專業編輯器的除錯工具來造福這世界上的開發人員與 Web Master。

隨口介紹一點
今天要介紹的是 Chrome 的 Developer tools，這個 extensions 是由 Google Chrome tools 所提供的。使用它可以做到幾件 Web developer and Web Master 幾乎天天都需要做的工作：

1. 開發除錯，協助我們快速地找到 Bug 或在 Reengineering 的時候協助分析 Source code
2. 分析網站的資源，可以分析網頁中所有資源的清單與下載所需的時間與資源大小，以利我們做 Optimise
3. 分析網頁的 Request and Response，協助我們分析 Performance 的瓶頸
4. JavaScript Console，提供我們能供快速的驗證與法的地方，不用在每次都要編輯 > 開啟瀏覽器 > Reload > 驗證，大大節省很多時間

Chrome developer tools panel 介紹

1. Elements
   顯示 Page 中所有的 HTML 資訊，透過這個 Panel 與左下方的放大鏡可以協助快速找到 Page 元素相關的 source code。
2. Resources
   主要列出 Page 中所有的資源清單，除了 CSS, Script, Images 之外也會列出 Local Database Session, Cookies 等的一些瀏覽器端的資訊。
3. Network
   收集所有透過瀏覽器對外的網路連線資訊，像是 Page 中的 AJAX 動作都會被詳細記錄 
4. Scripts
   收集 Page 所使用到的 JavaScript 資訊，UI 設計了下拉式的選單列可以快速地選取所要瀏覽的 Script File。
5. Timeline
   Page 所有 Request, Response 的詳細資訊
6. Profiles
   收集並統計 Page 中所有物件(Object)的記憶體使用量，從這裡可以看到 Single Object 所使用的記憶體之外，也可以看到關聯使用的記憶體使用量，也就是 Object GC 後會歸還的總記憶體。  
7. Audits
   Best practices analysis，執行後可以得到一些建議的改善做法，”只是建議“因為不同的 scenario 有不同的設計模式，不過這裡列出的資訊非常有參考價值，善用的話可以快速的 review code 節省不少的人力。
8. Console
   開發時如果沒有工具的話總是要在編輯器上寫好 code 然後再開 browser 去測試，在這個 panel 中，你可以直接在 console 裡頭打上 JavaScript 語法直接測試，是個超有用的 panel。

Debug 的方式

習慣開發 Java, C++, Objective-c, Dot Net 的工程師對於 Debug  process 應該都非常熟悉：插中斷點(breakpoint) > 執行程式 > 停止在中斷點上 >  觀察程式流程與 Parameter value。

再多說一點好了！

一般來說我們在研究 Source code 或是在做 debug 的時候我們會先以程式出現在的錯誤訊息或是經驗判斷來判斷錯誤發生的那個地方然後再慢慢地往下去找出問題，像捕魚一樣，先鎖定一個區域，然後撒網，慢慢地收網。

中斷點就是這樣的工具，在可能出現錯誤的程式設定中斷點，然後一行行執行程式，一邊執行一邊觀察程式跑的流程與參數的值是否正確，藉以找出問題的源頭。

找個網站來示範

打開 Chrome > 開啟 http://www.kimo.com.tw

開啟 Developer Tools

點選 Chrome 右上方的板手圖示( Customize and control Google Chrome) >  Tools > Developer Tools

點選下方 Panel 上的 Scripts

左側是 JavaScript 檔案內容，左上方可以下拉選則你要看得 JavaScript 檔案

右側的 Breakpoints 裡頭所有中斷點的清單

右側的 XHR Breakpoints 裡頭是針對 Ajax 的中斷點設定，可以設定 URL 來做判斷

選擇 tongwen_core.js，移動到 290 行然後點選左邊的數字，成功的話行號會出現藍色標簽，右側的 Breakpoints 清單會出現一筆資料

Reload 網頁，此時下方程式會停留在 276 行，這表示程式執行到這裡停止並等待你的指示。

回到 Scripts panel 選單右側的上方，這裡有幾個小 icon 是我們可以控制程式要如何進行下一步的按鈕。 這裡我們有幾個選擇

1. pause script execution (F8)：點選後程式會正常執行一次的完整程式流程
2. Step over next function call (F10)：點選後會執行到下一個判斷點，這裡點選後程式會執行 switch 的判斷式
3. Step into next function call (F11)：點選後會進入功能，假設你的程式執行停留在一個 function 上的話，點了這個按鈕就會進入這個 function 的內部並停在第一行程式
4. Step out of current function：跳出這個 function 後停在 function 後的第一行程式

點選 Step over next function 直到 369 行，然後將鼠標移動到node.childNodes.length 的 length 上，這時候會出現 length的值，可以透過這個方式來觀察參數值是否正確或是參數的值來判斷用途

然後自己試看看吧！

工具很簡單但是卻非常好用，鎖定範圍 > 設定中斷點 > 逐行執行程式 > 觀察流程與參數是否正確 > 找出問題！