簡介
無論您使用的是 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，然後開啟「啟用開發人員工具實驗」
接著，前往「DevTools」，然後按下右下角的齒輪圖示 
。接著，您可以前往「實驗功能」並啟用「畫布檢查」功能，步驟如下：
如要讓變更生效，您必須關閉並重新開啟開發人員工具 (您可以使用 Alt+R 或 Option+R，這兩者都是方便的替代方案)。
開發人員工具重新開啟後，請前往「Profile」部分，您會看到新的「Canvas Profiler」選項。
首先，您會發現 Canvas Profiler 處於停用狀態。只要頁面含有要偵錯的畫布，只要按下「Enable」，頁面就會重新載入，並準備擷取 <canvas> 呼叫：
您需要決定要擷取單一影格，還是連續影格，其中影格與您在 DevTools 時間軸中看到的完全相同。
單一影格會擷取呼叫，直到目前影格結束為止，然後停止。另一方面，連續影格會擷取所有 <canvas> 元素的所有影格，直到您指示停止為止。請根據您使用 <canvas> 元素的方式選擇模式。對於持續播放的動畫，您可能會想要擷取單一影格。針對回應使用者事件而顯示的簡短動畫，您可能需要擷取連續的影格。
設定完成後，您就可以開始擷取畫面了！
擷取影格
如要擷取畫面，只要按下「Start」，然後照平常方式與應用程式互動即可。一段時間後，返回開發人員工具，如果您是連續擷取，請按下「Stop」。
現在左側清單中有一個全新的設定檔，並將所有 <canvas> 元素擷取的結構定義呼叫次數完成。按一下設定檔，畫面會顯示類似下圖的畫面：
下方窗格會列出可逐步瀏覽的所有擷取影格清單。只要按一下各個影格，頂端的螢幕截圖就會顯示 <canvas> 元素在該影格結尾的狀態。如果您有多個 <canvas> 元素，可以使用螢幕截圖下方的選單，選擇要顯示哪一個。
畫面內會顯示繪圖呼叫群組。每個繪圖呼叫群組都包含一個繪圖呼叫，這會是群組中的最後一個呼叫。那麼，什麼是平局判定呢？如果是 2D 結構定義，看起來像 clearRect()、drawImage()、fill()、stroke()、putImageData() 或任何文字轉譯函式，如果是 WebGL，則為 clear()、drawArrays() 或 drawElements()。基本上，任何會變更目前繪圖緩衝區內容的動作都算是繪圖事件。(如果您不熟悉圖形，可以將緩衝區視為包含我們要處理的像素的點陣圖)。
接下來，您只需逐一檢查清單即可。您可以在影格、繪圖呼叫群組或呼叫層級執行這項操作。無論您選擇以何種方式逐一瀏覽清單 (螢幕截圖下方有按鈕可協助您快速瀏覽)，您都會看到當下的情境，也就是說，您可以快速找出並修正錯誤。
找出差異
另外一項實用功能是能夠在兩次呼叫之間查看哪些屬性和變數出現變化。
如要查看，只要按一下側欄按鈕 (
)，就會彈出新檢視畫面。逐步執行繪圖呼叫時，您會看到已更新的屬性。如果將遊標懸停在緩衝區或陣列上，就會顯示緩衝區或陣列的內容。
瞭解觀眾心聲！
您現在已瞭解如何在 Chrome 的開發人員工具中偵錯畫布。如果您對 Canvas Profiler 工具有任何意見，請回報錯誤或向 Chrome DevTools 團隊發布貼文。在檢查 <canvas> 時，如果發現任何錯誤，或者有任何需要查看其他事項，請告訴我們，原因在於 Chrome 工具的設計宗旨僅在於提供開發人員的意見回饋，以及 Chrome 工具不斷改良的意見回饋。