引言
如果您使用 2D 或 WebGL 環境，只要是使用過 <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
}
有時候，您可能會想擷取傳送至畫布結構定義的指示，並逐一逐步完成這些步驟。幸好，Chrome 開發人員工具新增了「畫布檢查」功能，助我們一臂之力！
本文將說明如何使用這項功能開始對畫布工作進行偵錯。這個檢查器支援 2D 和 WebGL 環境，因此無論您使用的是哪一種環境，應該都能立即取得實用的偵錯資訊。
入門課程
如要開始使用，請在 Chrome 中前往「about:flags」，然後開啟「啟用開發人員工具實驗功能」
接著，前往開發人員工具，並點選右下角的齒輪 
。然後前往「實驗」並啟用「畫布檢查」：
你必須關閉再重新開啟開發人員工具，變更才會生效 (可以使用 Alt+R 或 Option+R 做為替代工具)。
開發人員工具重新開啟後，請前往「Profile」(設定檔) 部分，您會看到新的 Canvas Profiler 選項。
首先，您會發現 Canvas Profiler 已停用。找出要偵錯的頁面後，只要按下「Enable」，頁面就會重新載入，準備好擷取 <canvas> 呼叫：
您必須決定要擷取的是單一影格，還是連續影格，而這些影格會與開發人員工具中的時間軸完全相同。
單一影格會擷取呼叫，直到目前影格結束時才停止。另一方面，「連續影格」會擷取所有 <canvas> 元素的所有影格，直到你指示停止為止。應選擇哪種模式，取決於您使用 <canvas> 元素的方式。如果是播放中的動畫，您可能需要擷取單一影格。如果是回應使用者事件的簡短動畫，則可能需要擷取連續影格。
設定完成後，即可開始拍攝！
擷取影格
如要擷取內容，只要按下「Start」(開始)，然後照常與應用程式互動即可。一段時間後，請返回開發人員工具。如果是連續擷取，請按下「停止」。
現在，左側清單中已經有全新的設定檔，完成所有 <canvas> 元素擷取的結構定義呼叫次數。按一下個人資料，您就會看到如下所示的畫面：
下方窗格中會列出所有可逐步瀏覽的已擷取畫面。當您點選每個影格時，頂端的螢幕截圖就會顯示該影格結尾的 <canvas> 元素狀態。如果您有多個 <canvas> 元素，可以使用螢幕截圖下方的選單，選擇要顯示的元素。
您會在該框架中看到繪製呼叫群組。每個繪製呼叫群組都包含一個繪製呼叫，這會是群組中的最後一次呼叫。繪製呼叫是什麼呢？如果是 2D 結構定義 (例如 clearRect()、drawImage()、fill()、stroke()、putImageData() 或任何文字轉譯函式)，WebGL 將會是 clear()、drawArrays() 或 drawElements()。基本上，這個物件就是會變更目前繪圖緩衝區內容的「任何物件」。(如果你沒有圖像，可以將緩衝區視為一個含有我們操縱像素的點陣圖。)
現在，您必須逐步完成清單。您可以在頁框、繪製通話群組或呼叫層級進行這項操作。無論選擇瀏覽清單的方式為何 (而且螢幕截圖下方有一個按鈕可以幫助您快速瀏覽)，您都能查看當下的背景資訊，進而快速找出並修正錯誤。
辨別差異
另一個實用功能是可以查看兩次呼叫之間發生哪些屬性和變數的變化。
如要確認，您只要按一下側欄按鈕 (
)，即可開啟新的檢視畫面。逐步繪製繪製呼叫時，您會看到已更新的屬性。將滑鼠遊標懸停在緩衝區或陣列上，即可查看其內容。
勇敢傳達心聲！
因此，現在你已瞭解如何在 Chrome 開發人員工具中對畫布工作進行偵錯了。如果您對 Canvas 分析器工具有意見，請回報錯誤，或將問題發布到 Chrome 開發人員工具群組。如果在檢查 <canvas> 時發現任何錯誤，或是想查看其他建議，請告訴我們。這完全取決於開發人員的使用情形和 Chrome 工具所提供的意見回饋。