使用Chrome開發工具調試Canvas

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工具才能更加好用