http://sentsin.com/web/253.html
不管你是使用2D 還是WebGL，任何用過<canvas>的人都知道很難調試，使用Canvas通常需要長長的難以跟蹤的調用列表
function draw() {
context.clearRect(0, 0, 258, 258);
context.fillStyle = "#EEEEEE";
context.beginPath();
context.arc(129, 129, 127, 0, 6.28, true);
context.closePath();
context.fill();
// … and on and on
}
代碼laycode - v1.1
有時候你需要捕獲發送到 Canvas 上下文的命令，然后一步步跟蹤，幸運的是Chrome的 DevTools 提供了 Canvas檢查器，這個新特性讓我們可以調試canvas
本文將介紹如何使用這個特性來調試你的 Canvas 代碼，這個檢查器同時支持2D 和WebGL，所以不管你使用哪一種，你都可以直接得到有用的調試信息
開始
首先進入Chrome 瀏覽器的 about:flags界面，並激活選項“啟用開發者工具實驗”
然后，在DevTools界面中點擊（右上角）的齒輪按鈕，進入Experiments，並勾選Canvas inspection選項
你需要重啟 DevTool（你可以使用 Alt+R或者Option+R） 當 DevTools 重啟后，進入Profiles界面，可以看到新的 Canvas Profiler選項 你會注意到剛開始Canvas Profiler是無效狀態，當你想調試頁面中的 canvas 元素時，你只需要簡單的點擊Enable按鈕，頁面將重新加載並准備捕獲<canvas>調用
你可以捕獲單個幀，或者連續幀，幀的信息同樣也可以在 DevTools 的 Timeline 中看到
一幀代表一次頁面事件周期，這包含腳本運行，事件處理，更新DOM，樣式生效，布局和重繪頁面，為了動畫的流暢，每幀的時間最好小於1/60秒，也就是16.6毫秒
單幀捕獲會在每幀的結束時停止
連續幀捕獲則只在你告訴他時停止，選擇哪種模式取決於你如何使用<canvas>，對於一個連續動畫，你可能想捕獲每一幀，對於為響應用戶交互而引發的短暫動畫，你可能需要捕獲連續幀
選擇幀監聽類型，然后我們就可以就緒開始捕獲了
捕獲幀事件
你只需要點擊Start，然后正常操作你的應用，過一會兒回到 DevTools 界面，點擊Stop按鈕。 現在可以看到一個新的 profile，包含所有捕獲的<canvas>元素的調用次數，點擊這個 profile 可以看到下面的界面：
下面的面板中，可以看到所有捕獲的幀，你可以點擊每幀看到逐步繪制的過程，如果你有多個<canvas>元素，你可以選擇其中的一個
每一幀的里面，可以看到繪制調用組，每個組包含一個繪制調用（位於組的最后），什么是繪制調用？對於2D context是 clearRect(), drawImage(), fill(), stroke(), putImageData()或者任何文字繪制方法，對於 WebGL則是clear(), drawArrays()或者drawElements()，本質上任何改變當前繪制緩沖內容的操作（如果Canvas 不可見，你可以想象為對緩存位圖的操作） 你可以盡情的查看繪制過程的每一步，每次選擇都可以直接看到當前位置繪制的效果，可以方便快速的定位 bug
發覺差異
另一個有用的功能是查看兩次調用的參數和屬性變化，你只需要簡單的點擊sidebar按鈕，就可以看到一個新的屬性視圖，每一步繪制調用你都可以看到屬性的更新，你可以鼠標移到屬性值上面，看到詳細的內容或者數組信息
反饋
現在你知道如何使用 Chrome DevTools 調試你的 canvas了，如果你對 Canvas 調試工具有任何反饋，請提交 bug或者post到 Chrome DevTools Group，如果你發現了 bug 或者希望在調試<canvas>時看到任何其他信息，歡迎與我們聯系，因為只有通過開發者的反饋Chrome工具才能更加好用